数据双向绑定浅析

近期看到一篇文章关于jquerymy.js ，是一个关于数据双向绑定的库，就想先把之前对于angular和vue的双向数据绑定给梳理一下。

数据绑定其实跟框架的设计模式相关，主要有MVC,MVP,MVVM三种，可参考我总结的另一篇文章 浅析MVC,MVP,MVVM

angular数据双向绑定模块：

angular其实是从MVC发展过来（MVC的界面和逻辑关联紧密，数据直接从数据库读取），慢慢演变为MVVM模式（MVVM的界面与viewmodel耦合比较松，界面数据是从viewmodel中获取的，也就是Scope），其实设计模式没什么关系，只要适合自己的项目就可以了。

angular的双向绑定主要是digest循环以及dirty-checking（脏数据检查），包括watch,digest,和apply。

1.Angular在浏览器循环监听事件中添加了自己的digest循环事件（核心）
浏览器一直在监听页面上的事件，当你点击一个按钮等等，操作触发之后，回调函数就会执行，然后你就可以做任何DOM操作，等回调+函数执行完成，浏览器就会相应更新DOM。 angular往里面加了监听事件。

2.watch队列

每次你绑定一些东西到你的UI界面上时你就会往watch队列里插入一条watch。watch就是那个可以检测它监视的model里时候有变化的东西。当我们的模版加载完毕时，Angular解释器会寻找每个directive（指令），然后生成每个需要的watch。

3.digest循环
当浏览器接收到可以被angular context处理的事件时，digest循环就会触发，这个循环包括了两个更小的循环组合起来的，一个是处理evalAsync队列，另一个是watch队列，其实就是digest会遍历我们的watch，然后问它有没有属性和值发生变化了，直到所有的watch队列全部都检查过，一旦有watch改变了，那就要循环从新触发，直到所有的watch都没有变化，这样才能保证所有的model都已经不会再变化了，但是如果循环超过10次的话，那么它将抛出一个异常，这是为了防止无限循环，当digest循环结束