AngularJS双向绑定之脏检查机制 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 = https://www.it610.com/article/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

{{user}} {{password}}

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

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

$scope.prototype.$digest = function(){ //获取watch对象的数组 var list = this.$$watchList // 默认为dirty var dirty = true //寻循环计数器 var checkTimes = 0while(dirty){ dirty = false checkTimes++ for(var i = 0; i < list.length; i++){ //发挥监听者的作用 var watch = list[i] console.log(watch) // $digest 第一次调用，last 为undefined,所以一定会进行一次数据呈现. var oldValue = https://www.it610.com/article/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的双向绑定！