[架构之路-262]：目标系统 - 设计方法 - 软件工程 - 软件设计 - 架构设计 - Android等前端页面程序开发模式：MVC、MVP、MVVM的演进与应用场景

目录

前言：App程序架构设计

一、 MVC、MVP、MVVM比较

1.1 概述

1.2 发展路径

1.3 比较

二、MVC

2.1 概述

2.2 MVC架构的示例

2.3 经典的使用MVC架构的案例：

三、MVP

3.1 MVP概述

3.2 MVP案例

四、MVVM

4.1 概述

4.2 MVVM架构案例

它山之石：

---

前言：App程序架构设计

业务模板：即应用程序。

一、 MVC、MVP、MVVM比较

1.1 概述

MVC、MVP和MVVM是一些常见的软件架构模式，用于组织和管理应用程序的代码，特别是在构建具有用户界面的应用程序。

在上图中：MV+C,  MV+P, MV+VM， 构成了三种前端页面程序开发模式，其中：

M: Model

V: View

C: Controller

P: Presenter

VM：ViewModel

1. MVC（Model-View-Controller）：MVC模式通过将应用程序分为三个组件来组织代码。模型（Model）表示数据存储和业务逻辑，并把处理后的结果通过view展示，视图（View）用于呈现用户界面，控制器（Controller）处理用户输入和控制业务流程。模型和视图之间通过控制器进行通信。MVC模式主要关注将应用程序的数据和逻辑与其显示和用户交互分离。

2. MVP（Model-View-Presenter）：MVP模式是对MVC模式的改进，主要解决了MVC模式中视图和模型之间的紧耦合问题。在MVP模式中，视图（View）负责呈现用户界面，模型（Model）包含业务逻辑和数据，而另一个组件称为绑定器/表示器（Presenter）充当中介者，负责处理用户输入、更新视图并与模型交互。这样，视图和模型之间的耦合度减少，使代码更加模块化和可测试。

3. MVVM（Model-View-ViewModel）：MVVM模式是一种用于构建现代用户界面的模式，它将视图（View）与数据模型（Model）之间的绑定通过一个中介层称为视图模型（ViewModel）来实现。视图模型是视图和模型之间的桥梁，它负责提供视图所需的数据和行为，并通过数据绑定机制将数据和视图保持同步。通过MVVM模式，开发人员可以更好地管理复杂的用户界面，并且可以重用和测试视图模型。

这些架构模式旨在提供一种结构化的方式来组织代码，并使其易于理解、扩展和维护。具体选择哪种架构模式应该根据应用程序的需求、开发团队的技术等因素来确定。

1.2 发展路径

MVC、MVP和MVVM架构模式在软件开发领域的发展路径如下：

1. MVC（Model-View-Controller）：MVC模式最早出现在1970年代，最初是由Trygve Reenskaug提出的用于Smalltalk编程语言的框架。MVC模式的目标是将应用程序的数据（数据结构）和逻辑（算法）与其显示、用户交互分离。随着时间的推移，MVC模式由于其分离关注点的方式和模块化的代码结构变得越来越受开发者的欢迎和广泛使用。

2. MVP（Model-View-Presenter）：MVP模式是在MVC模式的基础上发展而来，尤其是在面向对象编程的桌面应用程序开发中。MVP模式最早于20世纪90年代被Martin Fowler提出，并在Microsoft的模式库中得到广泛应用。MVP模式解决了MVC模式中视图和模型之间的紧耦合问题，通过引入Presenter作为中介者来实现视图和模型的分离。MVP模式促使开发人员将业务逻辑从视图中分离出来，使得代码更加模块化和易于测试。

3. MVVM（Model-View-ViewModel）：MVVM模式是在MVC和MVP模式的基础上进一步发展的，主要用于构建现代的用户界面和富客户端应用程序。MVVM模式最早于2005年由微软的架构师John Gossman提出，并在WPF（Windows Presentation Foundation）框架中得到广泛应用。MVVM模式引入了ViewModel作为视图和模型之间的桥梁，并通过数据绑定机制保持视图和视图模型的同步。MVVM模式使得开发人员可以更好地管理复杂的用户界面，并在不同的平台和技术中实现重用。

