前端开发的3大软件架构设计模式

前端开发中，MVC，MVP和MVVM都是常见的软件架构设计模式(Architectural Pattern)。它们通过分离关注点来改进代码的组织方式。

不同于设计模式(Design Pattern)，只是为了解决一类问题而总结出的抽象方法，一种架构模式往往使用了多种设计模式。

要了解MVC、MVP和MVVM，就要知道它们的相同点和不同点。

不同部分包括3部分，分别是C(Controller)、P(Presenter)、VM(View-Model)，而相同的部分则是MV(Model-View)。

---

MVC

MVC是软件架构中最常见的一种框架，它的意思是，软件可以分成三个部分：

视图（View），用户界面；

控制器（Controller），即业务逻辑；

模型（Model），数据保存。

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

View传送指令到Controller；Controller完成业务逻辑后，要求Model改变状态；Model将新的数据发送到View，用户得到反馈。所有通信都是单向的。

MVC还有一个重要的缺陷，view层和model层是相互可知的，这意味着两层之间存在耦合。

耦合对于一个大型程序来说是非常致命的，因为这表示开发，测试，维护都需要花大量的精力。

正因为MVC有这样那样的缺点，所以才演化出了MVP和MVVM这两种框架。

---

MVP

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

各部分之间的通信，都是双向的。View与Model不发生联系，都通过Presenter传递。View非常薄，不部署任何业务逻辑，称为"被动视图"（Passive View）。即没有任何主动性，而Presenter非常厚，所有关于用户事件的转发全部交由presenter层处理，所有逻辑都部署在presenter层。

---

MVVM

MVVM 由 Model、View、ViewModel 三部分构成，Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；View 代表UI 组件，它负责将数据模型转化成UI 展现出来，ViewModel 是一个同步View 和 Model的对象。

MVVM模式将Presenter改名为ViewModel，基本上与MVP模式完全一致。

唯一的区别是，提供对View和ViewModel的双向数据绑定，View和Model之间并没有直接的联系，而是通过ViewModel进行交互。

View的变动，自动反映在ViewModel上，反之亦然，这样就保证视图和数据的一致性。

ViewModel通过双向数据绑定把View层和Model层连接了起来。

而View和Model之间的同步工作完全是自动的，无需人为干涉。

因此开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理