1.mvc
- Model:数据(存数据)。不应该为了适配某个view,在内部进行数据的解析和封装。
- View:视图(处理数据,显示数据)。他的设计应该是展示任意数据,不应该只适配某一个model,否则不利于view层的扩展。
- Controller:控制器(关联控制视图层和数据层,负责业务逻辑)将model处理完后的数据传递给view进行展示,维持数据的同步。
互动模式有两种:
第一种
1.用户触发View,View 传送指令到 Controller
- Controller 层经过对事件的处理完成相关业务逻辑,要求 Model 层改变数据状态
- Model 层再将新数据更新到 View层
第二种
- 直接通过Controller接受指令
- Controller完成业务逻辑后,要求model改变状态
- model将新的数据发送到view,用户得到反馈。
以上,所有的通信都是单向的。
M和C的关系是直接关系。某些场景下,view层直接采取观察者/发布订阅模式监听model层的变化。
缺点:
- view无法进行组件化。
- 大量的 DOM 操作使页面渲染性能降低,加载速度变慢,影响用户体验
- 可维护性差
2.MVP
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 增加了双向绑定机制。
和MVP唯一的区别是, ViewModel 层和 View 层采用双向绑定的形式(Data Binding),View 层的变动,将自动反映在 ViewModel 层,反之亦然。
参考:
MVC,MVP 和 MVVM 的图示 - 阮一峰的网络日志 (ruanyifeng.com)
MVC、MVP、MVVM的区别及联系 - 知乎 (zhihu.com)