摘要：前綴表示私有變量上述代碼實現的并不實用，因為實際上我們需要的是監(jiān)聽的對象數據發(fā)生改變時才執(zhí)行相應的方法。我們使用來約束遍歷的最大次數，在中默認次數為。

$watch 和 $digest 是數據綁定中的核心概念：我們可以使用 $watch 在 scope 中綁定 watcher 用于監(jiān)聽 scope 中發(fā)生的變化，而 $digest 方法的執(zhí)行即是遍歷 scope 上綁定的所有 watcher，并執(zhí)行相應的 watch（指定想要監(jiān)控的對象） 和 listener（當數據改變時觸發(fā)的回調） 方法。

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 并不實用，因為實際上我們需要的是：監(jiān)聽的對象數據發(fā)生改變時才執(zhí)行相應的 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 不會觸發(fā) 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 時往往會發(fā)生如下情況，即某個 watcher 執(zhí)行 listener 方法會引起其他 watcher 監(jiān)聽的對象數據發(fā)生改變，因此我們需要循環(huán)進行臟檢查來使變化“徹底”完成。

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);
}

上述代碼只要在遍歷中發(fā)現臟值，就會多循環(huán)一輪直到沒有發(fā)現臟值為止，我們考慮這樣的情況：即是兩個 watcher 之間互相影響彼此，則會導致無限循環(huán)的問題。

我們使用 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 變量來對這部分代碼的性能進行優(yōu)化。

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;
}

目前為止我們實現的臟檢查，僅能監(jiān)聽到值的變化（淺臟檢查），無法判斷引用內部數據發(fā)生的變化（深臟檢查）。

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 不等于其自身，所以在判斷 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));
    }
}