浅析设计模式之mvc、mvp、mvvm

mvc、mvvm、mvp是常见的设计模式，也是常见的设计思想，现对它们进行简要的概括总结

三种模式的介绍

1.MVC：经典设计模式

• View 传送指令到 Controller（控制器）
• Controller 完成业务逻辑后，要求 Model 改变状态
• Model 将新的数据发送到 View，用户获得反馈，全部通讯都是单向的

2.MVP:MVP 模式将 Controller 更名为 Presenter，同时改变了通讯方向。

• 各部分之间的通讯，都是双向的。
• View 与 Model 不发生联系，都经过 Presenter 传递。
• View 很是薄，不部署任何业务逻辑，称为"被动视图"（Passive View），即没有任何主动性，而 Presenter很是厚，全部逻辑都部署在那里。

3.MVVM

MVVM 模式将 Presenter 更名为 ViewModel，基本上与 MVP 模式彻底一致。

惟一的区别是，它采用双向绑定（data-binding）：View的变更，自动反映在 ViewModel，反之亦然。
这里面使用的设计模式有：观察者模式（发布订阅模式）、代理模式、工厂模式、单例模式。

在 MVVM 中，UI 是经过数据驱动的，数据一旦改变就会相应的刷新对应的 UI，UI 若是改变，也会改变对应的数据。这种方式就能够在业务处理中只关心数据的流转，而无需直接和页面打交道。ViewModel 只关心数据和业务的处理，不关心 View 如何处理数据，在这种状况下，View 和 Model 均可以独立出来，任何一方改变了也不必定须要改变另外一方，而且能够将一些可复用的逻辑放在一个 ViewModel 中，让多个 View 复用这个 ViewModel。

三种模式的区别

MVC 是世界上最低级、最原始的 UI 模式；MVC 就是在 V 上绑定 M，而后 C 负责处理界面整个提交请求，而且一遍遍地刷新整个 V。这种机制。因此 MVC 的标志是“初级、单向绑定、一遍遍刷新UI”。

MVP 则是深刻到程序的“骨髓”，UI设计模板与 MVP 事件定义绑定，让程序员能够捕获这么一个组件的丰富的事件，而后在事件处理过程当中又去从控件树上去直接访问其它全部控件，直接修改其属性。开发的精力很大程度上用在学习各类控件的内部机制上，学习曲线陡峭。因此MVP的标志是“复杂、事件驱动、精细到每个控件层次”。

MVVM 则是在 MVP 上的改进，它隔离了控件操做层，UI 模板上各类控件直接跟 VM 层的属性绑定，使得 VM 属性改变时自动更新 UI 控件，反之 UI 控件的值改变时又自动更新 VM 属性。这样编程的方式就不是去一大堆控件事件处理，而是写少许的 VM 属性更改行为代码。开发精力绝大部分都放在业务与UI的绑定上，而并不须要研究控件内部机制。

总结

MVC 只是把控件跟 M 绑定，一遍遍刷新 UI。而 MVP 则是把控件跟事件单向绑定，它的假设是程序员最爱写低级的代码来操做控件。而 MVVM 则是把控件跟 VM 双向绑定，它的假设是交互界面设计时最爱写高层次一些的声明来操做用户业务行为上的变化。

三种设计模式的应用

React使用的是MVC模式。全部MVC框架都是单向数据流的。

特点：

使用 Virtual DOM

提供了响应式 (Reactive) 和组件化 (Composable) 的视图组件。

将注意力集中保持在核心库，而将其余功能如路由和全局状态管理交给相关的库。

注：react 其实是一个“伪MVC”，它实际上是 MVP 的，可是它深知 MVP 模式的弊病，它明明是基于组件而且绑定了组件的 change 事件的，可是它有使用虚拟DOM的方式来一遍遍刷新UI控件（而且为了解决性能问题，有各类负责和诡异的避免全局刷新UI树的反模式操做）。因此虽然 React 自称为 MVC模式，可是实际上它是 MVP 的变种。

 

JQuery 是很是经典的 MVP 编程模式

 

Knockout、AngularJS、Vue 等能够看做是 MVVM 模式

Angular使用的MVVM模式。当触发UI事件，ajax请求或者 timeout 延迟，会触发脏检查。这时会调用 $digest 循环遍历全部的listener里的数据，判断当前值是否和先前的值有区别，若是检测到变化的话，会调用$watch 函数，最后把全部的变化所有更新，调用apply()方法把新的数据渲染到页面上。
优势：一次检测会收集全部的数据变化，而后统一更新 UI，大大减小了操做 DOM 的次数。
缺点：只要有ui或ajax或settimeout操做时就会进行检查，且当watcher之间相互影响的时候，更会触发屡次$digest循环，这样watcher一多，就会很影响性能。

注：AngularJS 其实在 MVVM 上作的不是很好，倾向于 MVP。只有 Knockout 是实现了经典的 MVVM 设计模式，并且有几个性能相关的特性（例如自动延迟 UI 刷新、自动抽稀无用的 UI 刷新操做）能够将性能提升（相对于其它许多 web 前端框架）至少几十倍。

Vue必定意义上算是React和Angular的集大成者。它吸收了MVVM的数据管理思想，同时应用了React的virtual Dom算法。它使用了双向数据绑定来知足开发的便捷，可是它不一样组件之间又使用单向数据流，来保证数据的可控性。它使用了不少Angular的指令语法，可是它革新了Angular的脏数据检查机制，使用数据劫持的方法来触法数据检查机制。它借鉴了React的组件化思想，大大增长了前端工程的结构规范化。

注：Vue 内部使用了 Object.defineProperty() 来实现双向绑定，经过这个函数能够监听到 set 和 get 的事件。