MVC、MVP、MVVMの設計パターンのコーディングの違いは何ですか?


202

「MVC、MVP、MVVMの設計パターンの違いは何ですか」というフレーズを使用してGoogleを検索すると、理論的にはMVC MVPとMVVMの設計パターンの違いを説明するいくつかのURLが得られることがあります。

MVP

データコンテキストを介したバインドが不可能な状況で使用します。Windowsフォームはこれの完璧な例です。ビューをモデルから分離するには、プレゼンターが必要です。ビューはプレゼンターに直接バインドできないため、インターフェイス(IView)を介してビューに情報を渡す必要があります。

MVVM

データコンテキストによるバインドが可能な状況で使用します。どうして?各ビューのさまざまなIViewインターフェイスが削除され、維持するコードが少なくなります。MVVMが可能な例には、Knockoutを使用したWPFおよびJavaScriptプロジェクトが含まれます。

MVC

ビューとプログラムの残りの部分との間の接続が常に利用できるとは限らない(そして、MVVMまたはMVPを効果的に使用できない)状況で使用します。これは、Web APIがクライアントのブラウザーに送信されるデータから分離されている状況を明確に説明しています。MicrosoftのASP.NET MVCは、このような状況を管理するための優れたツールであり、非常に明確なMVCフレームワークを提供します


しかし、理論的にはサンプルコードと共にその違いを説明する記事は1つもありません。

これらの3つのデザインパターン(MVC、MVP、MVVM)の違いについてコードと一緒に説明する記事を入手できたら、本当に嬉しいです。

これら3つのデザインパターン(MVC、MVP、MVVM)によって実装された3つの類似したCRUDアプリのソースコードを手に入れたいのですが。コードを確認して、これら3つの設計パターン(MVC、MVP、MVVM)のコードをどのように記述するかを理解できるようにします。

したがって、これらの3つの設計パターン(MVC、MVP、MVVM)でコードがどのように異なるかを説明する記事が存在する場合は、その記事にリダイレクトしてください。


14
TechEd 2011では、これら3つのパターンについての優れたシンプルなプレゼンテーションがありました。スピーカーは、C#とVisual Studioを使用して、同じビジネスモデルでサンプルを作成して示しました。これがchannel9 MVC、MVP、MVVM
マルコメ

2
これが記事です:realm.io/news/eric-maxwell-mvc-mvp-and-mvvm-on-android。非常によく書かれ、明確なIMO。また、各パターンのブランチを持つGithubリポジトリもあります。
cuddlecheek

これは興味深いものでした:cirw​​.in/blog/time-to-move-on
Andrew

回答:


100

簡単に言えば、いくつかの基本的な違いがあります。

MVC:

従来のMVCは、

  1. モデル:データのモデルとして機能
  2. ビュー:UIになることができるユーザーへのビューを扱います
  3. コントローラー:モデルとビューの間の相互作用を制御します。ビューはコントローラーを呼び出してモデルを更新します。ビューは必要に応じて複数のコントローラーを呼び出すことができます。

MVP:

従来のMVCに似ていますが、コントローラーはプレゼンターに置き換えられています。ただし、プレゼンターは、コントローラーとは異なり、ビューの変更も行います。通常、ビューはプレゼンターを呼び出しません。

MVVM

ここでの違いは、ビューモデルの存在です。これは、オブザーバーデザインパターンの実装の一種であり、モデルの変更もビューでVMによって表されます。例:スライダーを変更すると、モデルが更新されるだけでなく、ビューに表示されるテキストの可能性があるデータも更新されます。したがって、双方向のデータバインディングがあります。


1
細部-双方向データバインディングか、一方向バインディングを定義するかを選択できます。
Jviaches、2016年

10
「通常、ビューはプレゼンターを呼び出しません」?この文章について詳しく説明してもらえますか?uiビューがプレゼンターに電話をかけない場合は、
Amir Ziarati、2016

3
@AmirZiaratiプレゼンターはイベントを監視します。イベントの場合、プレゼンターが出場し、必要なアクションを実行します。
Pritam Banerjee

ビューへの参照がある限り、はい。ビューが最初はプレゼンターを呼び出す必要さえなく、少なくとも1回は呼び出す必要があることを意味していると私は考えました。ありがとう;)
Amir Ziarati

1
@PritamBanerjee、説明から、MVPとMVVMはほぼ同じ機能を持っています。P又はVMの更新の両方M&V.
ManoharさんレディPoreddy

