双向数据绑定

是什么：
      基本含义就是数据的操作反映到数据，数据的改变实时展现到界面。
原理 ：
实现响应式或双向数据绑定分三个步骤：
    1)View中UI元素和Model中的data中的数据绑定
    2)当UI元素内容变化时，data中的数据同步变化。即View ==>Model
    3)当Model中的data数据变化时，View中的UI元素同步变化。即Model ==>View。
 
实现方式：
  • 观察者模式(backbone.js)
  • 脏值检测(angular.js)
  • 数据劫持(vue.js)
 
观察者模式： 一般通过sub, pub的方式实现数据和视图的绑定监听，更新数据方式通常做法是 vm.set('property', value)。
在backbone中，Model到View的数据传递，是在View中监听Model中的属性的chang事件。当Model的更新时触发View重现render。而 View 到 Model的数据传递，可以监听View 对应的 DOM 元素的各种事件，在检测到 View 状态变更后，将变更的数据发送到Model。
 
脏值检测： Angularjs内部会维护一个序列，将所有需要监控的属性放在这个序列中，当发生某些特定事件时（这里非定时器而是由某些特殊事件触发），Angularjs会调用 $digest 方法遍历所有的watcher， 对被监控的属性做对比前后属性值是否发生变化；发生变化，则调用对应的handler。
特定事件大致如下：
  • DOM事件，譬如用户输入文本，点击按钮等。( ng-click ) 
  • XHR响应事件 ( $http ) 
  • 浏览器Location变更事件 ( $location ) 
  • Timer事件( $timeout , $interval ) 
  • 执行 $digest() 或 $apply() 
 
数据劫持： vue.js 采用数据劫持结发布者-订阅者模式的方式，通过Object.defineProperty(ECMAScript5.1)来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。（部分还不支持 Object.defineProperty 低级浏览器采用VBScript作了完美兼容）
 
实现mvvm的双向绑定，就必须要实现以下几点：
1、实现一个数据监听器Observer，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者
2、实现一个指令解析器Compile，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数
3、实现一个Watcher，作为连接Observer和Compile的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数，从而更新视图
4、mvvm入口函数，整合以上三者
 
posted @ 2017-11-30 18:09  nokelong  阅读(244)  评论(0)  编辑  收藏  举报