angularjs双向绑定后,发生了什么事情?是什么可以让view层和controller层进行绑定的?

字数 1600阅读 75

大家好,我是IT修真院北京总院第24期的学员,一枚正直纯洁善良的web程序员

今天给大家分享一下,修真院官网js任务7,深度思考中的知识点——angularjs双向绑定后,发生了什么事情?是什么可以让view层和controller层进行绑定的?

1.背景介绍

Angular实现了双向绑定机制

所谓的双向绑定,无非是从界面的操作能实时反映到数据,数据的变更能实时展现到界面

bind-show

2.知识剖析

如何绑定

Demo:如果我们自己实现双向数据绑定该怎么写?

3.如何实现

众所周知,angular是一个MVVM(Model-View,View-Model)模式的框架,可以实现数据和视图数据绑定。MVVM把数据加工的任务从Controller中解放了出来。使得Controller只需专注于数据调配的工作。

View是angularjs编译html后呈现出来的,需要编译的是controller中的定义的属性和方法以及directive中定义的指令。

View和controller是独立开来的,他们之间的纽带就是图中间的胶水——scope。Controller负责向scope中提供属性和方法,便于和view层面的html进行交互。

Angular双向绑定通过$watch,$digest,$apply实现的。

WATCH序列

watch监控model中是否有变化,会记录last值,也就是改变后的值,每一个model都会增加一个watch到watch队列中。

DIGEST循环

当浏览器接收到可以被angular context处理的事件时,$digest循环就会触发,这个循环有两个子循环,一个处理evalAsync队列,另一个处理watch队列,$digest会遍历$watch,然后询问:

何时触发脏值检查

DOM事件,譬如用户输入文本,点击按钮等。(ng-click)

XHR响应事件 ($http)

浏览器Location变更事件 ($location)

Timer事件($timeout, $interval)

执行$digest()或$apply()

既然所有的$watch都检查完了,那就要问了:有没有$watch更新过?如果有至少一个更新过,这个循环就会再次触发,直到所有的$watch都没有变化。这样就能够保证每个model都已经不会再变化。记住如果循环超过数据最大长度的话,它将会抛出一个异常,防止无限循环。 当$digest循环结束时,DOM相应地变化。

这个就是所谓的dirty-check,angular实际会引入了一个初始值为false的dirty变量作为循环条件,如果有改变过(也就是新旧值不相等),dirty变为true,循环继续。这里很重要的(也是许多人的很蛋疼的地方)是每一个进入angular context的事件都会执行一个$digest循环,也就是说每次我们输入一个字母循环都会检查整个页面的所有$watch。

那是什么决定一个事件是否进入angular context呢?

答案是$apply

在angular中使用普通的事件,无法双向绑定的事情。

demo-apply

这里值虽然改变了,但是没有强制执行$degest,监视foo和bar的watch根本没有执行,执行一次apply之后,watch就会知道这些变化,更新dom了。

这里只需要加上scope.$apply()就行了。

一般带ng的事件angular都会给你自动添加好了apply,所以你要操纵事件的时候加上apply才能实现数据输出到view层中。

4.常见问题

$digest和$apply有何区别?干嘛不直接使用$digest?

5.解决方法

1.$apply可以带参数,它可以接受一个函数,然后在应用数据之后,调用这个函数。

2.当调用$digest的时候,只触发当前作用域和它的子作用域上的监控,但是当调用$apply的时候,会触发作用域树上的所有监控。

demo

因此,从性能上讲,如果能确定自己作的这个数据变更所造成的影响范围,应当尽量调用$digest,只有当无法精确知道数据变更造成的影响范围时,才去用$apply,很暴力地遍历整个作用域树,调用其中所有的监控。

从另外一个角度,我们也可以看到,为什么调用外部框架的时候,是推荐放在$apply中,因为只有这个地方才是对所有数据变更都应用的地方,如果用$digest,有可能临时丢失数据变更。

6.拓展思考

1、$watch是循环触发的吗?

不会,只有当触发了了特定时间才会触发$watch,并不是按时间轮询触发

2、双向绑定有什么作用

双向绑定最大的好处是我们不再需要用jQuery去查询表单的状态,而是直接获得了用JavaScript对象表示的Model。

3、可以手动设定$apply的运行吗

可以的,angular里可以直接调用$applay()方法实现

7.参考文献

view和controller的那些事儿Angular沉思录(一)数据绑定

理解$watch ,$apply 和 $digest --- 理解数据绑定过程


视频链接

密码: ncs4

ppt链接


感谢大家观看

今天的分享就到这里啦,欢迎大家点赞、转发、留言、拍砖~



技能树.IT修真院

“我们相信人人都可以成为一个工程师,现在开始,找个师兄,带你入门,掌控自己学习的节奏,学习的路上不再迷茫”。

这里是技能树.IT修真院,成千上万的师兄在这里找到了自己的学习路线,学习透明化,成长可见化,师兄1对1免费指导。快来与我一起学习吧~

我的邀请码:12361358,或者你可以直接点击此链接:http://www.jnshu.com/login/1/12361358

推荐阅读更多精彩内容