Angular数据双向绑定实现的原理

一、什么是AngularJS

AngularJS是一个javascript框架，它诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。 AngularJS有着诸多特性，最为核心的是：MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。 理解什么是自动化双向数据绑定以及其实现的方式。

二、什么是数据绑定

首先我们要理解什么是数据绑定。目前我们所看到的网站页面中，基本是由数据和设计两部分组成。将设计转换成浏览器能理解的语言，便是html和css主要做的工作。而将数据显示在页面上，并且有一定的交互效果（比如点击等用户操作及对应的页面反应）则是js主要完成的工作。出于用户体验、数据安全等方面考虑，很多时候我们不会一提交数据就刷新页面（get请求），而是通过向后端请求相关数据，然后通过无刷新加载（ajax）的方式进行页面更新（post请求）。当数据进行更新后，页面上相应的位置也能自动做出对应的修改，这就是数据绑定。可以看出，数据绑定是M(model，数据）通过VM（model-view，数据与页面之间的变换规则）向V（view）的一个修改。

三、什么是双向绑定

所谓的双向绑定，就是从界面的操作能实时反映到数据，也就是数据的变更能够实时展现到界面。 在新的框架中（angualr，react，vue等），通过对数据的监视，一旦数据发生变化，就根据已经写好的规则对页面进行修改，这样便实现了V——M——VM——V的一个双向绑定。 它是相当于增加了一条反向的路，在用户操作页面（比如在Input中输入值）的时候，数据能及时发生变化，并且根据数据的变化，页面的另一处也做出对应的修改。有一个常见的例子就是淘宝中的购物车，在商品数量发生变化的时候，商品价格也能及时变化。

四、双向绑定的实现

AngularJs主要通过scopes模型实现数据双向绑定。AngularJS的scopes包括以下四个主要部分：

（1）digest循环以及dirty-checking，包括$watch,$digest,和$apply。 （2）Scope继承 – 这项机制使得我们可以创建scope继承来分享数据和事件。 （3）对集合 – 数组和对象 – 的有效dirty-checking。 （4）事件系统 – $on，$emit，以及$broadcast。 AngularJs 为 scope 模型上设置了一个 监听队列$watch，用来监听数据变化并更新 view 。每次绑定一个东西到 view(html) 上时 AngularJs 就会往 $watch 队列里插入一条 $watch，用来检测它监视的 model 里是否有变化的东西。当浏览器接收到可以被 angular context 处理的事件时，$digest 循环就会触发。$digest 会遍历所有的 $watch。从而更新DOM。