MVC、MVP、MVVM 框架及编程模式的区别

        所谓设计模式（Design Pattern），其实是框架结构的呈现，目的是分离应用程序的页面展 示、网络数据交互、数据呈现。随着项目复杂度的不断变化，新的框架也在不断更新迭代，从最早 的MVC模式，到后面的MVP以及MVVM，都是对项目的一种重构。

一、MVC 框架

1. MVC 简介

        MVC的全称为Model-View-Controller，即模型－视图－控制器的缩写，是一种软件设计规范，在Vue出现之前，开发Web并不是前后端分离，而是后端语言与前端语言混编在一起，维护困难，而MVC通常用于端语言，如PHP、NET、Java等。这样在开发时可以做到视图、模型、 控制器相分离，使开发者维护更方便、代码更清晰。MVC通信方式如图1.1 所示。 例如，后端语言Java常用的MVC框架有Struts、Spring；后端语言PHP常用的MVC框架有 ThinkPHP、Laravel。

2. MVC 编程模式

（1）Model通常用于对数据库的操作。

（2）View通常用于页面显示，即用HTML、CSS、JavaScript 语言编写的静态页面。

（3）Controller是Model和View通信的桥梁，负责从视图读 取数据，并向模型发送数据。

MVC 通信方式：

3. MVC 框架特点

（1）用户可以向 View 发送指令（DOM 事件），再由 View 直接要求 Model 改变状态。

（2）用 户 也 可 以 直 接 向 Controller 发 送 指 令， 再 由 Controller发送给 View。

（3）Controller 非常浅，只起到路由的作用；而 View 非常深， 业务逻辑都部署在 View中。

二、MVP 框架

1. MVP 简介

        MVP的全称为Model-View-Presenter，即模型－视图－表现层的缩写。Model通常用于对数 据库的操作，View负责页面显示，Presenter代替了Controller负责逻辑的处理。

        在MVP中View并不直接使用Model，它们之间的通信是通过Presenter （MVC中 的 Controller）进行的，所有的交互都发生在Presenter内部，Presenter完全把Model和View进行了分离，可以修改View而不影响Model，可以更高效地使用Model，因为所有的交互都发生在Presenter内部。可以将一个Presenter用于多个View，不需要改变Presenter的逻辑。这个特性非常有用，因为View的变化总是比Model的变化频繁。

2. MVP 编程模式

（1）M（Model）：用于数据以及数据处理逻辑。

（2）V（View）：用于页面以及页面UI的显示和变化。

（3）P（Presenter）：中间件，M和V互不干涉，全靠P交互。 简单来说，M和V的代码中，各自实现各自的逻辑，不能有与对方相关的代码。P的代码中， 必须有M和V的代码，用于二者的交互。

MVP通信方式：

        View和Model是不需要直接交互的，交互都发生在Presenter中。

3. MVP 框架特点

（1）各部分之间的通信都是双向的。

（2）View 与 Model 不发生联系，都是通过 Presenter 进行交互的。

（3）View 非常浅，不部署任何业务逻辑，称为被动视图（Passive View），即没有任何主动性； 而 Presenter非常深，所有业务逻辑都部署在 Presenter 中。

三、MVVM 框架

1. MVVM 简介

        MVVM是Model-View-ViewModel的缩写，可以理解为MVP的升级版，MVVM没有MVC 模式的 Controller ，也没有MVP模式的Presenter，有的是一个数据绑定器。在View模型中，绑 定器在View和数据绑定器之间进行通信。

2. MVVM 编程模式

（1）Model：代表了描述业务逻辑和数据的一系列类的集合。它也定义了数据修改和操作的 业务规则。

（2）View：代表了UI组件，如CSS、jQuery、HTML等，也就是把Model转化成UI。

（3）ViewModel：负责暴露方法、命令或其他属性操作View的状态，组装Model作为View动 作的结果，并且触发View自己的事件。

MVVM通信方式：

3. MVVM 框架特点

        MVVM采用双向绑定（data-binding），View的变动自动反映在 ViewModel中；反之亦然， Vue采用这种模式。