JavaScript中的MVC，MVP和MVVM模式剖析

JavaScript中的MVC，MVP和MVVM模式剖析

JavaScript的UI设计模式，主流上可以分为MVC，MVP和MVVM，本文主要剖析这三种模式的异同。

首先要了解缩写字母都具体代表什么：

• MVC : Model - View - Controller
• MVP : Model - View - Presenter
• MVVM: Model - View - View Model

1. 共同点

三种模式都含有Model层和View层，其职责基本相似。

Model

其包含了描述业务逻辑和数据的对象，同时，它定义了一些针对数据的业务规则（数据如何被改变，如何被操作等等）。

View

其描绘的是UI组件，比如CSS，HTML等等。它仅仅负责展示从控制器得到的数据，也就是Model到UI的变换过程。

2. 不同点

下面针对三个模式的控制器（或类控制器）的角度，来分析不同之处。
（注：示例图片来自网络）

1). MCV

mvc.png

Contorller
它直接面对User，接受用户操作。然后把用户提供的数据转为具体的Model，Model再把最终的结果展示在View层。一旦UI上触发事件操作，Controller再次接受输入，如此循环……
Controller是View和Model之间的协调者。

在MVC模式中，除了Controller可以访问Model，View也允许直接访问Model（Model不依赖View，但是View依赖Model）。因此，View中可能含有一些业务逻辑，导致View的可重用性降低。

2). MVP

mvp.png

Presenter
它负责处理View上各类UI事件。如图所示，View直接面对User，通过View，Presenter接受输入原数据，然后交给Model处理，再把最终结果展示在View上。
Presenter与View通过定义好的接口交互，是一种低耦合模式。

MVP与MVC最大的不同，在于Model和View完全隔离开，两者必须通过Presenter进行通信。因此，主要业务处理都放在了Presenter层，View层变得比较薄弱。
MVP模式下，表现层和数据层分开，方便单元测试。

3).MVVP

mvvm.png

View Model
它暴露了一系列的方法，命令，或者属性，用于帮助维护View状态，操纵Model数据并最终作用在View上。
支持View和ViewModel的双向数据绑定。

MVVM是MVP的演化版本，在概念上真正将页面和数据逻辑分开。
它最大的特点就是双向绑定(data-binding)：View改变，ViewModel自动更新；ViewModel更新，Model同步改变。反之亦然。
一般，ViewModel中的属性都实现了一些监听器/观察器，用于View或者Model的同步刷新。
大多数情况，MVVM模式需要依赖具体的平台或者技术实现，比如Vue.js。

小结

MVP和MVVM都实现了View和Model的完全隔离，这样方便前端采用“前后端分离”方式开发（UI层开发和Model层数据开发可同步进行，并支持Model层单元测试）。这方面，MVC做不到。
MVVM可以说是MVP的增强版。