angular.js实现数据双向通信的原理

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永远不会执行。

待续。。。。

原文链接

angular.js实现数据双向通信的原理相关推荐

angular js 循环数据（死数据）添加数据隔行换色单个删除排序
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
Vue源码解读一：Vue数据响应式原理
这方面的文章很多,但是我感觉很多写的比较抽象,本文会通过举例更详细的解释.(此文面向的Vue新手们,如果你是个大牛,看到这篇文章就可以点个赞,关掉页面了.)通过阅读这篇文章,你将了解到: 1.Vue数 ...
面向初学者的带MVC API的Angular Js Table CRUD MSSQL
目录介绍 Angular Js代码要点示例截图第一部分第二部分(ASP.NET MVC WEB API和数据表) 第三部分(关于Postman发布和测试API) 注意结论介绍本文主要介绍 ...
用angular JS和 bootstrap完成一个简单的购物车界面
初学angularJS,自己做一个简单的demo玩一下. 购物车界面:(1)能显示商品基本信息: (2)能对购买数量进行修改: (3)能够删除不想购买的商品: (4)能够自动计 ...
angular.js前端和后台的数据交换，后台取不到值对应方案
2019独角兽企业重金招聘Python工程师标准>>> 环境:angular.js+sastruts+apache-tomcat 最近在学习前端的一个设计工具angular.js,数 ...
Atitit. 数据约束校验原理理论与架构设计理念模式java php c#.net js javascript mysql oracle...
Atitit. 数据约束校验原理理论与架构设计理念模式java php c#.net js javascript mysql oracle 1. 主键1 2. uniq index2 3. ...
七步从Angular.JS菜鸟到专家（2）：Scopes
这是＂AngularJS - 七步从菜鸟到专家＂系列的第二篇. 在第一篇我们展示了如何开始搭建一个Angular应用.在这一篇里,我们要讨论一个理解AngularJS运作原理所必须的基本概念,以及你如 ...
七步走 Angular.js 从菜鸟到专家（系列列表）
Angular.js 是一个MV*(Model-View-Whatever,不管是MVC或者MVVM,统归MDV(model Drive View))JavaScript框架,其是Google推出的S ...
通过Web Api 和 Angular.js 构建单页面的web 程序
在传统的web 应用程序中,浏览器端通过向服务器端发送请求,然后服务器端根据这个请求发送HTML到浏览器,这个响应将会影响整个的页面,比如说:用户通过一个连接导航到一个页面,会发送一个请求到服务器端, ...

angular.js实现数据双向通信的原理

angular.js实现数据双向通信的原理相关推荐

最新文章

热门文章