三种架构模式——MVC、MVP、MVVM

前言

MV系列框架中，M和V分别指Model层和View层，但其功能会因为框架的不同而变化。Model层是数据模型，用来存储数据；View层是视图，展示Model层的数据。

虽然在不同的框架中，Model层和View层的内容可能会有所差别，但是其基础功能不变，变的只是 数据的传输方式 。

一、MVC（Model-View-Controller）

1、简介

MVC是模型-视图-控制器，它是MVC、MVP、MVVM这三者中最早产生的框架，其他两个框架是以它为基础发展而来的。

MVC的目的就是将M和V的代码分离，且MVC是单向通信，必须通过Controller来承上启下。

Model：模型层，数据模型及其业务逻辑，是针对业务模型建立的数据结构，Model与View无关，而与业务有关。

View：视图层，用于与用户实现交互的页面，通常实现数据的输入和输出功能。

Controller：控制器，用于连接Model层和View层，完成Model层和View层的交互。还可以处理页面业务逻辑，它接收并处理来自用户的请求，并将Model返回给用户。

2、框架图

MVC框架图如图1.1示。

图1.1 MVC框架图

上图可以看出各部分之间的通信是单向的，呈三角形状。

具体MVC框架流程图如图1.2所示。

图1.2 MVC框架流程图

从上图可以看出，Controller层触发View层时，并不会更新View层中的数据，View层的数据是通过监听Model层数据变化自动更新的，与Controller层无关。换言之，Controller存在的目的是确保M和V的同步，一旦M改变，V应该同步更新。

同时，我们可以看到，MVC框架大部分逻辑都集中在Controller层，代码量也集中在Controller层，这带给Controller层很大压力，而已经有独立处理事件能力的View层却没有用到；而且，Controller层与View层之间是一一对应的，断绝了View层复用的可能，因而产生了很多冗余代码。

为了解决上述问题，MVP框架被提出。

二、MVP（Model-View-Presenter）

1、简介

MVP是模型-视图-表示器，它比MVC框架大概晚出现20年，是从MVC模式演变而来的。它们的基本思想有相同之处：Model层提供数据，View层负责视图显示，Controller/Presenter层负责逻辑的处理。将Controller改名为Presenter的同时改变了通信方向。

Model：模型层，用于数据存储以及业务逻辑。

View：视图层，用于展示与用户实现交互的页面，通常实现数据的输入和输出功能。

Presenter：表示器，用于连接M层、V层，完成Model层与View层的交互，还可以进行业务逻辑的处理。

2、框架图

MVP框架图如图2.1示。

图2.1 MVP框架图

上图可以看出各部分之间的通信是双向的。

在MVC框架中，View层可以通过访问Model层来更新，但在MVP框架中，View层不能再直接访问Model层，必须通过Presenter层提供的接口，然后Presenter层再去访问Model层。

具体MVP框架流程图如图2.2所示。

图2.2 MVP框架流程图

从上图可以看出，View层和Model层互不干涉，View层也自由了很多，所以View层可以抽离出来做成组件，在复用性上就比MVC框架好很多。

但是，由于View层和Model层都需要经过Presenter层，导致Presenter层比较复杂，维护起来也会有一定的问题；而且，因为没有绑定数据，所有数据都需要Presenter层进行“手动同步”，代码量较大，虽然比起MVC框架好很多，但还是有比较多冗余部分。

为了让View层和Model层的数据始终保持一致，MVVM框架出现了。

三、MVVM（Model-View-ViewModel）

1、简介

MVVM是模型-视图-视图模型。MVVM与MVP框架区别在于：MVVM采用双向绑定：View的变动，自动反映在ViewModel，反之亦然。

Model：数据模型（数据处理业务），指的是后端传递的数据。

View：视图，将Model的数据以某种方式展示出来。

ViewModel：视图模型，数据的双向绑定（当Model中的数据发生改变时View就感知到，当View中的数据发生变化时Model也能感知到），是MVVM模式的核心。ViewModel 层把 Model 层和 View 层的数据同步自动化了，解决了 MVP 框架中数据同步比较麻烦的问题，不仅减轻了 ViewModel 层的压力，同时使得数据处理更加方便——只需告诉 View 层展示的数据是 Model 层中的哪一部分即可。

2、框架图

MVVM框架图如图3.1示。

图3.1 MVVM框架图

上图可以看出各部分之间的通信是双向的，而且我们可以看出，MVVM框架图和MVP框架图很相似，两者都是从View层开始触发用户的操作，之后经过第三层，最后到达Model层。而关键问题就在于这第三层的内容，Presenter层是采用手动写方法来调用或修改View层和Model层；而ViewModel层双向绑定了View层和Model层，因此，随着View层的数据变化，系统会自动修改Model层的数据，反之同理。

具体MVVM框架流程图如图3.2所示。

图3.2 MVVM框架流程图

从上图可以看出，View层和Model层之间的数据传递经过了ViewModel层，ViewModel层并没有对其进行“手动绑定”，不仅使速度有了一定的提高，代码量也减少很多，相比于MVC框架和MVP框架，MVVM框架有了长足的进步。

从3.1框架图可以看出，MVVM框架有大致两个方向：

1、模型-->视图 ——实现方式：数据绑定

2、视图-->模型 ——实现方式：DOM事件监听

存在两个方向都实现的情况，叫做数据的双向绑定。双向数据绑定可以说是一个模板引擎，它会根据数据的变化实时渲染。如图3.3所示，View层和Model层之间的修改都会同步到对方。

图3.3 数据的双向绑定

MVVM模型中数据绑定方法一般有三种：

• 数据劫持
• 发布-订阅模式
• 脏值检查

补充：Vue.js使用的就是数据劫持和发布-订阅模式两种方法。了解Vue.js数据绑定流程前，我们需要了解这三个概念：

• Observer：数据监听器，用于监听数据变化，如果数据发生改变，不论是在View层还是在Model层，Observer都会知道，然后告诉Watcher。
• Compiler：指定解析器，用于对数据进行解析，之后绑定指定的事件，在这里主要用于更新视图。
• Watcher：订阅者。

接下来看看Vue.js数据绑定的流程：首先将需要绑定的数据劫持方法找出来，之后用Observer监听这堆数据，如果数据发生变化，Observer就会告诉Watcher，然后Watcher会决定让那个Compiler去做出相应的操作，这样就完成了数据的双向绑定。

四、总结

从MVC到MVP再到MVVM，这是一个不断进步的过程，后两者都是在MVC基础上发展而来，使用起来更加方便。这三者主要的区别在于除Model层和View层之外的第三层的不同。