JavaScript——mvvm と mvc デザインパターンの違いは何ですか?

php是最好的语言

リリース： 2018-07-24 16:36:28

オリジナル

3208 人が閲覧しました

MVC では、View が Model に直接アクセスできる、MVVM と MVC デザインパターンについて簡単に説明します。したがって、ビューにはモデル情報と必然的にいくつかのビジネスロジックが含まれます。

1. MVVM と MVC の違いは何ですか?

MVC では、View が Model に直接アクセスできます。したがって、ビューにはモデル情報と必然的にいくつかのビジネスロジックが含まれます。 MVC モデルはモデルの不変性に重点を置いています。したがって、MVC モデルでは、モデルはビューに依存しませんが、ビューはモデルに依存します。それだけでなく、一部のビジネスロジックは View に実装されているため、View を変更することも困難です。少なくとも、MVC 内のすべての通信は一方向です。概念的には、MVVM はページロジックとデータロジックを完全に分離し、双方向のデータバインディングを実現できるパターンです。

2. VM とは何ですか?

' ' s ' to VM's ' to VM's ' to VM's ' to 's 's to ‐ ‐ to ‐ ‐‐‐‐ vm は View から抽象化されたデータモデルになります開発中、VM は書き込みを行わなくなることに注意してください。一部のメソッドなど、データに関連しないその他のもの。

3. MVVM とコードはどのように対応しますか?

MVVM は、モデル、ビュー、VM の 3 つの部分で構成されます。 Model はデータを取得して VM で利用できるように加工する論理的な部分に相当し、View はデータの表示やデータバインディングの部分に相当し、VM は抽象的なデータモデルオブジェクトです。

4. MVVM モデルを使用するフレームワークはどれですか?

AngularJS、avalon、emberjs、knockoutjs、winjs、react、riverts、way、vue、regulator、drop およびその他のフレームワーク

5 など、MVVM パターンを使用するフロントエンドフレームワークが多数あります。、MVVMの利用シナリオは？

それらの使用シナリオを理解するには、まず利点と欠点を理解する必要があります。

MVC の長所と短所:

長所:

1. 高度なモジュール性を備え、すべてのビジネスロジックをコントローラーに分離します。ビジネスロジックが変更された場合、ViewやModelを変更する必要はなく、Controllerを別のController(Swappable Controller)に変更するだけで済みます。

2. オブザーバーモードでは、複数のビューを同時に更新できます。

欠点:

1. コントローラーのテストが難しい。ビューの同期操作はビュー自体によって実行され、ビューは UI を備えた環境でのみ実行できるためです。 UI 環境を使用せずにコントローラーを単体テストする場合、コントローラーのビジネスロジックの正確性を検証できません。コントローラーがモデルを更新するときに、ビューの更新操作をアサートできません。

2. ビューはコンポーネント化できません。ビューは特定のモデルに強く依存します。このビューを別のアプリケーションの再利用可能なコンポーネントとして抽出する必要がある場合、それは困難になります。異なるプログラムのドメインモデルは異なるためです

MVP の長所と短所:

長所:

1. テストが簡単です。 Presenter は UI 環境に依存しない単体テストの場合、インターフェイスを介して View と通信します。 View インターフェイスを実装するだけで View オブジェクトをモックできます。その後、依存関係が Presenter に注入され、Presenter のビジネスロジックの正確性を単体テスト中に完全にテストできます。

2. ビューはコンポーネント化できます。 MVP では、View は Model に依存しません。これにより、View を特定のビジネスシナリオから切り離すことができ、View はビジネスロジックをまったく知らなくなると言えます。上位層の操作に必要なのは、一連のインターフェイスを提供することだけです。このようにして、再利用性の高い View コンポーネントを作成できます。

欠点:

1. ビジネスロジックに加えて、Presenter にはビュー -> モデルおよびモデル -> ビューのための大量の手動同期ロジックもあるため、Presenter が煩雑で保守が困難になります。

MVVM の長所と短所:

長所:

1. 保守性が向上します。これは、MVP における多数の手動によるビューとモデルの同期の問題を解決し、双方向のバインドメカニズムを提供します。コードの保守性が向上しました。

