写在前面

  双向绑定是angular的大亮点,然后支撑它的就是脏检测。一直对脏检测都有一些理解,却没有比较系统的概念。

  以下是我阅读网上博文以及angular高级程序设计的理解与总结。

  接收指导与批评。

脏检查:

  将原对象赋值一份快照。在某个时间,遍历比较这个对象和快照(新旧值),如果不一样就执行执行某些操作。

angular中的脏检查:

  1.不会检查所有的对象。当对象被绑定到html会检查,手动$scope.$watch()的会检查。检查的手段就是为这些对象创建(watcher)对象。并push到(watcher队列) 2.不会检查所有的属性。只要被绑定的属性才会被注册。 在angular程序初始化时,会将绑定的对象的属性添加为监听对象(watcher),也就是说一个对象绑定了N个属性,就会添加N个watcher。

angular注册watcher对象

  angualr会为每一个绑定到DOM的对象/对象的属性,创建一个watcher对象,(使用$scope.$watch()方法也会创建),watcher对象有好几个属性,(下面是笔者理解抽象出来的,并不是真的属性名

watch = {
name:'', //当前的watch 对象 观测的数据名,锁定监听的是什么
getNewValue:function($scope){ //获取监听属性的最新值
...
return newValue;
},
listener:function(newValue,oldValue){ // 先比较新值与旧值判断是否继续执行,一般负责使用新值更新DOM页面,也可以是$watch方法注册的回调函数
...
}
}

  $$watchers的watcher属性截图

angular1.x 脏检测-LMLPHP

$scope.$$watchers队列

  每一个创建好的watcher对象会被push到各自的controller作用域的$scope.$$watchers队列里面。
  脏检测就是遍历watchers的过程。

脏检测通过两个方法触发:$digest(), $apply()
  $digest:是遍历当前作用域以及其子作用域的$$watchers队列,并执行其listener。
  $apply:是对$digest()的封装。接受一个函数参数(包含脱离angular环境的逻辑,需要却不会自己触发脏检测, 所以$apply帮他触发一下。),$apply在执行了参数函数之后自动调用 $rootScope.$digest (就是从更作用于开始遍历每一个$scope.$$watchers队列)

  如果你对自己的逻辑比较清楚,可以不使用$apply,改用$scope.$digest(),只遍历当前与其子作用域。不用从rootScope开始

  如果不是很了解逻辑,建议还是使用$apply()从rootScope开始,避免需要更新的值没有被更新,并且$apply会把参数函数放在try...catch里面,如果逻辑发生错误。会把错误传给$exceptionHandler service来处理。

$scope.data = ;
$scope.data2 = ;
// code 1
setInterval(function() {
$scope.$apply(function() {
$scope.data++;
console.log('first:', $scope.data)
});
}, ); // code 2
setInterval(function() {
$scope.data2++;
console.log('second:', $scope.data2)
$scope.$apply(); // 对比code1,少了try...catch
// $scope.$digest(); // 只遍历当前及其子作用域的$$watchers队列
},)

一次脏检测中$digest()执行的次数?

  在一个脏检测中,digest至少会执行两次

  因为某一个监听属性的listener可能会改变另一个监听属性的值。因此,angular需要在一次$digest()之后判断这一轮digest中时候有没有属性发生变化并执行了listener,如果有,angular必须再次调用$digest();当已经连续触发了10次$digest(),若还有属性发生变化,angular就会认为你的逻辑错了并console报告。因此在$scope.$watch时要自己多加注意理解好逻辑问题。

什么时候会触发脏检测?

  好像不少人有一个误区。angular是定时执行脏检测的!!!!(我之前还问过,angular设置多久执行一次脏检测,无言以对)

  angular并不是定时的。会触发脏检测的有以下:

    1. controller 初始化
    2. 几乎所有ng-开头的事件(ng-click,ng-change...)
    3. http请求
    4. $timeout,$interval
    5. 手动调用$apply(), $digest()

  回头想想,如果是定时的,怎么会有脱离angualr环境的说法呢?

05-01 05:43