关于mvc:MVCMVP和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 操作代码；进步了开发效率。