前端框架之MVC、MVP、MVVM

复杂的软件必须有清晰合理的架构，否则无法开发和维护。为了将业务和视图的实现代码分离，目前比较流行三种前端架构：

MVC = Model-View-Controller

MVP = Model-View-Presenter

MVVM = Model-View-ViewModel

Model 为模型层，主要管理业务模型的数据和行为；

View 为展示层，其职责就是管理用户界面。

三个架构模式目的都是为了解耦 Model 和 View，主要不同点就在于三者实现解耦的方案不同。

MVC = Model-View-Controller，

• 视图（View）：用户界面。
• 控制器（Controller）：业务逻辑
• 模型（Model）：数据保存

各部分之间的通信方式如下

View会接收用户的交互请求并展示数据信息给用户。在 MVC 里，View 被设计为可嵌套的，使用了组合(Composite)模式来实现。比如，列表视图(ListView)或表格视图(TableView)由每个 Item 组成，每个 Item 又可以由图片、文本、按钮等组成。View 是倾向于可复用的，因此，在实际应用中，倾向于将 View 开发成相对通用的组件。

Controller 层主要担任 Model 与 View 之间的桥梁，用于控制程序的流程。Controller 负责确保 View 可以访问到需要显示的 Model 对象数据，并充当 View 了解 Model 更改的渠道。View 接收到用户的交互请求之后，会将请求转发给 Controller，Controller 解析用户的请求之后，数据就会交给对应的 Model。

Model在前端框架中就是数据的存储。在传统后端开发中习惯把业务层归入Model，而对前端框架来说，通常不这样划分。

MVP 模式将 Controller 改名为 Presenter，同时改变了通信方向。

MVP有以下三个特点：

1. 各部分之间的通信，都是双向的。

2. View 与 Model 不发生联系，都通过 Presenter 传递。

3. View 非常薄，不部署任何业务逻辑，称为"被动视图"（Passive View），即没有任何主动性，而 Presenter非常厚，所有逻辑都部署在那里。

MVVM 模式将 Presenter 改名为 ViewModel，MVP 很相似，最大的不同在于 View 和 ViewModel 之间主要是通过数据绑定的方案来实现交互的。

MVVM采用双向绑定（data-binding）：View的变动，自动反映在 ViewModel，反之亦然。AngularJS和 Vue都采用这种模式，而React采用了单向数据流，属于MVP架构。　　

要实现数据绑定，通常都采用发布者-订阅者模式进行实现，但这部分工作如果由开发人员自己来写代码实现，其实还是挺复杂的，因此，各大平台都提供了各自的内部实现。比如 Vue 和 AngularJS 自身都实现了数据绑定，Android 目前最主流的方案就是采用 Jetpack，iOS 最常用的方案则是结合 ReactiveCocoa（RAC）实现。

MVP 和 MVVM 都是为了解决界面和数据的分离问题，两者只是采用了不同的实现方案。MVP 之间的交互主要是通过接口实现的，其主要弊端就是需要编写大量接口。而 MVVM 则是通过数据绑定的方式实现交互，虽然其实现需要依赖具体的一些框架工具，但明显大大减少了开发者需要编写的代码量。