angular双向数据绑定原理

• 从UI到数据：UI事件，ajax请求，timeout等。
• 从数据到UI：脏检查

脏检查

1. 添加监听器$watcher

为scope中渲染在页面中的每个数据添加监听器$watcher，当添加$watcher的数据发生变化时，调用所有watcher对应的listener，执行数据变化后的操作。

function $scope() {this.$$watchList = [];
}$scope.prototype.$watch = function (name, getNewValue, listener) {var watch = {name: name,//scope中的数据名称getNewValue: getNewValue,//数据的当前值listener: listener || function () {} //数据变化时执行的操作};this.$$watchList.push(watch);
};

2. 数据改变时调用所有watcher中的listener

在$digest里面调用所有watcher。

$scope.prototype.$digest = function () {var list = this.$$watchList;for (var i = 0, l = list.length; i < l; i++) {var watch = list[i];var newValue = watch.getNewValue();var oldValue = watch.last;//第一次执行时oldValue为undefinedif (newValue != oldValue) {watch.listener(newValue, oldValue);}watch.last = newValue;}
};

此时当newValue != oldValue时便执行$watcher对应的listener.
测试：

var scope = new $scope();
scope.hello = 5;
scope.$watch('hello',function () {return scope.hello;},function (newValue, oldValue) {console.log('newValue: ' + newValue + ';oldValue:' + oldValue);});
scope.$digest();
scope.hello = 10;
scope.$digest();
scope.hello = 20;
scope.$digest();
scope.hello = 20;
scope.$digest();
scope.hello = 26;
scope.$digest();newValue: 5;oldValue:undefined
newValue: 10;oldValue:5
newValue: 20;oldValue:10
newValue: 26;oldValue:20

3. 持续监听

然而当在另一个watcher中改变其他watcher中的值时，上面的digest不能监听到变化：

var scope = new $scope();
scope.hello = 5;
scope.hello2 = 15;
scope.$watch('hello',function () {return scope.hello;},function (newValue, oldValue) {console.log('newValue: ' + newValue + ';oldValue:' + oldValue);
});
scope.$watch('hello2',function () {return scope.hello2;},function (newValue, oldValue) {scope.hello = 10;//这里的改变并未检测到console.log('newValue: ' + newValue + ';oldValue:' + oldValue);
});
scope.$digest();newValue: 5;oldValue:undefined
newValue: 15;oldValue:undefined

因此，在scope中值发生变化时需要持续进行digest，在digest中设置所有数据是否为脏的标志dirty，即每次执行digest，若有数据发生变化，就将dirty置为true，若dirty为true继续执行digest。

$scope.prototype.$$digestOnce = function () {var dirty;var list = this.$$watchList;for (var i = 0, l = list.length; i < l; i++) {var watch = list[i];var newValue = watch.getNewValue();var oldValue = watch.last;if (newValue !== oldValue) {watch.listener(newValue, oldValue);// 因为listener操作，已经检查过的数据可能变脏dirty = true;}watch.last = newValue;}return dirty;
};
$scope.prototype.$digest = function () {var dirty = true;while (dirty) {dirty = this.$$digestOnce();}
};
var scope = new $scope();
scope.hello1 = 5;
scope.hello2 = 10;
scope.$watch('hello1',function () {return scope.hello1;},function (newValue, oldValue) {console.log('newValue:' + newValue + '~~~~' + 'oldValue:' + oldValue);});
scope.$watch('hello2',function () {return scope.hello2;},function (newValue, oldValue) {scope.hello1 = 20;//这里的值被监听到console.log('newValue:' + newValue + '~~~~' + 'oldValue:' + oldValue);});
scope.$digest();newValue:5~~~~oldValue:undefined
newValue:10~~~~oldValue:undefined
newValue:20~~~~oldValue:5

4. 防止持续运行digest陷入死循环

然而当在watcher中互相改变对方的值，则会无限次digest，此时陷入死循环，因此在，digest中设置最多执行次数：

$scope.prototype.$digest = function() {var dirty = true;var checkTimes = 0;var maxTime = 10;while(dirty) {dirty = this.$$digestOnce();checkTimes++;if(checkTimes > maxTime && dirty){console.log("数据持续脏");throw new Error("检测超过10次");}}
};