AngularJS双向绑定之脏检查机制

一、Angular双向绑定（MVVM）

视图的改变能反映到数据模型上，数据的更改也能在界面呈现

二、触发双向绑定

只有UI事件(click,change等)，ajax请求或者timeout，interval延迟事件，才会触发双向绑定，确切来说，是触发脏检查

原理

使用事件绑定和属性绑定实现数据绑定
使用$digest方法实现对数据的循环遍历

三、脏检查的实现

bind() apply() $scope构造函数,以及构造函数的原型方法$watch()、$digest()

实现四步骤
1.实现数据的单向绑定
2.实现$watch()监听数据变化
3.实现$digest()循环遍历每一个watch对象
4.实例化$scope

1、实现数据的单向绑定

• 1.1定义视图数据

   var scope = {
        increase: function(){
            this.data++
        },
        decrease: function(){
            this.data--
        },
        data: 0
   }

• 1.1绑定UI事件(click,change等)

  function bind(){
    var list = document.querySelectorAll('[ng-click]');
    for(var i = 0, len = list.length; i < len; i++){
        list[i].onclick = (function(index){
            return function(){
              var func = this.getAttribute('ng-click')
              scope[func](scope);
              apply()
            }
        })(i)
    }
   }

• 1.2属性绑定，实现单向数据流

   function apply(){
    var list = document.querySelectorAll('[ng-bind]')
    for(var i = 0, len = list.length; i < len; i++){
        var bindData = list[i].getAttribute('ng-bind')
        list[i].innerHTML = scope[bindData]
    }
   }

单向数据流

2.实现$watch()监听数据变化

• 2.1创建构造函数$scope

  function $scope(){
    this.$$watchList = []
  }

$scope()构造函数声明了一个$$watchList数组，用于保存每一个watch对象

• 2.2创建$scope构造函数的原型方法$watch()

 $scope.prototype.$watch = function(name, getNewValue, listener){
    var watch = {
      name: name,
      getNewValue: function($scope){ //得到最新值
        ...
        return newValue;
        },
      listener: function(newValue,oldValue){ //观察者  当数据发生改变时需要执行的操作
        ...
        }
     };
    //自动把监听的变量添加到$$watachList队列中
    this.$$watchList.push(watch);
  }

注意：

• 每一个watch对象有三个属性,name、getNewValue、listener
• 每一个数据就对应一个Watch,例如user和password分别对应一个watch

<span>{{user}}</span>
<span>{{password}}</span>

3.实现$digest()循环遍历每一个watch对象(重点)

• 3.1创建$scope的原型方法$digest()

  $scope.prototype.$digest = function(){
     //获取watch对象的数组
      var list = this.$$watchList
      // 默认为dirty
      var dirty = true
      //寻循环计数器
      var checkTimes = 0

      while(dirty){
        dirty = false
        checkTimes++
        for(var i = 0; i < list.length; i++){
        //发挥监听者的作用
        var watch = list[i]
        console.log(watch)
        // $digest 第一次调用，last 为undefined,所以一定会进行一次数据呈现.
        var oldValue = watch.last
        var newValue = watch.getNewValue(this)
        //判断数据是否为脏
        if(newValue !== oldValue){
          //调用listener方法
          watch.listener(newValue, oldValue)
          //替换现在的新老值
          watch.last = newValue
          //是脏值
          dirty = true
        }

        //更稳定的$digest  迭代的最大值TTL（time to live）
        if(checkTimes >=10 && checkTimes){
            throw new　Error('检测超过10次')
        }
      }
    }

  }

• 遍历watch对象的数组，默认循环遍历一次
• watch.last初始值undefine，一定会渲染一次数据
• 比较每一个watch对象的新值和旧值,
• 如何出现了脏值（新值不等于旧值），执行listener监听器方法，参数为newValue和oldValue
• 为了制造更稳定的$digest，需要设置循环遍历的最大值为10次，成为TTL。否则，浏览器会占满CPU

实例化$scope

//实例化scope
  var scope = new $scope()
  scope.first = 0


  //一个watch对应一个变量
  scope.$watch('first', function(scope){
     // 这样调用，那么 this 就指的是当前监听器watch，所以可以得到name
    return scope[this.name]
    // console.log('hey i have got newValue')
  },function(newValue, oldValue){
    scope.first++//$watch是实时观察的
    console.log('newValue:'+ newValue,'~~~~~~~~~', 'oldValue:' + oldValue)
  })

可以看到，视图触发点击事件，可以实现数据更新，数据更新可以重新显示在视图上，这就是Angular的双向绑定！

双向绑定效果

AngularJS 脏检查深入分析
脏检查