MVC 模型、MVP模型和 MVVM 模型介绍(附案例说明)

小灰灰 2023-07-25 14:05 6阅读 0赞

### MVC 模型、MVP模型 和 MVVM 模型介绍（附案例说明） ###

*  前言
 *  MVC 模型
 *  MVP 模型
 *  MVVM 模型
 *  案例

# 前言 #

为了解决图形界面程序的复杂性，提高可维护性，MVC 模型、MVP模型 及 MVVM 模型应运而生。它们的本质都是将数据层、逻辑层、视图层分层管理。本文将分别介绍这三种模型的概念、特点及通信方式。并通过一个 todoList 案例来说明这三种模型。

# MVC 模型 #

1.  **概念**  
    MVC 全称 Model（模型）-View（视图）- Controller（控制器）。  
    【Model】用于管理程序的数据部分，承担数据管理者的角色。创建数据，并提供访问、修改数据的接口，执行修改数据之后的操作。  
    【View】 用于渲染程序的视图部分，根据不同的数据模型，展示不同的界面。  
    【Controller】用于处理程序中用户交互的部分，Controller 从 View 获取数据，通过 Model 提供的接口操作数据。
2.  **特点**  
    优点：业务逻辑抽离到 Controller，模块化程度高。新增逻辑功能时，只需要再添加一个 Controller。  
    缺点：测试困难，View 无法组件化。系统结构较复杂，不适合简单程序。
3.  **通信**  
    在 MVC 模型中，View 传送指令（数据）到 Controller 。Controller 接收数据，编写业务逻辑，然后更新 Model。Model 中的数据又会改变 View 的状态。如此反复。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDEzNTEyMQ_size_16_color_FFFFFF_t_70]

# MVP 模型 #

1.  **概念**  
    MVP 全称 Model（模型 ）-View（视图 ）- Presenter（提供者）。  
    MVP 是从经典的 MVC 模式演变而来。模型与视图完全分离。Presenter 与具体的 View 是没有关联的，而是通过定义好的接口进行交互。从而保证在变更 View 的时候 Presenter 保持不变。这样 Presenter 就能够实现复用。还可以编写测试用的 View，模拟用户操作。
2.  **特点**  
    优点：视图与模型完全分离。一个 Presenter 可以应用于多个视图，从而应变 View 的频繁变化，可以做单元测试。  
    缺点：Presenter 与 View 耦合度太高，一旦 View 发生大改变，Presenter 也会跟着变。
3.  **通信**  
    在 MVP 模型中，Presenter 取代了 Controller。通信方向发生了改变。View 与 Model 之间不再直接通信。取而代之的是 View 与 Presenter 双向通信。Model 与 Presenter 双向通信。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDEzNTEyMQ_size_16_color_FFFFFF_t_70 1]

# MVVM 模型 #

1.  **概念**  
    MVVM 全称 Model（模型 ）-View（视图 ）-ViewModel（视图模型）。  
    MVVM 就是把 MVP 模型中的 Presenter 改成了 ViewModel。随着业务的复杂性提高，视图也变得越来越复杂。视图与数据之间的交互更加频繁。所以可以把这一部分的逻辑抽离出来体现在框架里面。这就是 ViewModel 的功能。
2.  **特点**  
    优点：简化测试，提高可维护性。  
    缺点：不适合简单的图形界面，太复杂的图形界面 ViewModel 维护起来成本也比较高，ViewModel 中的数据没办法断点调试。
3.  **通信**  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDEzNTEyMQ_size_16_color_FFFFFF_t_70 2]

# 案例 #

题目描述：用三大模型实现一个 todoList 任务管理功能。  
功能点如下：  
1. 通过【新增】按钮添加任务。  
2. 添加任务后，任务列表更新。  
3. 选中某一条记录时，改变状态为已完成，否则置为未完成。

实现思路：将业务逻辑分为两部分。

