データの双方向バインディングを実現するには、まずデータをハイジャックしてリッスンする必要があるため、すべての属性をリッスンするリスナーオブザーバをセットアップする必要があります。属性が変更された場合、サブスクライバのWatcherに更新が必要かどうかを伝える必要があります。
多くのサブスクライバが存在するため、これらのサブスクライバを収集し、リスナオブザーバとサブスクライバウォッチャの間で統一された方法で管理するために、メッセージサブスクライバ Dep が必要です。次に、コマンドパーサ Compile が必要で、各ノード要素をスキャンして解析し、関連するコマンドをサブスクライバ Watcher に初期化し、テンプレートデータを置き換えるか、対応する関数をバインドします。
そこで、データの双方向バインディングを実現するために、次の3つのステップを実行します:
1.リスナーObserverを実装し、すべてのアトリビュートをハイジャックしてリッスンし、変更があればサブスクライバーに通知します。
2.サブスクライバーSuberを実装することで、属性の変更の通知を受信し、ビューを更新するために適切な関数を実行することができます。
3.各ノードの関連する命令をスキャンして解析し、テンプレートデータを初期化し、それに応じて適切なサブスクライバーを初期化するパーサーCompileを実装します。
Observer は、Object.defineProperty( ) をコア実装メソッドとするデータリスナーです。すべてのプロパティをリスニングしたい場合は、すべてのプロパティ値を再帰的に繰り返し、Object.defineProperty( )を適用します。以下のコードでは、Observer を実装しています。
サブスクライバSuberは、初期化のために対応するget関数を実行します。初期化の間に、サブスクライバキューSubQueueに自分自身を追加する必要があり、元の値が変更されると、対応する更新関数を実行します。
すべての購読者を収集し、変更が発生したときに購読者に通知します。
テンプレート・ディレクティブを解析し、ビューを初期化するためにテンプレート・データを置換します。テンプレート・ディレクティブに対応するノードを対応する更新関数にバインドし、対応するサブスクライバを初期化します。