理解MVC，MVP和MVVM设计模式

不念不忘少年蓝@ 2022-07-17 03:27 233阅读 0赞

原文链接：http://www.dotnet-tricks.com/Tutorial/designpatterns/2FMM060314-Understanding-MVC,-MVP-and-MVVM-Design-Patterns.html

有3个非常受欢迎的MV-\*系列设计模式：MVC，MVP，MVVM。他们被广泛应用于不多种结束。这篇文章我回阐述我自己对这3个设计模式的看法。

MVC模式：

MVC即Model-VIew-Controller。他是1970年代被引入到软件设计大众的。MVC模式致力于关注点的切分，这意味着model和controller的逻辑是不与用户界面（View）挂钩的。因此，维护和测试程序变得更加简单容易。

MVC设计模式将应用程序分离为3个主要的方面：Model，View和Controller

![Center][]

01.Model

Model代表了描述业务路逻辑，业务模型、数据操作、数据模型的一系列类的集合。这层也定义了数据修改和操作的业务规则。

02.View

View代表了UI组件，像CSS，JQuery，html等。他只负责展示从controller接收到的数据。也就是把model转化成UI。

03.Controller

Controll负责处理流入的请求。它通过View来接受用户的输入，之后利用Model来处理用户的数据，最后把结果返回给View。Controll就是View和Model之间的一个协调者。

今天，这个设计模式被很多热门框架所使用，比如Ruby on Rails,Spring Framework，Apple IOS Development and ASP.NET MVC。

MVP模式：

这个模式把Presenter换成Controller就非常和MVC相像了。这个设计模式把应用程序分成了3个主要方面：Model、View和Presenter。

![Center 1][]

01.Model

Model层代表了描述业务逻辑和数据的一系列类的集合。它也定义了数据修改和操作的业务规则。

02.View

View代表了UI组件，像CSS，JQuery，html等。他只负责展示从Presenter接收到的数据。也就是把模型（译者注：非Modle层模型）转化成UI。

03.Presenter

Presenter负责处理View背后所有的UI事件。它通过View接收用户输入，之后利用Model来处理用户的数据，最后把结果返回给View。与View和Controller不同，View和Presenter之间是完全解耦的，他们通过接口来交互。另外，presenter不像controller处理进入的请求。

这个模式被普遍的引用于ASP.NET Web Forms 应用程序。并且也应用于windows form。

MVP模式关键点：

01.用户和View交互。

02.View和Presenter是一对一关系。意味着一个Presenter只映射一个View。

03.View持有Presenter的引用（译者注：应该是通过接口交互，并不直接引用Presenter），但是View不持有Model的引用（译者注：即使接口，也不会）。

04.在View和Presenter之间可以双向交互。

MVVM模式：

MVVM即Model-View-View Model。这个模式提供对View和View Model的双向数据绑定。这使得View Model的状态改变可以自动传递给View。典型的情况是，View Model通过使用obsever模式（观察者模式）来将View Model的变化通知给model。

![Center 2][]

01.Model

Model层代表了描述业务逻辑和数据的一系列类的集合。它也定义了数据修改和操作的业务规则。

02.View

View代表了UI组件，像CSS，JQuery，html等。他只负责展示从Presenter接收到的数据。也就是把模型转化成UI。

03.View Model

View Model负责暴漏方法，命令，其他属性来操作VIew的状态，组装model作为View动作的结果，并且触发view自己的事件。

这个模式被广泛应用于WPF，Silverlight，Caliburn，nRoute 等。

MVVM模式关键点：

01.用户和View交互。

02.View和ViewModel是多对一关系。意味着一个ViewModel只映射多个View。

03.View持有ViewModel的引用，但是ViewModel没有任何View的信息。

04.View 和ViewModel之间有双向数据绑定关系。

[Center]: /images/20220717/058fba25e198425abd11080d6f54b972.png
[Center 1]: /images/20220717/928ea49eb28c49b48906b3631823f30d.png
[Center 2]: /images/20220717/7c4c8069512e472ea51496a30ca05275.png