HTMLおよびJSでの動的データバインディング

すべての良い一日。

次のいずれかの質問をしている場合:



それから猫の下で......

はい...最後に、いつものように、コードへのリンク;)



MVPについて:

MVP(Model-View-Presenter)は、最も一般的なUIデザインパターンの1つです。



その本質は次のとおりです。



MVPとMVCの主な違いはすぐにわかります。MVCは、MVCとは異なり、Viewとの双方向通信を行います。

覚えて、先に進んでください...



MVVMについて:

MVVM(Model-View-ViewModel)はMVPの改良された形式であり、それらの間の線は非常に細いため、時々「ああ、空! なぜ私にこれをしているのですか?」



次に、私が意味することを説明します。



MVVMの本質は次のとおりです。









手続きを破棄すれば、破棄されます。 したがって、MVPとMVVMの間の線は非常に細いと言いました。



グローバルに、唯一の違いは、MVVMがViewからのより柔軟なイベントリスナーを実装することです。

さらに、いわゆる宣言型の動的データバインディングが使用可能になるように実装します。



動的データバインディングについて:

これは、どちらかの側(ビューまたはモデル)でモデルの値を変更すると、この変更がすぐに有効になるようなメカニズムです。 つまり、Modelの値を変更すると(MVVM-ViewModelはモデルの機能を部分的に想定します)、Viewにすぐに表示され、その逆も同様です。



「MVPがViewとPresenterの間に双方向接続を持っている場合、なぜMVPに動的データバインディングを実装できないのですか?」



答えは非常に簡単です-できます!

実際、MVPはすでにある程度の動的データバインディングを暗示しています。

また、MVPがデータバインディングに対する純粋に必須のアプローチである場合、MVVMは宣言型です。



それが全体の違いです。

しかし、彼らの本質はまったく同じです!



実装について:

次に、動的データバインディングの実装に関連する問題を検討します。

そもそも、ブラウザは変数の値の変化を動的に追跡できません。

もちろん、Object.observe()のようなものもありますが、これまでのところ、このことは標準の一部ではありません。

したがって、我々はという事実から進みます
ブラウザは変数の値の変化を動的に追跡できません


したがって、どういうわけか理解する必要があります:モデルとビューの間で同期する必要があるとき。

AngularやKnockoutなどの最新のフレームワークでは、この質問に非常に単純にアプローチしています。リスナーは、動的データバインディングを必要とする要素からのさまざまなイベントでハングアップします。

たとえば、テキスト入力の場合、リスナーはkeyupイベントでハングします。

ボタンの場合-クリック





ハンドラー内で、新しいデータが読み取られ、モデルと同期するメカニズムが開始されます。



実際、それは全体の話です。



ちなみに、Angularを使用する場合は、ほとんどの場合、$タイムアウトサービスなどの使用に頼らざるを得ません。

スタックオーバーフローのどこかに書き込まれているために自動化で$ timeoutを使用しますが、その本質を理解していない場合、$ timeoutは現在の$ダイジェストサイクルが完了するのを待ってから、渡されたコードを実行します。その後、$ダイジェストループを再び開始します。 これは、Angular内部から開始されなかった場合のデータ更新の方法です。



$ダイジェストサイクルとは何ですか?

AngularJSでは、これはまさにモデルとビューの間で値を同期するプロセスです。



そして、約束されたように、最も簡単な動的データバインディングを実装するGistへリンク



いくつかの言葉で:





ご清聴ありがとうございました。



All Articles