42

MVC、MVP、MVVM

MVC(古いもの)

MVP(カップリングが低いためよりモジュール化されています。プレゼンターはビューとモデルの間のメディエーターです)

MVVM(すでにVMとUIコンポーネント間の双方向バインディングがあるため、MVPよりも自動化されています) ここに画像の説明を入力してください

別の画像: ここに画像の説明を入力してください


24
画像をコピーしないでください。特に、画像が相互に同意しない場合に使用してください。MVC(見えない古いもの)ブラウザーが上の画像で表示するように話しますが、下の画像でコントローラーに話しますを参照してください。
peter.fr 2017年

1
@UddhavGautam最初の画像はビューをエントリポイントとして表示し、2番目の画像はコントローラーを表示するため、少し混乱します。
everlasto 2017

1
最初の図で、MVVMとMVPの違いは何ですか?私が見ると、それはVとVM / Pの間のリンクにすぎません。どちらの場合も双方向メッセージとして前後のメッセージがあり、もう1つの場合は2つの単方向リンクとして表されます。それらの間に機能的な違いはありません。何が欠けていますか?
iCyber​​Paul 2018年

1
ブラウザーとは、ユーザーとアプリケーションの間で相互作用が発生するユーザーを意味します。
Uddhav Gautam

4
ひねりをプロット:何が起こっているのか実際に誰も知りません。それらはすべて実際にはまったく同じものです。はは。いいえ、実際には、これらの「役立つ」画像を使用しても、何が起こっているのかを処理するのは困難です。それは問題/混乱の一部だと思います。
アンドリュー

34

リンクからの素晴らしい説明:http : //geekswithblogs.net/dlussier/archive/2009/11/21/136454.aspx

まずMVCを見てみましょう

入力は、ビューではなく、最初にコントローラーに向けられます。その入力は、ページを操作しているユーザーからのものである可能性がありますが、特定のURLをブラウザに入力しただけの場合もあります。どちらの場合も、一部の機能を開始するためにインターフェースされるコントローラーです。

コントローラとビューの間には多対1の関係があります。これは、単一のコントローラーが、実行中の操作に基づいてレンダリングされる異なるビューを選択する可能性があるためです。

コントローラからビューへの一方向の矢印があります。これは、ビューがコントローラーに関する知識や参照を持たないためです。

コントローラはモデルをパスバックするので、ビューとそれに渡される予期されるモデルの間には知識がありますが、それを提供するコントローラには知識がありません。

MVP –モデルビュープレゼンター

次に、MVPパターンを見てみましょう。いくつかの重要な違いを除いて、MVCと非常によく似ています。

入力はプレゼンターではなくビューから始まります。

ビューと関連付けられたプレゼンターの間には1対1のマッピングがあります。

ビューは、プレゼンターへの参照を保持します。プレゼンターは、ビューからトリガーされたイベントにも反応するため、関連付けられているビューを認識します。

プレゼンターは、モデルに対して実行する要求されたアクションに基づいてビューを更新しますが、ビューはモデルを認識しません。

MVVM –モデルビューモデルの表示

MVCとMVPのパターンを目の前にして、MVVMパターンを見て、その違いを見てみましょう。

入力はビューモデルではなくビューから始まります。

ビューはビューモデルへの参照を保持していますが、ビューモデルにはビューに関する情報がありません。これが、さまざまなビューと1つのビューモデルの間で1対多のマッピングを可能にする理由です…テクノロジーを超えて。たとえば、WPFビューとSilverlightビューは同じビューモデルを共有できます。


7
「これは、Viewがコントローラーについての知識や参照を持たないためです」これは真実ではありません
Adam Wolski

@AmirZiarati ViewModelはMVPの一部ではなく、MVVMパターンです。
ジョー

これらのパターンをどこで使用できるかなどの例を提供していただければ幸いです
JKA

3

以下の画像は、Erwin van der Valkが書いた記事からの抜粋です。

MVC、MVP、MVVMを説明する画像-Erwin Vandervalk

この記事では違いを説明し、C#のコード例をいくつか示します


上記の画像は、MVCのように、VIEWがモデルに直接アクセスするのはなぜですか?他の人にも同じ?
smkrn110

これらの図では、矢印の意味が明確ではありません。矢印はアクセスまたは操作を意味しますか?MVCダイアグラムでは、モデルから開始する矢印がない理由が明確ではありません
ポンティオス
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.