65.9K
CodeProject 正在变化。 阅读更多。
Home

理解UI设计模式 MVC、MVP 和 MVVM 的基础

Avtar Sohi
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.64/5 (71投票s)

2011 年 7 月 19 日

CPOL

6分钟阅读

viewsIcon

399511

一篇关于UI设计模式 MVC、MVP 和 MVVM 基础的文章

引言

这是我的第一篇文章，希望大家喜欢。阅读本文后，您将对“为什么我们的应用程序需要UI设计模式？”和“不同的UI模式（MVC、MVP、MVVP）之间有什么基本区别？”有很好的理解。

在传统的UI开发中，开发人员通常使用窗口、用户控件或页面来创建View，然后在代码隐藏中编写所有逻辑代码（事件处理、初始化和数据模型等），因此他们基本上将代码作为视图定义类本身的一部分。这种方法增加了我的view类的大小，并在我的UI、数据绑定逻辑和业务操作之间产生了非常强的依赖关系。在这种情况下，两个开发人员无法同时处理同一个视图，并且一个开发人员的更改可能会破坏另一个人的代码。因此，一切都放在一个地方总是对可维护性、可扩展性和可测试性不利。所以，如果从大局来看，你会觉得所有这些问题之所以存在，是因为以下各项之间存在非常紧密的耦合。

  1. View (UI)
  2. Model (UI中显示的数据)
  3. Glue code (事件处理、绑定、业务逻辑)

Glue code的定义在每种模式中都不同。虽然所有模式都以相同的定义使用view和model。

在MVC中是controller。在MVP中是presenter。在MVVM中是view model。

如果您查看所有上述模式的前两个字符，它们是相同的，即代表model和view。所有这些模式虽然不同，但有一个共同的目标，那就是“职责分离”

为了理解整篇文章，我请求读者首先理解上述实体。对这些有公平的了解将有助于您理解本文。如果您曾经处理过UI模块，您可以轻松地将这些实体与您的应用程序相关联。

MVC（Model View Controller）、MVP（Model View Presenter）和MVVM（Model View ViewModel）模式使我们能够开发具有松耦合和关注点分离的应用程序，从而以最小的努力提高可测试性、可维护性和可扩展性。

MVVM模式是处理WPF和Silverlight应用程序此类问题的最佳解决方案之一。在本文中，我将在定义层面比较MVC、MVP和MVVM。

MVP & MVC

在深入研究MVVM之前，让我们从一些历史开始：市面上已经有许多流行的设计模式可以使UI开发更轻松快捷。例如，MVP（Model View Presenter）模式是市面上众多设计模式中非常流行的一种。MVP是MVC模式的一个变体，已经使用了几十年。MVP的简单定义是它包含三个组件：Model、View和Presenter。所以View无非是用户屏幕上显示的UI，它显示的数据是Model，而Presenter将两者（View和Model）连接起来。

View,Model,Presenter,Model

View依赖于Presenter来填充模型数据、响应用户输入并提供输入验证。例如，如果用户单击保存按钮，相应的处理不再位于代码隐藏中，而是在Presenter中。如果您想详细研究，这是MSDN链接。

在MVC中，Controller负责确定响应任何操作（包括应用程序加载时）的View。这与MVP不同，MVP中的操作通过View路由到Presenter。在MVC中，View中的每个操作实际上都会调用Controller以及一个操作。在Web应用程序中，每个操作都是一个URL调用，对于每一个这样的调用，应用程序中都有一个Controller来响应该调用。一旦Controller完成了它的处理，它将返回正确的View。

在MVP的情况下，view通过数据绑定直接绑定到Model。在这种情况下，Presenter的职责是将Model传递给View，以便它可以绑定到它。Presenter还将包含手势（如按按钮、导航）的逻辑。这意味着在实现此模式时，我们必须在view的代码隐藏中编写一些代码以委托（注册）到Presenter。然而，在MVC的情况下，view不直接绑定到Model。View只是渲染，并且完全是无状态的。在MVC的实现中，View通常不会在代码隐藏中有任何逻辑。由于Controller本身在响应URL操作时返回view，因此无需在view代码隐藏文件中编写任何代码。

MVC 步骤

步骤 1：传入的请求定向到Controller。

View,Model,Presenter,Model

步骤 2：Controller处理请求并形成数据Model。

View,Model,Presenter,Model

步骤 3：Model被传递给View。

View,Model,Presenter,Model

步骤 4：View将Model转换为适当的输出格式。

View,Model,Presenter,Model

步骤 5：渲染响应。

View,Model,Presenter,Model

现在您已经对MVC和MVP有了基本的了解。让我们继续讨论MVVM。

MVVM (Model View ViewModel)

MVVM 模式包含三个关键部分：

  1. Model （业务规则、数据访问、模型类）
  2. View （用户界面 (XAML)）
  3. ViewModel （View和Model之间的代理或中间人）

View,Model,ViewModel

Model 和 View 的工作方式与MVC类似，“ViewModel”是View的模型。

  • ViewModel 充当 model 和 View 之间的接口。
  • ViewModel 提供 View 和 model 数据之间的数据绑定。
  • ViewModel 使用命令处理所有UI操作。

在MVVM中，ViewModel不需要对View的引用。View将其控件值绑定到ViewModel的属性，而ViewModel又公开模型对象中包含的数据。简单来说，TextBox的文本属性与ViewModel中的name属性绑定。

在View中

<TextBlock Text="{Binding Name}"/>

在ViewModel中

public string Name
        {
            get
            {
                return this.name;
            }
            set
            {
                this.name = value;
                this.OnPropertyChanged("Name");
            }
        }

将ViewModel的引用设置为View的DataContext，以便设置view的数据绑定（view和ViewModel模型之间的连接）。

View的代码隐藏代码

public IViewModel Model
        {
            get
            {
                return this.DataContext as IViewModel;
            }
            set
            {
                this.DataContext = value;
            }
        }

如果ViewModel中的属性值发生更改，这些新值将通过数据绑定和通知自动传播到View。当用户在View中执行某些操作（例如单击保存按钮）时，ViewModel上的命令会执行以执行请求的操作。在此过程中，修改model数据的对象是ViewModel，View从不修改它。view类不知道model类的存在，而ViewModel和model对view一无所知。事实上，model对ViewModel和view的存在一无所知。

在.NET世界中，在哪里使用什么

  • Model-View-Controller (MVC) 模式
    • ASP.NET MVC 4 链接
    • 独立（Disconnected）的Web应用程序
  • Model-View-Presenter (MVP) 模式
    • Web Forms/SharePoint, Windows Forms
  • Model-View-ViewModel (MVVM) 模式
    • Silverlight, WPF 链接
    • 数据绑定

来源和参考

历史

  • 2011年7月18日：初始版本
  • 2011年7月19日：修改了MVVM部分的内容
© . All rights reserved.