双向数据绑定

是什么:
      基本含义就是数据的操作反映到数据,数据的改变实时展现到界面。
原理 :
实现响应式或双向数据绑定分三个步骤:
    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入口函数,整合以上三者
双向数据绑定
 
双向数据绑定