angular1.x 脏检测

2017-01-08 18:47:15来源:cnblogs.com作者:miaowwwww人点击

写在前面

  双向绑定是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属性截图

 

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

 

 

一次脏检测中$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环境的说法呢?

 

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台