2. テストを簡素化します。同期ロジックは Binder によって処理されるため、ビューはモデルと同時に変更されるため、モデルが正しいことを確認するだけで、ビューは正しくなります。 View 同期更新のテストが大幅に削減されました。

短所: 1. シンプルすぎるグラフィカルインターフェイスは適していないか、過剰すぎます。

2. 大規模なグラフィックスアプリケーションの場合、多くのビューステートがあり、ViewModel の構築と維持のコストが比較的高くなります。

3. データバインディングの宣言は View テンプレートに命令的に記述されており、これらの内容を中断してデバッグすることはできません。

上記の長所と短所からわかるように、MVC -> MVP -> MVVM は、モンスターを倒し、アップグレードするプロセスに似ています。後者は前者が残した問題を解決し、前者の欠点を利点に最適化し、実際のプロジェクトに応じて最適なフレームワークを選択します。

6. Angular、avalon、Vue のどれを選択するか?

Angular には MV* のすべての部分が含まれており、独自のルールセットがあるため、PC に適していますが、avalon は軽量で、古いブラウザーに対する高度なサポートを備えています。 IE6 であるため、Lao Liu ブラウザと互換性のあるプロジェクトに適しています。Vue は主に軽量であり、MV のビュー部分としてのみ使用されます。軽量で、習得と使用が簡単であるという利点があります。大規模なプロジェクトでは他のプロジェクトと連携する必要があり、フレームワークやライブラリを使用するのはさらに面倒です。

7. 開発の原点。

MVVM（Model-View-ViewModel）框架的由来便是MVP（Model-View-Presenter）模式与WPF结合的应用方式时发展演变过来的一种新型架构框架。它立足于原有MVP框架并且把WPF的新特性糅合进去，以应对客户日益复杂的需求变化。

ログイン後にコピー

8. 双方向データバインディングを実装する方法。

現在、双方向データバインディングを実装するには 3 つの主な方法があります:

1. 手動バインディング

古い実装方法では、オブザーバープログラミングモードを使用します。主なアイデアは、データオブジェクトに get メソッドと set メソッドを定義することです。呼び出し時に get または set data を手動で呼び出し、データの変更後に UI レイヤーのレンダリング操作をトリガーします。ビューがデータ変更を駆動するシーンは、主に input、select、textarea などの要素に適用されます。 UI レイヤーが変更されると、 dom 、 keypress 、 keyup などのイベントの変更を監視して、データレイヤー内のデータを変更するイベントをトリガーします。プロセス全体は関数呼び出しによって完了します。

2. ダーティ検出メカニズム

代表的な mvvm フレームワーク angularjs に代表される、angular はダーティデータをチェックすることで UI 層の操作を更新します。 Angular のダーティ検出について知っておく必要があることがいくつかあります:

ダーティ検出メカニズムは、スケジュールされた検出を使用しません。
ダーティ検出のタイミングはデータが変化した時です。
Angular は、一般的に使用される DOM イベント、XHR イベントなどをカプセル化し、Angular に入るダイジェストプロセスをトリガーします。
ダイジェストプロセスでは、ルートスコープから横断してすべてのウォッチャーをチェックします。 (angular の具体的な設計については、他のドキュメントを参照してください。ここではデータバインディングについてのみ説明します) 次に、ダーティ検出を行う方法を見てみましょう。主にセットデータを通じて、データに関連するすべての要素を見つけて比較します。データが変化し、変化した場合にコマンド操作が実行されます。

3. フロントエンドデータハイジャック (ハイジャック)

基本的な考え方は、Object.defineProperty を使用して、データの読み取りと割り当ての操作がある場合のプロパティの取得と設定を監視することです。これは、一般的な = 等号の割り当てで十分です。

9. MVC-MVVM 変換。

ソフトウェアの中核はデータです。ビジネスロジックはデータの生成、変更、その他の変更に関連して発生します。データの表示に関しては、さまざまなインターフェイス技術が登場しています。コードが適切に設計されていないと、データ層 (永続層)、ビジネスロジック層、インターフェイスコードの間に結合が生じることがよくあります。

mvc はビューとモデルの完全な分離を実現していませんが、mvvm は実現しているため、これにより mvc から mvvm への移行が促進されます。