シンプルなデータ応答システムを実装する

クラス Dep{
  コンストラクタ() {
    this._subs = [];
  }
  依存する（） {
    this._subs.push(依存関係ターゲット)
  }
  通知() {
    this._subs.forEach(item => {
      アイテム.fn();
    })
  }
}

// 実はこれが dep と watcher の愛の始まりです。// watcher ではグローバルプロパティを使用して watcher を保存します。
依存関係ターゲット = null;

関数pushTarget(watch) {
  依存関係ターゲット = ウォッチ;
}

関数popTarget() {
  依存関係ターゲット = null;
}

// アクセサプロパティに変換する function defineReactive (obj, key, val, shallow) {

  // 依存関係コレクション コンテナーを作成します。let dep = new Dep();
  childOb = !shallow && observe(val) とします。

  Object.defineProperty(obj, キー, {
    列挙可能: true、
    設定可能: true、
    取得: 関数reactiveGetter() {
      if(依存先) {
        // 依存関係を収集 dep.depend();
      }
      戻り値:
      // ...
    },
    設定: 関数 reactiveSetter (newVal) {
      newVal === val の場合、戻り値:
      // 再帰的に走査を続けます observe(newVal);
      //トリガー依存関係 dep.notify();
      // ...
    }
  })
}

クラスオブザーバー{
  コンストラクタ(データ) {
    this.walk(データ);
  }

  ウォーク(データ) {
    定数キー = Object.keys(データ)
    (i = 0 とします; i < keys.length; i++) {
      defineReactive(データ、キー[i]、データ[キー[i]])
    }
  }
}

// データオブジェクトのすべてのプロパティを再帰的にアクセサプロパティに変換する function observe (data) {
  if(Object.prototype.toString.call(data) !== '[object Object]') return;
  新しいオブザーバー(データ);
}

定数データ = {
  a: 1、
  2 倍
}

//まずオブジェクトを監視します observe(data);

クラスウォッチャー{
  /**
  * @params {Function} exp プロパティ式 * @params {Function} fn コールバック */
  コンストラクタ(exp, fn) {
    this.exp = exp;
    this.fn = fn;

    //ウォッチャーを保存
    // Dep.target = this;
    pushTarget(これを);

    // 最初に式関数を1回実行し、呼び出しプロセスで、
    // data.a のアクセサーをトリガーし、data.a の get が実行されます。
    // 依存関係の収集を開始するには dep.depend() をトリガーします this.exp();

    // リリース依存関係ターゲット
    ポップターゲット();
  }
}

// 新しいウォッチャー このような依存関係が収集されます new Watcher(() => {
  data.a + data.b を返します。
}, () => {
  コンソールログ('変更')
})

data.a = 3; // 変更
data.b = 3; // 変更