mvc、mvvm アーキテクチャ

mvc、mvvmとは

建築パターンです
mvc、mvvm ロール

どれも「インターフェース」と「ビジネスロジック」を切り離すためのものですが、解決策は異なります。
MVC

MVC は、システムをコントローラー、ビュー、モデルに分割して、上記の問題を解決します。
コントローラー (コントローラー) - リクエストの転送と処理を担当します。
ビュー (View) - グラフィカルインターフェイス設計のためのインターフェイスデザイナー。
モデル（モデル） - プログラマーはプログラムが持つべき機能を書き（アルゴリズムの実装など）、データベースの専門家はデータ管理とデータベースの設計を行います（特定の機能を実現できます）。

/** 模拟 Model, View, Controller */
var M = {}, V = {}, C = {};
/** Model 负责存放数据 */
M.data = "hello world";
/** View 负责将资料展示出来 */
V.render = (M) => { alert(M.data); }
/** Controller 作为M和V的桥梁 */
C.handleOnload = () => { V.render(M); }
/** 在页面加载的时候调用
Controller*/window.onload = C.handleOnload;

このような分割により、システムの以下が改善されます。

拡張性
ビュー、モデル、コントローラーはそれぞれビュー、データ、制御を担当し、独立して進化できます。新しい機能を追加するとさらに便利になります。
保守性
明確な構造、複数のビューでモデルを再利用できるため、コードの重複が削減されます。
テスト容易性
各コンポーネントは単一の責任を持ち、モデルに対して自動テストを実行できます。
柔軟性
コントローラーを使用してさまざまなモデルとビューを接続し、ユーザーのニーズを満たすことができます
構成可能性
再利用可能なモデル、ビュー、コントローラーがあれば、ユーザーのニーズに応じて処理する適切なモデルを選択し、処理して結果をユーザーに表示する適切なビューを選択できます。

4. mvvm
MVVM パターンは、結合問題を解決するためにシステムをビュー、モデル、ビューモデル、およびバインダーに分割します。
モデル: モデルは、実際の状態のコンテンツを表すドメインモデル (オブジェクト指向) を指します。または、データアクセスを指します。コンテンツを表すレイヤー (データ中心)。これは、MVC のモデルが参照するものに似ています。
ビュー: MVC と同様に、ビューはユーザーが画面上で見る構造、レイアウト、外観 (UI) です。
ViewModel: ViewModel は、共通のプロパティとコマンドを公開する View の抽象化です。
バインダー: バインダーは MVVM パターンの暗黙的なコンポーネントです。ViewModel はデータと View の間のバインディング関係を宣言し、バインダーは宣言されたバインディング関係を処理します。

MVC パターンと同様に、同じシステムプロパティが昇格されますが、方法はいくつか異なります。

拡張性
ビュー、モデル、ビューモデル (およびバインダー) はそれぞれビュー、データ、データビューバインディングを担当し、独立して進化できます。
保守性
明確な構造、複数のビューでモデルを再利用できるため、コードの重複が削減されます。
テスト容易性
各コンポーネントは単一の責任を持ち、モデルに対して自動テストを実行できます。フォアグラウンドでは、ViewModel で自動テストを実行することもできます。
柔軟性
ViewModel を使用して、さまざまなモデルとビューをバインドしてユーザーのニーズを満たすことができます
構成可能性
いくつかの再利用可能なモデルとビューがあれば、ユーザーのニーズに応じて処理する適切なモデルを選択し、結果を処理してユーザーに表示するために適切なビューを選択できます。

6. MVC インスタンス SpringMVC

7. MVVMインスタンスVue

mvc、mvvm アーキテクチャ

mvc、mvvm アーキテクチャ

おすすめ