深入理解AngularJs－scope的脏检查（一）

function Scope() {
  this.$$watchers = []; // 监听器数组
  this.$$lastDirtyWatch = null; // 每次digest循环的最后一个脏的watcher, 用于优化digest循环
  this.$$asyncQueue = []; // scope上的异步队列
  this.$$applyAsyncQueue = []; // scope上的异步apply队列
  this.$$applyAsyncId = null; //异步apply信息
  this.$$postDigestQueue = []; // postDigest执行队列
  this.$$phase = null; // 储存scope上正在做什么,值有：digest/apply/null
  this.$root = this; // rootScope

  this.$$listeners = {}; // 存储包含自定义事件键值对的对象

  this.$$children = []; // 存储当前scope的儿子Scope,以便$digest循环递归
}

/* $watch方法：向watchers数组中添加watcher对象，以便对应调用 */
Scope.prototype.$watch = function(watchFn, listenerFn, valueEq) {
  var self = this;

  watchFn = $parse(watchFn);

  // watchDelegate: 针对watch expression是常量和 one-time-binding的情况，进行优化。在第一次初始化之后删除watch
  if(watchFn.$$watchDelegate) {
    return watchFn.$$watchDelegate(self, listenerFn, valueEq, watchFn);
  }
  var watcher = {
    watchFn: watchFn,
    listenerFn: listenerFn || function() {},
    valueEq: !!valueEq,
    last: initWatchVal
  };

  this.$$watchers.unshift(watcher);
  this.$root.$$lastDirtyWatch = null;

  return function() {
    var index = self.$$watchers.indexOf(watcher);
    if(index >= 0) {
      self.$$watchers.splice(index, 1);
      self.$root.$$lastDirtyWatch = null;
    }
  };
};

