实现数据绑定的做法有大致如下几种：

• 1、发布者-订阅者模式（backbone.js）

  一般通过sub, pub的方式实现数据和视图的绑定监听，更新数据方式通常做法是vm.set(‘property’, value)

  vm = {
    atttibutes: {},
    /* 属性设置器使用数据绑定器PubSub来发布变化   */
    set: function(attr_name, val){
        this.attriures[attr_name] = val;
        PubSub.publish(uid + ":change", [attr_name, val, this]);
    },
    get: function(attr_name){
        return this.attributes[attr_name];
    }
  }
  

• 2、脏值检查（angular.js）详细介绍..

  Angular在scope模型上设置了一个监听队列，用来监听数据变化并更新view 。每次绑定一个东西到view上时AngularJS就会往$watch队列里插入一条$watch，用来检测它监视的model里是否有变化的东西。当浏览器接收到可以被angular context处理的事件时，$digest循环就会触发，遍历所有的$watch，最后更新dom。脏检查因一个原因而被称为脏。它定时检查而不是直接监听属性变化，这个定时检查视为一个周期。

  ng只有在指定事件触发后，才进入$digest cycle：

  • DOM事件，譬如用户输入文本，点击按钮等。(ng-click)
  • XHR响应事件 ($http)
  • 浏览器Location变更事件 ($location)
  • Timer事件($timeout, $interval)
  • 执行$digest()或$apply()

• 3、数据劫持（vue.js）

  vue.js 则是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。当改变数据的某个属性值时，会触发set函数，获取该属性值的时候会触发get函数，通过这个特性来实现改变数据时改变视图；也就是说只有当数据改变时才会触发视图的改变，反过来在操作视图时，只能通过DOM事件来改变数据，再由此来改变视图，以此来实现双向绑定。

  具体步骤：

  • 需要observe的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter。

  function observe(data) {
    if (!data || typeof data !== 'object') {
        return;
    }
    /* 取出所有属性遍历 */
    Object.keys(data).forEach(function(key) {
        defineReactive(data, key, data[key]);
    });
  };
  
  function defineReactive(data, key, val) {
    observe(val); /* 监听子属性 */
    Object.defineProperty(data, key, {
      enumerable: true, /* 可枚举 */
      configurable: false, /* 不能再define */
      get: function() {
        return val;
      },
      set: function(newVal) {
        console.log('监听到值变化了 ', val, ' --> ', newVal);
        val = newVal;
      }
    });
  }
  

  • compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图

  • Watcher订阅者是Observer和Compile之间通信的中间人，在自身实例化时往属性订阅器(dep)里面添加本身，待属性变动dep.notice()通知时，调用自身的update()方法，并触发Compile中绑定的回调

• 4、setState (react)