这些架构模式的发展路径可以看出，它们都试图通过分离关注点、模块化和可测试性等方式来提高应用程序的可维护性和可扩展性。同时，随着技术的进步和应用场景的变化，这些模式也在不断演化和适应新的需求。开发人员需要基于具体的项目需求来选择最适合的架构模式，并结合实际情况进行调整和扩展。

1.3 比较

MVC（Model-View-Controller）、MVP（Model-View-Presenter）和MVVM（Model-View-ViewModel）是常见的软件架构模式，用于在应用程序中组织和分离不同的组件，以实现更好的可维护性和可扩展性。

1. MVC模式：

   • Model（模型）：负责处理数据相关逻辑，以及数据在内存和硬盘中的读取和存储。模型可以直接控制和修改View中的展现的内容 。
   • View（视图）：负责展示数据给用户，并将用户的输入传递给Controller。
   • Controller（控制器）：负责处理用户的输入的数据，更新Model，并将需要更新的数据传递给View。

   优点：

   • 分离关注点，使代码更易于维护和扩展。
   • 可以更容易地实现模块化开发。
     缺点：
   • Controller可能会变得臃肿，难以管理复杂的应用逻辑。
   • View和Model之间的关系紧密，可能导致耦合问题。

2. MVP模式：

   • Model（模型）：与MVC中的Model相同。
   • View（视图）：负责展示数据给用户，并将用户的输入传递给Presenter。
   • Presenter（展示器）：负责处理用户的输入和更新View，同时通过模型与数据进行交互。

   优点：

   • 将逻辑从View中抽离，使View更加简单和可复用。
   • 可以方便进行单元测试，Presenter可以被模拟和测试。
     缺点：
   • View和Presenter之间的通信可能变得复杂，特别是对于大型应用程序。
   • View和Presenter之间紧密耦合，改动可能会相互影响。

3. MVVM模式：

   • Model（模型）：与MVC中的Model相同。
   • View（视图）：负责展示数据给用户，并将用户的输入传递给ViewModel。
   • ViewModel（视图模型）：负责处理用户的输入和更新View，也负责与Model交互，并将数据绑定到View上。

   优点：

   • 可以实现双向数据绑定，当Model数据改变时，自动更新View。当用户在View上操作时，自动更新Model。
   • 解耦了View和Model之间的直接关系，使得View更加独立和可测试。
     缺点：
   • ViewModel可能变得复杂，特别是对于复杂的业务逻辑。
   • 引入数据绑定可能导致性能问题，必须小心使用和优化。

总结：
MVC、MVP和MVVM都是常见的架构模式，每种模式适用于不同的场景和需求。选择哪种模式取决于项目的规模、团队的熟练程度、应用的复杂性以及个人偏好。重要的是理解每种模式的基本原理和优缺点，并根据具体情况进行选择。

二、MVC

2.1 概述

下面是一个更详细的MVC模式图示及其详细解释：

         +-----------------------------+
         |            Model            |
         +-----------------------------+
         | - 数据和业务逻辑             |
         | - 通知View发生了变化         |
         +-----------------------------+
                   |                   ^
                   |                   |
         数据改变事件|       视图更新事件|
                   |                   |
                   |                   |
         +-----------------------------+
         |             View            |
         +-----------------------------+
         | - 通过Controller获取数据   |
         | - 使用数据更新显示         |
         | - 发送用户交互事件         |
         +-----------------------------+
                   |                   ^
                   |                   |
         用户交互事件|      数据更新事件|
                   |                   |
                   |                   |
         +-----------------------------+
         |         Controller          |
         +-----------------------------+
         | - 接收用户交互事件         |
         | - 从Model获取数据           |
         | - 为View提供能够更新Model的|
         |   方法                      |
         +-----------------------------+

在MVC模式中，Model（模型）是应用程序的数据和业务逻辑部分。Model通常包括数据库的读取和写入，以及其他与数据相关的操作。Model不直接与View或Controller进行通信，但是在数据或状态发生更改时，Model会通知View以及Controller。

View（视图）负责将Model的数据呈现给用户，并捕获用户输入。View只负责数据的呈现，但是需要与Controller进行通信，以在用户输入时通知Controller。

