angular.js实现数据双向通信的原理
angular的核心特性有:MVVM、模块化、依赖注入、自动化双向数据绑定、语义标签等。
1、AngularJS的scopes对象
AngularJS的scopes对象,是一般的javascript对象,可以在他们上面绑定属性和其他对象,也可以添加一些功能,用于观察数据结构上的变化。观察功能都由dirty-checking来实现,并且都在一个digest循环中被执行。
2、angular.js主要通过scopes实现数据双向绑定,scopes包括四个主要部分:
A、digest循环以及dirty-checking,包括watch digest $apply
B、Scope继承,这项机制使得我们可以创建scope继承来分享数据和事件
C、集合(数组和对象),有效的dirty-checking
D、事件系统(on),on emit $broadcast
3、上面的A是用来实现数据的双向绑定的原理,下面主要讲解A
a、浏览器事件循环和angular.js扩展
浏览器一直在等待指定事件的响应,比如下面的事件:
● DOM事件,譬如用户输入文本,点击按钮等(ng-click)
● XHR响应事件($http)
● 浏览器location变更事件($location)
● Timer事件($timeout,$interval)
一旦有指定的事件触发,事件的回调函数就会在javascript的解析器里面执行,然后就可以做任何的DOM操作。等回调函数执行完毕时,浏览器就会相应的对DOM作出变化。
angular.js拓展了这个事件循环,生成一个有时成为angular context的执行环境。
b、watch队列(watch list)
每次绑定一些东西到UI上时,就会往$watch队列里面插入一条$watch,想象一下$watch就是那个可以检测、监视的model里有变化的东西。当模板加载完成时,也就是在linking阶段(angular分为compole阶段和linking阶段),angular注释器会寻找每个directive,然后生成每个需要的$watch。
c、$digest循环
在a步骤中有提到angular.js扩展循环事件,当浏览器接收到可以被angular context处理的事件时,digest循环就会触发。
digest循环有两部分组成:
● 一个处理evalAsync队列
● 另一个处理watch队列
digest将会遍历我们的watch,然后询问他是否有属性和值变化,直到$watch队列都检查过。
这就是所谓的dirty-checking。当$watch有更新过,这个循环就会再次触发,直到所有的$watch都没有变化。这样就能够保证每个model都不变化了。如果循环超过10次,将会抛出一个异常,防止无限循环。当$digest循环结束时,DOM相应的变化。
d、通过$apply来进入angular context
$apply决定哪些事件进入angular context,哪些事件不进入。
当指定事件触发时,调用apply,然后进入angular context,如果没调用就不会进入angular context,$digest永远不会执行。
待续。。。。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。