1.mvc
- Model：数据（存数据）。不应该为了适配某个view，在内部进行数据的解析和封装。
- View：视图（处理数据，显示数据）。他的设计应该是展示任意数据，不应该只适配某一个model，否则不利于view层的扩展。
- Controller：控制器(关联控制视图层和数据层，负责业务逻辑）将model处理完后的数据传递给view进行展示，维持数据的同步。
互动模式有两种：
第一种
image.png
1.用户触发View，View 传送指令到 Controller
- Controller 层经过对事件的处理完成相关业务逻辑，要求 Model 层改变数据状态
- Model 层再将新数据更新到 View层
第二种
image.png
- 直接通过Controller接受指令
- Controller完成业务逻辑后，要求model改变状态
- model将新的数据发送到view，用户得到反馈。
以上，所有的通信都是单向的。
M和C的关系是直接关系。某些场景下，view层直接采取观察者/发布订阅模式监听model层的变化。
缺点：
- view无法进行组件化。
- 大量的 DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验
- 可维护性差
2.MVP
image.png
MVC模式的model和view存在耦合，为了解决这个问题，MVP模式将View层和Model层解耦，之间的交互只能通过Presenter层。MVP把MVC种的Controller换成了Presenter，目的就是为了完全切断view和model之间的关系。由presenter充当桥梁，把view-model之间的通信完全隔离。
- 各部分之间的通信，都是双向的。
- View 与 Model 不发生联系，都通过 Presenter 传递
流程：
1.view层触发事件传递到P层去处理
2.P层去操作Model层，并且将数据返回给View层。
这个过程中，View 层和 Model 层没有直接联系。而 View 层不部署业务逻辑，除了展示数据和触发事件之外，其它时间都在等着 Presenter 层来更新自己，被称为「被动视图」。
缺点：
由于 Presenter 层负责了数据获取、数据处理、交互逻辑、UI 效果等等功能，所以 Presenter 层就变得强大起来，相应的，Model 层只负责数据存储，而 View 层只负责视图，Model 和 View 层的责任纯粹而单一，如果我们需要添加或修改功能模块，只需要修改 Presenter 层就够了。由于 Presenter 层需要调用 View 层的方法更新视图，Presenter 层直接持有 View 层导致了 Presenter 对 View 的依赖。
3.MVVM
MVVM 模式将程序分为三个部分：模型（Model）、视图（View）、视图模型（View-Model）。
ViewModel 层相当于MVP的 Presenter 层，负责绑定 Model 层和 View 层，相比于 MVP 增加了双向绑定机制。
image.png
和MVP唯一的区别是， ViewModel 层和 View 层采用双向绑定的形式（Data Binding），View 层的变动，将自动反映在 ViewModel 层，反之亦然。
参考：
MVC，MVP 和 MVVM 的图示 - 阮一峰的网络日志 (ruanyifeng.com)
MVC、MVP、MVVM的区别及联系 - 知乎 (zhihu.com)
网友评论