Controller（控制器）是Model和View之间的中介。控制器接收用户输入，并将更改传递给Model，以更改应用程序的状态。它还从Model获取数据，并对View进行操作，以确保用户的更改得到反映。

通过这种模式，MVC能够使应用程序更好地组织和结构化，使得不同的功能单元之间的关注点更清晰，易于维护、扩展和测试。同时，这种模式也带来了一定的性能损失，需要开发者优化，同时也要注意模式的正确应用。

在上图中：

Controller（输入）：之所以成为控制器，是因为它负责接受外部请求或用户输入。

View（输出）：负责按照某种方式展示结果，即把结果展示给用户。

Mode（处理）l: 负责处理业务逻辑，并拥有保存用户数据。并且可以直接更新View中的内容。

特点：

（1）客户端/用户：需要同时与Controller和View通信。

（2）Controller和View都是处理用户交互的，其中Controller负责对用户输入请求进行预处理。而View则负责用户界面显示的格式和布局，显示的内容由Controller提供。

（3）model负责业务逻辑与数据访问，没有实现数据存储与业务逻辑的分离。

2.2 MVC架构的示例

以下是一些常见的MVC架构的示例：

1. Web Server端应用程序：MVC已成为Web应用程序的标准架构，其中Model表示业务数据库和业务逻辑，View表示用户界面的样式和格式，Controller处理输入数据和用户输入之间的中介，并负责用户界面显示的内容。例如，在ASP.NET MVC中，控制器使用HTTP请求来更新模型，并使用ViewEngine呈现响应。

2. 手机端移动应用程序：MVC通常用于移动应用程序。在这种情况下，模型表示应用程序的数据源，视图显示数据和采用用户交互，而控制器协调模型和视图之间的交互，以响应用户的输入。

3. 游戏开发：MVC也可以用于游戏开发。在这种情况下，模型表示游戏世界或游戏逻辑，视图显示游戏界面，而控制器处理用户输入并调整模型状态。

4. 桌面应用程序：MVC常用于桌面应用程序，尤其是在使用GUI工具包（如Java Swing、Qt等）时。在这种情况下，模型表示应用程序数据和业务逻辑，视图负责用户界面，而控制器处理用户交互并更新模型和视图。

无论用于什么类型的应用程序，MVC都可以提高应用程序的结构和可维护性。通过将应用程序逻辑分解成三个不同的组件，MVC使开发者能够更容易地维护代码和进行修改，从而更有效地开发和维护应用程序。

2.3 经典的使用MVC架构的案例：

以下是一些经典的使用MVC架构的案例：

1. Rails框架（Ruby on Rails）：Rails是一个使用MVC架构的开发框架，用于构建Web应用程序。它提供了一个完整的开发环境和一组约定，使得开发人员可以快速构建可扩展的应用程序。

2. Django框架（Python）：Django是一个使用MVC架构的Python Web框架。它提供了一套强大的工具和库，用于处理路由、模型、视图和模板渲染等方面，帮助开发人员构建高效的Web应用程序。

3. Cocoa框架（Objective-C和Swift）：Cocoa是用于开发Mac和iOS应用程序的一组框架。它遵循MVC架构，并提供了一套丰富的API来处理用户界面、数据管理和应用程序逻辑。

4. Angular框架（JavaScript）：Angular是一个流行的前端开发框架，它基于MVC架构。它提供了一套强大的工具和组件，用于处理数据绑定、路由、表单验证等，使得开发人员能够构建交互性强、可扩展的Web应用程序。

这些经典案例说明了MVC架构的适用性和灵活性，它可以应用于各种类型的应用程序开发，从Web应用程序到桌面应用程序，从移动应用程序到前端开发。无论是小型项目还是大型应用，MVC都可以帮助开发人员更好地组织和管理代码，并实现高效的开发和维护。

三、MVP

3.1 MVP概述

MVP (Model-View-Presenter) 是一种架构模式，它是MVC模式的演化。MVP模式之所以流行，是因为MVC模式的一个不足是Controller的臃肿和难以进行单元测试。MVP模式保持了MVC模式中重视分离视图（View）和模型(Model)的设计思想同时也解决了MVC模式中Controller的问题。

