Angular 学习笔记：$digest 实现原理

$watch 和 $digest

$watch 和 $digest 是数据绑定中的核心概念：我们可以使用 $watch 在 scope 中绑定 watcher 用于监听 scope 中发生的变化，而 $digest 方法的执行即是遍历 scope 上绑定的所有 watcher，并执行相应的 watch（指定想要监控的对象） 和 listener（当数据改变时触发的回调） 方法。

function Scope {
    this.$$watchers = []; // $$ 前缀表示私有变量
}

Scope.prototye.$watch = function(watchFn, listenerFn) {
    let watcher = {
        watchFn: watchFn,
        listenerFn: listenerFn,
    };

    this.$$watchers.push(watcher);
}

Scope.prototype.$digest = function() {
    this.watchers.forEach((watcher) => {
        watcher.listenerFn();
    });
}

上述代码实现的 $digest 并不实用，因为实际上我们需要的是：监听的对象数据发生改变时才执行相应的 listener 方法。

脏检查

Scope.prototype.$digest = function() {
    let self = this;
    let newValue, oldValue;
    this.watchers.forEach((watcher) => {
        newValue = watcher.watchFn(self);
        oldValue = watcher.last;
        if (newValue !== oldValue) {
            watch.last = newValue;
            watcher.listenerFn(newValue, oldValue, self);
        }
    });
}

上述代码在大部分情况下可以正常运行，但是当我们首次遍历 watcher 对象时其 last 变量值为 undefined，这样会导致如果 watcher 的第一个有效值同为 undefined 不会触发 listener 方法。

console.log(undefined === undefined) // true

我们使用 initWatchVal 方法解决这个问题.

function initWatchVal() {
  // TODO
}

Scope.prototye.$watch = function(watchFn, listenerFn) {
  let watcher = {
      watchFn: watchFn,
      listenerFn: listenerFn || function() {},
      last: initWatchVal
  };

  this.$$watchers.push(watcher);
}

Scope.prototype.$digest = function() {
  let self = this;
  let newValue, oldValue;
  this.watchers.forEach((watcher) => {
      newValue = watcher.watchFn(self);
      oldValue = watcher.last;
      if (newValue !== oldValue) {
          watch.last = newValue;
          watcher.listenerFn(newValue, oldValue === initWatchVal ? newValue : oldValue, self);
      }
  });
}

循环进行脏检查

在进行 digest 时往往会发生如下情况，即某个 watcher 执行 listener 方法会引起其他 watcher 监听的对象数据发生改变，因此我们需要循环进行脏检查来使变化“彻底”完成。

Scope.prototype.$$digestOnce = function() {
    let self = this;
    let newValue, oldValue, dirty;
    this.watchers.forEach((watcher) => {
        newValue = watcher.watchFn(self);
        oldValue = watcher.last;
        if (newValue !== oldValue) {
            dirty = true;
            watch.last = newValue;
            watcher.listenerFn(newValue, oldValue === initWatchVal ? newValue : oldValue, self);
        }
    });
    
    return dirty;
}

Scope.prototype.$digest = function() {
    let dirty;
    do { dirty = this.$$digestOnce(); }
    while (dirty);
}

上述代码只要在遍历中发现脏值，就会多循环一轮直到没有发现脏值为止，我们考虑这样的情况：即是两个 watcher 之间互相影响彼此，则会导致无限循环的问题。

我们使用 TTL（Time to Live）来约束遍历的最大次数，在 Angular 中默认次数为10。

Scope.prototype.$digest = function() {
    let dirty;
    let ttl = 10;
    do {
        dirty = this.$$digestOnce();
        if (dirty && !(ttl--)) {
            throw '10 digest iterations reached.';
        }
    } while (dirty)
}

同时，在每次 digest 的最后一轮遍历没有必要对全部 watcher 进行检查，我们通过使用 $$lastDirtyWatch 变量来对这部分代码的性能进行优化。

function Scope {
    this.$$watchers = [];
    this.$$lastDirtyWatch = null;
}

Scope.prototype.$digest = function() {
    let dirty;
    let ttl = 10;

    this.$$lastDirtyWatch = null;

    do {
        dirty = this.$$digestOnce();
        if (dirty && !(ttl--)) {
            throw '10 digest iterations reached.';
        }
    } while (dirty)
}

Scope.prototype.$$digestOnce = function() {
    let self = this;
    let newValue, oldValue, dirty;
    this.watchers.forEach((watcher) => {
        newValue = watcher.watchFn(self);
        oldValue = watcher.last;
        if (newValue !== oldValue) {
            self.$$lastDirtyWatch = watcher;
            dirty = true;
            watch.last = newValue;
            watcher.listenerFn(newValue, oldValue === initWatchVal ? newValue : oldValue, self);
        } else if (self.$$lastDirtyWatch === watcher) {
            return false;
        }
    });

    return dirty;
}

同时为了避免 $watch 嵌套使用带来的不良影响，我们需要在每次添加 watcher 时重置 $$lastDirtyWatch：

Scope.prototye.$watch = function(watchFn, listenerFn) {
    let watcher = {
        watchFn: watchFn,
        listenerFn: listenerFn || function() {},
        last: initWatchVal
    };

    this.$$watchers.push(watcher);
    this.$$lastDirtyWatch = null;
}

深浅脏检查

目前为止我们实现的脏检查，仅能监听到值的变化（浅脏检查），无法判断引用内部数据发生的变化（深脏检查）。

Scope.prototye.$watch = function(watchFn, listenerFn, valueEq) {
    let watcher = {
        watchFn: watchFn,
        listenerFn: listenerFn || function() {},
        valueEq: !!valueEq,
        last: initWatchVal
    };

    this.$$watchers.push(watcher);
    this.$$lastDirtyWatch = null;
}

Scope.prototype.$$areEqual = function(newValue, oldValue, valueEq) {
  if (valueEq) {
      return _.isEqual(newValue, oldValue);
  } else {
      return newValue === oldValue;
  }
}

Scope.prototype.$$digestOnce = function() {
  let self = this;
  let newValue, oldValue, dirty;
  this.watchers.forEach((watcher) => {
      newValue = watcher.watchFn(self);
      oldValue = watcher.last;
      if (!self.$$areEqual(newValue, oldValue, watcher.valueEq)) {
          self.$$lastDirtyWatch = watcher;
          dirty = true;
          watch.last = watcher.valueEq ? _.cloneDeep(newValue) : newValue;
          watcher.listenerFn(newValue, oldValue === initWatchVal ? newValue : oldValue, self);
      } else if (self.$$lastDirtyWatch === watcher) {
          return false;
      }
  });

  return dirty;
}

NaN 的兼容考虑

需要注意的是，NaN 不等于其自身，所以在判断 newValue 与 oldValue 是否相等时，需要特别考虑。

Scope.prototype.$$areEqual = function(newValue, oldValue, valueEq) {
    if (valueEq) {
        return _.isEqual(newValue, oldValue);
    } else {
        return newValue === oldValue ||
            (typeof newValue === 'number' && typeof oldValue === 'number' && isNaN(newValue) && isNaN(oldValue));
    }
}