**MVC 实现如下**：  
第一部分：输入框与按钮部分（Input 和 button ）。  
创建 1 个 InputView。通过模板引擎 Handlebars 构建输入框及按钮视图，注册并调用用户点击事件。当用户点击【新增】时将用户输入数据 `value` 作为参数调用 Controller 提供的 `addTodo(value)` 方法。MVC 的 View 既要渲染页面，也要执行用户交互事件。

创建 1 个 InputController 。提供 `addTodo` 方法，该方法接收从 View 中传递过来的 `value`，调用 Model 提供的 `setTodos` 方法。

创建 1 个 Model(todos) 。初始化列表对象 `todos`，提供访问对象的方法 `getTodos` 和设置对象的方法 `setTodos`，在 `setTodos` 方法中触发 `change` 事件（更新视图）。

第二部分：列表部分（ul>li）。  
创建 1 个 ListView。通过模板引擎 Handlebars 构建列表视图，使用 EventEmitter 注册 `change` 事件。 `change` 事件的回调函数就是更新列表视图，在 li 点击事件上添加 `listenCheck` 方法，将当前点击索引 `index` 作为参数调用 Controller 提供的 `onCheck` 事件。

创建 1 个 ListController。提供 `onCheck` 方法，该方法接收从 View 中传递过来的 `index` ，调用 Model 提供的 `getTodos` 方法。获取当前记录的数据，将是否完成状态置反，然后调用 Model 提供的 `setTodos` 方法更新数据。

与第一部分共享同一个 Model 层 。

通过实现以上功能再总结一下 MVC 模式。  
View：作为视图层。渲染页面，监听用户交互事件，在事件中调用 Controller 提供的方法。注册数据改变之后更新视图的事件。

Controller：接收从 View 中传入的参数，操作业务逻辑，比如添加记录，置反任务完成状态。然后调用 View 提供的更新数据的方法。

Model：创建并初始化数据对象，提供访问和设置数据对象的方法。在设置数据对象的方法中触发更新数据之后的事件（View 中注册的更新视图事件）。

**MVP 实现如下**：  
View：提供渲染视图的方法，提供访问和更新视图数据的方法。注册用户事件，在回调事件中调用 Presenter 中提供的业务逻辑方法。在 MVP 中 View 不直接将用户数据传给 Presenter，而是提供访问和更新数据的接口供 Presenter 调用。

Presenter：通过 View 提供的接口，编写业务逻辑供 View 调用。调用 Model 提供的访问和设置数据对象的方法。执行数据更新之后的操作（更新页面）。 MVP 中的 Presenter 不仅要提供业务逻辑，还要执行 View 的回调事件以及 Model 更新之后的操作。

Model：创建并初始化数据对象，提供访问和设置数据对象的方法。在设置数据对象的方法中触发更新数据之后的事件（View 中注册的更新视图事件）。

**MVVM 实现如下**：  
Model：创建并初始化数据对象。  
View：页面视图通过指令模式绑定事件并实现一些简单的业务逻辑（if 判断与 for 循坏）。  
ViewModel：Control 的主要作用就是实现功能，但是在 MVVM 中，事件可以直接通过指令模式绑定在 View 中，所以在 MVVM 中弱化了 Control 的作用，而是直接到离数据最近的 ViewModel 中编写相关功能。在 MVVM 中，数据与视图的关系变得更加亲密。两者可以实现双向绑定，相互作用，相互连通。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDEzNTEyMQ_size_16_color_FFFFFF_t_70]: /images/20230528/84e72223d0ef4cd9a754cb5c7f42ba10.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDEzNTEyMQ_size_16_color_FFFFFF_t_70 1]: /images/20230528/bc48b6d7c3a14bf2aeebf2046f64c5be.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDEzNTEyMQ_size_16_color_FFFFFF_t_70 2]: /images/20230528/3a15ff87c9c0417bb5941522a2e03999.png