常见的几种双向绑定的做法
* 发布者-订阅者模式(backbone.js)
* 脏值检查 (angular.js)
* 数据劫持(vue.js)
发布者-订阅者模式
一般通过sub,pub的方式实现数据和视图的绑定监听,更新数据方式通常做法是
vm.set('property',value)
脏值检查
angular.js 是通过脏值检测的方式对比数据是否有变更,来决定是否更新视图
脏值检查就是把旧的值和新的值进行比对,查看值是否发生变化。
最简单的方式就是通过setInterval()定时轮循检测数据变动
angular只有在指定事件触发时进入脏值检测
*dom事件,用户输入文本,点击按钮等
*XHR响应事件($http)
*浏览器location变更事件($location)
*Timer事件($timeout,$interval)
*执行$digest() 或 $apply()
数据劫持
Vue.js则是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,
在数据变动时发布消息给订阅者,触发相应的监听回调
编译指令时,订阅数据变化,绑定更新函数,每条属性都会绑定一个观察者
描述:入口传来一个数据
通过Object.defineProperty()劫持并监听所有的属性
一旦属性发生变化,就会通知订阅器找到对应的订阅者去更新我们的视图
订阅器作用:
* 通知watcher更新视图
* 存放多个订阅器
watcher作用就是更新视图
observer作用就是通过Object.defineProperty()劫持监听所有属性
Compile作用就是解析指令