Scope.prototype.$$digestOnce = function() {
      var dirty;
      var continueLoop = true;
      var self = this;

      this.$$everyScope(function(scope) {
        var newValue, oldValue;

        _.forEachRight(scope.$$watchers, function(watcher) {
          try {
            if(watcher) {
              newValue = watcher.watchFn(scope);
              oldValue = watcher.last;

              if(!scope.$$areEqual(newValue, oldValue, watcher.valueEq)) {
                scope.$root.$$lastDirtyWatch = watcher;

                watcher.last = (watcher.valueEq "htmlcode">

// digest循环的外循环，保持循环直到没有脏值为止
    Scope.prototype.$digest = function() {
      var ttl = TTL;
      var dirty;
      this.$root.$$lastDirtyWatch = null;

      this.$beginPhase('$digest');

      if(this.$root.$$applyAsyncId) {
        clearTimeout(this.$root.$$applyAsyncId);
        this.$$flushApplyAsync();
      }

      do {
        while (this.$$asyncQueue.length) {
          try {
            var asyncTask = this.$$asyncQueue.shift();
            asyncTask.scope.$eval(asyncTask.expression);
          } catch(e) {
            console.error(e);
          }
        }

        dirty = this.$$digestOnce();

        if((dirty || this.$$asyncQueue.length) && !(ttl--)) {
          this.$clearPhase();
          throw TTL + ' digest iterations reached';
        }
      } while (dirty || this.$$asyncQueue.length);
      this.$clearPhase();

      while(this.$$postDigestQueue.length) {
        try {
          this.$$postDigestQueue.shift()();
        } catch(e) {
          console.error(e);
        }
      }
    };




在这一节中我们的主要关注点是脏检测，异步任务相关的$$applyAsync，$$flushApplyAsync，$$asyncQueue，$$postDigestQueue之后再做分析。
示例代码第24行，调用$$digestOnce，并把返回值赋值给dirty。在do while循环中，只要dirty为true，那么循环就会一直执行下去，直到dirty的值为 false。这就是脏检测机制的外层循环的实现，是不是觉得其实很简单呢，嘿嘿。
设想一下，某些值可能会在listenerFn中持续被改变并且，无法稳定下来，那势必会出现死循环。为了解决这个问题，AngularJs使用 TTL(time to live)来对循环次数进行控制，超过最大次数，就会throw错误 并 告诉开发者循环可能永远不会稳定。
现在我们把注意力移到代码第26行的 if 代码块上，不难看出，这里是对最大$digest循环次数进行了限制，每执行一次do while循环的循环体，TTL就会自减1。当TTL值为0，再进行循环就会报错。当然咯，这个TTL的值也是能够进行配置的。
现在，相信小伙伴们对$digest循环已经比较清楚了吧～简单来说，dirty-checking就是依赖缓存在scope上的$$watchers和$digest循环来对值进行监听的。有了$digest，当然还需要有手段去触发它咯。
接下来，我们将进入第二部分：触发$digest循环 和 异步任务处理　
$eval
说到触发$digest循环，大部分同学都会想到$apply。要说$apply就需要先说说$eval。
$eval使我们能够在scope的context中执行一段表达式，并允许传入locals object对当前scope context进行修改。
tip：$parse服务能够接受一个表达式或者函数作为参数，经过处理返回一个函数供开发者调用。这个函数有两个参数context object(通常就是scope)，locals object(本地对象，常用来覆盖context中的属性)。


 Scope.prototype.$eval = function(expr, locals) {
   return $parse(expr)(this, locals);
 };


$apply
$apply 方法接收一个expression或者function作为参数，$apply通过$eval函数执行传入的expression 或 function。最终从$rootScope上触发$digest循环。
$apply 被认为是 使AngularJs与第三方库混合使用最标准的方式。初学者朋友刚开始都会遇到用第三方库修改了scope上的属性或者被watch的属性，但并没有触发$digest循环，导致双向绑定失效的问题。此时，$apply就是解决这种情况的良药！




Scope.prototype.$apply = function(expr) {
  try {
    this.$beginPhase('$apply');
    return this.$eval(expr);
  } finally {
    this.$clearPhase();
    this.$root.$digest();
  }
};


$apply本质上，就是用$eval执行了一段表达式，再调用rootScope的$digest方法。
有时候，当我们能够确定我们不需要从rootScope开始进行$digest循环时，我可以调用scope.digest() 来代替 $apply，这样能够带来性能的提升。
 $evalAsync
$evalAsync 用于延迟执行一段表达式。通常我们更习惯使用$timeout服务来进行代码的延迟执行，但$timeout会将执行控制权交给浏览器，如果浏览器同时还需要执行诸如 ui渲染／事件控制／ajax 等任务时，我们代码延迟执行的时机就会变得非常不可控。
我们来看看$evalAsync是如何让代码延迟执行的时机变得严格，可控的。


Scope.prototype.$evalAsync = function(expr) {
  var self = this;
  if(!self.$$phase && !self.$$asyncQueue.length) {
    setTimeout(function() {
      if(self.$$asyncQueue.length) {
        self.$root.$digest();
      }
    }, 0);
  }

  this.$$asyncQueue.push({
    scope: this,
    expression: expr
  });
};




$evalAsync方法的主要功能是从代码第11行开始，向$$asyncQueeu中添加对象。$$asyncQueue队列的执行是在$digest的do while循环中进行的。


while (this.$$asyncQueue.length) {
  try {
    var asyncTask = this.$$asyncQueue.shift();
    asyncTask.scope.$eval(asyncTask.expression);
  } catch(e) {
    console.error(e);
  }
}


$evalAsync的代码会在正在运行的$digest循环中被执行，如果当前没有正在运行的$digest循环，会自己延迟触发一个$digest循环来执行延迟代码。
 $applyAsync
$applyAsync用于合并短时间内多次$digest循环，优化应用性能。
在日常开发工作中，常常会遇到要短时间内接收若干http响应，同时触发多次$digest循环的情况。使用$applyAsync可合并若干次$digest，优化性能。




/* 这个方法用于 知道需要在短时间内多次使用$apply的情况，
  能够对短时间内多次$digest循环进行合并，
  是针对$digest循环的优化策略
  */
Scope.prototype.$applyAsync = function(expr) {
  var self = this;
  self.$$applyAsyncQueue.push(function() {
    self.$eval(expr);
  });

  if(self.$root.$$applyAsyncId === null) {
    self.$root.$$applyAsyncId = setTimeout(function() {
      self.$apply(_.bind(self.$$flushApplyAsync, self));
    }, 0);
  }
};




$$postDigest
$$postDigest方法提供了在下一次digest循环后执行代码的方式，这个方法的前缀是"$$"，是一个AngularJs内部方法，应用开发极少用到。
此方法不自主触发$digest循环，而是在别处产生$digest循环之后执行。




/* $$postDigest 用于在下一次digest循环后执行函数队列 
   不同于applyAsync 和 evalAsync, 它不触发digest循环
   */
 Scope.prototype.$$postDigest = function(fn) {
   this.$$postDigestQueue.push(fn);
 };



到这里，我们对脏检测的原理，即它的工作机制就了解的差不多了。希望这些知识能够帮助你更好的应用AngularJs来开发，能够更轻松地定位错误。
下一章，我会继续为大家介绍文章开头提到的另外两处scope相关的特性。篇幅较长，感谢您的耐心阅读～也希望大家多多支持。