• 模型（Model）：数据和业务规则，与MVC模式中的模型类似。

• 视图（View）：是图形用户界面，需要从Presenter中获取业务数据来展示视图，并把用户输入发送给Presenter。

• 抽象出来的Presenter（Presenter Interface）：它负责连接Model和View，从Model中检索数据，并准备展示给View的数据。Presenter不依赖于任何特定的UI技术，这使得它可以更方便的进行测试。

• 具体的Presenter实现类（Presenter）：实现Presenter接口并处理View的业务逻辑，解释Model返回的数据并决定如何在View中显示。

MVP模式的主要优点是：将视图与模型分离，使得Presenter可以更好地控制视图展示数据的方式，同时使得整个程序更容易测试和维护。因此，MVP模式被广泛应用于Android和其他前端框架的开发中。

MVP与MVC不同，在MVP中，模型不能直接控制View，而在MVC中，M是可以直接控制View中显示的内容的！！！

3.2 MVP案例

MVP（Model-View-Presenter）软件架构是一种用于构建用户界面的架构模式。它将应用程序分为三个主要角色：模型（Model）、视图（View）和Presenter。

以下是几个应用MVP软件架构的案例：

1. Android开发：MVP架构在Android应用开发中得到了广泛的应用。通过使用MVP，开发人员可以将业务逻辑与界面分离，使代码更加模块化和易于测试。视图（View）在Android中通常是Activity或Fragment，模型（Model）处理数据，而Presenter负责协调视图和模型之间的交互。

2. GWT（Google Web Toolkit）：GWT是一个用Java编写的开发Web应用程序的框架。MVP模式是GWT推荐的架构模式之一，它允许开发人员将应用程序逻辑独立于用户界面。视图（View）在GWT中通常是以Java编写的用户界面组件，而Presenter处理用户界面和业务逻辑之间的交互。

3. Swing桌面应用程序：Swing是一个用于构建Java桌面应用程序的GUI工具包。在Swing应用程序中，MVP架构可以帮助开发人员更好地组织代码并将关注点分离。视图（View）在Swing中通常是Swing组件，模型（Model）包含数据，而Presenter处理视图和模型之间的交互。

4. 前端JavaScript应用程序：MVP架构也可以应用于前端JavaScript应用程序的开发。前端框架如Angular和React提供了MVP的实现方式。视图（View）通常是HTML模板，模型（Model）处理数据，而Presenter负责处理用户界面和业务逻辑之间的交互。

这些案例表明MVP软件架构在不同的应用场景中都能发挥作用，帮助开发人员构建可维护、可测试且易于扩展的应用程序。

四、MVVM

4.1 概述

MVVM（Model-View-ViewModel）是一种软件架构模式，它旨在将用户界面（View）与业务逻辑和数据（Model）分离，并引入一个中间层（ViewModel）来处理界面和数据之间的通信。

以下是对MVVM的解释：

1. Model：Model表示应用程序的数据和业务逻辑。它与数据相关，并负责从数据源（例如数据库或网络）获取数据、修改数据以及执行业务规则和逻辑。

2. View：View是用户界面的表示，负责展示数据给用户并接收用户的输入。通常可以是UI元素如界面控件、页面或视图。

3. ViewModel：ViewModel是View和Model之间的连接器，负责处理视图与模型之间的通信和转换。它从Model获取数据，并将数据转换为View可以理解和展示的形式。ViewModel还通过双向绑定（data binding）机制来维护View和Model之间的同步。

MVVM模式的核心是数据绑定。数据绑定允许将View的属性和ViewModel中的属性进行绑定，当ViewModel中的属性发生变化时，View会自动更新，而当View中的输入发生变化时，ViewModel中的属性也会相应地更新。

MVVM的优点包括：

• 实现了界面与业务逻辑的解耦，使得开发人员可以独立地开发和测试ViewModel和Model。
• 提供了更好的可维护性和可测试性，因为ViewModel中的逻辑可以通过单元测试进行验证。
• 支持双向数据绑定，使得开发人员可以更轻松地处理用户输入和数据更新。

