MVC-MVP-MVVM框架模式分析

MVC（Model-View-Controller）

MVC 架构模式图（经典版）

注：实际上，Model和View永远不能相互通讯，只能经过Controller传递；上图只是MVC模式的经典图。

MVC通常流程：
用户操做->View（负责接收用户的输入操做）->Controller（业务逻辑处理）->Model（数据持久化）->View（将结果反馈给View），单向通讯。

各模块功能：
视图（View）：用户界面。（传送指令到 Controller）
控制器（Controller）：业务逻辑 （完成业务逻辑后，要求 Model 改变状态）

• 做用：负责将 View 中用户的动做传达给 Model，将 Model 的数据经过 View 展示出来
• 负责：显示界面、响应用户的操做、网络请求以及与 Model 交互

模型（Model）：数据保存、数据持久化。（将新的数据发送到 View，用户获得反馈）

缺点：
1.Controller逻辑复杂，难以维护。
2.Controller 和 View 紧耦合，没法测试。

MVP（Model-View-Presenter）

特色：

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

MVVM（Model-View-ViewModel）

各模块功能：
Model【模型】：指的是后端传递的数据。
View【视图】：指的是所看到的页面。
ViewModel【视图模型】：mvvm模式的核心，它是链接view和model的桥梁。
ViewModel 负责:
1.校验用户输入
2.网络请求
3.展现层的逻辑，好比格式化字符串
4.其余不能放入 Model，与 View 无关的逻辑
做用：
一、将【模型】转化成【视图】，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。
二、将【视图】转化成【模型】，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听。
这两个转化的实现过程，咱们称之为数据的双向绑定

详细流程图：

注：
1.视图和模型是不能直接通讯的。
2.与MVC相比，把原来View和Controller层的业务逻辑和页面逻辑等剥离出来放到ViewModel层。

在vue前端框架中，MVVM的应用： ViewModel一般要实现一个observer观察者，当数据发生变化，ViewModel可以监听到数据的这种变化，而后通知到对应的视图作自动更新；而当用户操做视图，ViewModel也能监听到视图的变化，而后通知数据作改动，这实际上就实现了数据的双向绑定。而且MVVM中的View 和 ViewModel能够互相通讯