MVC、MVP和MVVM

前言

在web1.0时代，并没有前端的概念，要写就就后端一起写了。前后端的代码杂糅到一起，比如php开发前后端，随后衍生出MVC开发模式和框架。

web1.0时代

起初的MVC

目标

数据、视图、以及业务逻辑控制分层；这样就可以把代码切割成功能独立的模块。

优点

使用了这种分层架构，实则清晰，代码易维护。

实现了一定程度的前后端的分离，但是还不是很清晰

起初的MVC仅限于服务端（后端），在服务器端渲染。前端只完成了后端开发中的view层（只是写模板文件，按照模版语法去写动态内容）；
Model层提供数据查询。
View层通过模板引擎来进行解析。解析成真正的HTML内容，浏览器去渲染

缺点

1. 前端页面开发效率不高

前端之前都是以静态页面出现的；很少的js交互；将代码交给后端程序员，后端在用模板语法对它进行动态化的改造，效率不高。

1. 前后端指责不清晰

一般都是一个程序员，前后端一起抓，要会的也很多，前端的兼容性，后端的语法等等。

web2.0时代

谷歌的Gmai的出现，ajax技术开始风靡全球，从而前后端的职责更加清晰了。前端可以通过Ajax与后端进行数据交互。

前端： 使用HTML、CSS、 Javascript（在Js中来撰写Ajax的请求），前端通过Ajax请求来获取数据，前端在进行交互和渲染。

后端：只需要把数据的基本结构返回给前端。

通过Ajax与后端服务器进行数据交互；前端只需要开发页面内容，数据由后端提供；ajax可以使页面实现部分刷新，减少服务端负载和流量消耗。这是才有了专职的前端来法工程师，同时前端的各种类库就慢慢发展起来，比如早前的JQuery

优点

流量消耗变小了，局部刷新；用户体验提升

缺点

开发模式承载了更复杂的业务需求，一旦应用规模增大，还是会导致难以维护，因为Html、Css、 JS还是杂糅在一起。从而我们需要设计模式和框架。
前端的MVC才会随之而来

MVC

MVC框架分为，前端MVC和后端MVC；
前端的MVC与后端的相似，模拟这后端的架构；都具有View、Controller和Model
Model： 模型负责保存应用数据，与后台数据进行同步
Controller：控制器负责业务逻辑，根据用户行为对Model数据进行修改
View： 负责视图的展示，将model中的数据可视化出来

来个模型瞅瞅～～
真够难画的，一图弄了10分钟。也没有多好看，应该是我不太用这个软件的问题，如果有错，那一定是我的错。哈哈哈哈哈

视图会通过事件去通知控制器，控制器去改模型，模型在尝试用某种办法通知视图去更新。
理论上可行，但是往往在实际开发中，并不会这样操作。因为开发过程并不灵活。比如： 一个小的事件操作，都必须经过这样的一个流程，那么开发就不便捷。

在实际中场景中，可能是另一种模式，这样的：
来～～～画图，算了用网上找的把。

这个模式看上去是方便一些，backbone.js框架就是这种模式；
View可以操作Model，Model改变也可以View；从而控制器层就显得很单薄，可有可无；（控制器里面就变成了简单的数据坚监听和调用）
缺点： 错误很难定位，数据混乱

`因为MVC框架出现的缺陷，从而有了MVVM框架。最早是AngularJS 用的MVVM框架模式。
MVP模式前端开发并不常见，但是在安卓原生开发中，开发者还是会考虑到它。`

MVP

MVP和MVC很接近，刚才看到了，可能会出现混乱的情况，MVP就 做了一个中间人，Presenter： 负责View和Model之间的数据流动，如果数据和视图非要交互就必须要通过中间人。

Presenter负责和Model进行双向交互，还有和View进行双向交互。
如果业务复杂一点，Presenter的体积增大、臃肿，就很难维护；

MVVM

MVVM可以分解成（Model-View-ViewModel）；ViewModel可以理解为在Presenter基础上的进阶。

ViewModel，主要是胶水层，核心思想是简化
1.数据发生变化，如何知道变化，通过数据响应式的机制，用某种机制知道这个数据的变化，自动的去响应数据的变化，自动去做更新；内部知道了数据的变化，不需要用户来操作。

1. 更新，以前做Dom操作，用JQ；数据变了要做Dom操作来更新（代码多，效率不高）；所以有虚拟Dom的方式去做更新，根据精准的diff算法来做比对；达到高效的结果。

`通过响应式和虚拟Dom来做到数据驱动。
如果数据变，直接视图更新；开发人员只需要修改数据，不用操作Dom；不需要操心其他事情。`

视图层如何改变数据层？
和之前一样，还是做数据监听，模版引擎会有事件处理的语法，通过这些语法，轻易的写出这些事件监听的方式

优点

ViewModel 通过实现一套数据响应式机制自动响应Model中数据变化
ViewModel 也有一套更新策略自动将数据转化为视图更新
通过事件监听响应View中用户交互修改Model中数据
从而使开发者专注于业务逻辑，兼顾开发效率和可维护性

总结

三个框架，反映了web前端发展的进程，职责都是：

1. 代码分层
2. 职责（前后端）划分
3. 解决维护性问题
4. 解决 Model和View的耦合问题

MVC 早起专注应用在后端；前端早起的应用BackBone.js.

优点：分层清晰（刚开始，算是比之前清晰了）
缺点： 数据流混乱，灵活性带来的维护性问题

MVP 模式是由MVC的进化形式，Persenter作为中间层负责MV通信，解决了两者耦合关系，但是中间层过于臃肿会导致维护问题

MVVM模式在前端领域目前更广泛。不仅解决了MV的耦合问题，解决了维护两者映射关系的大量繁杂代码和Dom操作代码；提高了开发效率。