本文主要介绍AngularJS的脏检查策略及$digest
和$apply
作用。
检测变量值发生变化
Angular最耀眼的功能就是数据的双向绑定。那么如何检测变量值发生变化了呢?
检测一个变量值发生变化,主要有两种方式。
- 能通过固定的接口才能改变变量的值,比如说只能通过set()设置变量的值,set被调用时比较一下之前的值,就知道原值是否发生变化。缺点是写法繁琐。
脏检查。将原来对象复制一份快照,在某个时间点,比较现在对象与快照的值,如果不一样就表明发生变化,这个策略要保留两份变量,而且要遍历对象,比较每个属性,这样会有一定性能问题。
angular的实现是采用脏检查。
脏检查对象
- 不会检查
$scope
中所有的对象,当对象被绑定到html中,这个对象添加为检查对象($watcher
); - 不会检查所有属性,当属性被绑定后,这个属性会被列为检查属性。
- 在angular程序初始化时,会将绑定的对象的属性添加为监听对象(watcher),也就是说一个对象绑定了N个属性,就会添加N个watcher。
$scope.$watch('aModel',function(newValue,oldValue) {
//update the DOM with newValue
});
脏检查何时开始
angular中脏检查有两种方式:自动检查$digest()
,手动检查$apply()
。
自动检查:angular系统提供的方法(如:ng-xx事件)执行后,会自动调用
$digest()
检查$$watchers($watch列表)手动检查
$apply()
:如果使用angular系统提供的以外的方法,不会自动调用$digest()
,此时应该手动调用$apply()
。该函数可以从Angular框架的外部让表达式在Angular上下文内部执行。例如,假设你实现了一个setTimeout()或者使用第三方库并且想让事件运行在Angular上下文内部时,就必须使用$apply() 。
$scope.getMessage = function() {
setTimeout(function() {
$scope.message = 'Fetched after two seconds';
console.log('message:' + $scope.message);
$scope.$apply(); //this triggers a $digest
},2000);
};
$scope.$apply()
会调用$rootScope.$digest()
. 然后继续访问子scope的$digest
函数。
脏检查何时结束
Anguar遍历完整个$watch
列表,只要有任何值发生变化,应用将会退回到$watch
循环中,直到检测到不再有任何变化。
为什么要再次运行这一循环?因为如果你更新了$watch列表中某个用于更新另一个值的值,Angular将检测不到更新,除非再次运行这个循环。
如果这个循环运行10次或者更多次,Angular应用会抛出一个异常,同时停止运行。如果Angular没有抛出这个异常,应用就可能进入无限循环,这是糟糕的结果。
结论
在编程时应该明明,angular是否能够检测到变量的变化,如果不能就需要手动调用$apply()
。