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 的状态。如此反复。
   

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 双向通信。
   

MVVM 模型

1. 概念
   MVVM 全称 Model（模型 ）-View（视图 ）-ViewModel（视图模型）。
   MVVM 就是把 MVP 模型中的 Presenter 改成了 ViewModel。随着业务的复杂性提高，视图也变得越来越复杂。视图与数据之间的交互更加频繁。所以可以把这一部分的逻辑抽离出来体现在框架里面。这就是 ViewModel 的功能。

2. 特点
   优点：简化测试，提高可维护性。
   缺点：不适合简单的图形界面，太复杂的图形界面 ViewModel 维护起来成本也比较高，ViewModel 中的数据没办法断点调试。

3. 通信
   

案例

题目描述：用三大模型实现一个 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：在页面视图，通过指令模式注册事件。
ViewModel：数据与视图双向绑定，相互作用。