MVVM模式在客户端应用程序如WPF（Windows Presentation Foundation）、Android（使用Data Binding库）和iOS（使用ReactiveCocoa或RxSwift）上得到广泛使用，它能帮助开发人员构建清晰、可维护且可扩展的应用程序。

4.2 MVVM架构案例

以下是几个实际应用 MVVM 架构的案例：

1. WPF 应用程序：WPF（Windows Presentation Foundation）是一款用于构建 Windows 客户端应用程序的技术。MVVM 在 WPF 中得到广泛应用。View 层由 XAML 文件定义，表示应用程序的用户界面；ViewModel 层处理业务逻辑和数据转换，并与 View 进行绑定；Model 层负责数据访问和业务处理。通过数据绑定和命令绑定机制，View 和 ViewModel 之间的通信可以自动更新界面，并支持用户输入的交互。

2. Android 应用程序：在 Android 开发中，MVVM 架构通过使用框架如Android Architecture Components（包括ViewModel、LiveData、Data Binding等）来实现。View 层通常是 Activity 或 Fragment，View 层以 XML 文件的形式定义用户界面；ViewModel 层负责业务逻辑和数据处理，与 View 层通过 Data Binding 进行绑定；Model 层处理数据来源和网络请求。LiveData 机制确保了数据的观察和更新，以反映在用户界面上。

3. iOS 应用程序：在 iOS 开发中，MVVM 架构可以通过使用框架如ReactiveCocoa、RxSwift和Combine来实现。View 层通常是 UIViewController，使用故事板（Storyboard）或 SwiftUI 构建用户界面；ViewModel 层负责处理业务逻辑、数据转换，以及与 View 层进行绑定；Model 层负责数据访问和网络请求。通过响应式编程和数据绑定机制，View 和 ViewModel 可以在数据变化时自动更新，以及处理用户输入。

这些案例展示了 MVVM 架构在不同平台和技术中的应用广泛性，它帮助开发人员将用户界面与业务逻辑和数据分离，提高了应用程序的可维护性、可测试性和可扩展性。

4.3 MVVM与MVP的区别

MVVM（Model-View-ViewModel）和 MVP（Model-View-Presenter）是两种常见的软件架构模式，它们都旨在将用户界面（View）与业务逻辑和数据（Model）分离。下面是它们的区别：

1. 工作方式：在 MVP 模式中，Presenter 充当一个中介人，负责管理数据和用户界面之间的所有通信。View 只负责与 Presenter 进行通信，并将所有用户交互事件返回给 Presenter。在 MVVM 模式中，ViewModel 充当中介人，并使用双向数据绑定机制，自动将 Model 中的数据更新到 View 中。

2. 数据处理：在 MVP 中，Presenter 必须从 Model 中获取数据，处理后再将数据传递给 View 中进行展示。在 MVVM 中，ViewModel 直接将数据从 Model 中转换后传递给 View 进行展示。

3. 面向细节的可测试性：在 MVP 中，Presenter 的职责是管理用户界面和 Model 之间的解耦，因此它容易被写成可测试的代码。在 MVVM 中，ViewModel 的职责是将 Model 转化为 View 可以理解的数据格式。ViewModel 的主要职责是UI逻辑，所以它同样易于写成可测试的代码。

4. 数据绑定：数据绑定是 MVVM 模式中的一个特别功能。它在 ViewModel 和 View 之间建立双向数据绑定，从而使得当数据源中的数据改变时，View 自动更新，反之亦然。MVP 模式没有数据绑定的概念，Presenter 是手动处理数据的。

5. 可扩展性：MVVM 更适用于大型项目，因为 ViewModel 充当了由 View 和 Model 之间的中介人。ViewModel 可以将其逻辑作为可重用的组件，从而更好地支持项目扩展。

以上是MVVM与MVP的区别。总的来说，MVVM 更加关注数据的双向绑定，UI逻辑较为简单，代码复用性更为简单；MVP则更加关注如何实现视图和模型解耦，将大量的UI逻辑放到 Presenter 中实现，从而更好地支持项目的适应性和可扩展性。选择何种框架，取决于你的具体需求和应用的场景。

它山之石：

3. APP架构设计_哔哩哔哩_bilibili