1、如何理解MVC、MVP、MVVM模式?
MVC(Model、view、Controller)
- 视图(View):用户界面。
- 控制器(Controller):业务逻辑
- 模型(Model):数据保存
M是指业务数据, V是指用户界面, C则是控制器. 在具体的业务场景中, C作为M和V之间的连接, 负责获取输入的业务数据, 然后将处理后的数据输出到界面上做相应展示, 另外, 在数据有所更新时, C还需要及时提交相应更新到界面展示. 在上述过程中, 因为M和V之间是完全隔离的, 所以在业务场景切换时, 通常只需要替换相应的C, 复用已有的M和V便可快速搭建新的业务场景. MVC因其复用性, 大大提高了开发效率, 现已被广泛应用在各端开发中。可以看下图加深理解:
MVC的缺点在于并没有区分业务逻辑和业务展示, 这对单元测试很不友好。
MVP(model、view、presenter)
针对以上缺点做了优化, 它将业务逻辑和业务展示也做了一层隔离, 对应的就变成了MVCP。
M和V功能不变, 原来的C现在只负责布局, 而所有的业务逻辑全都转移到了P层。P层处理完了业务逻辑,如果要更改view的显示,那么可以通过回调来实现,这样可以减轻耦合,同时可以单独测试P层的业务逻辑。可以看下图加深理解:
MVP的变种及定义比较多,但是最终广为人知的是Martin Fowler 的发表的关于Presentation Model描述,也就是下面将要介绍的MVP。具体看下面这篇文章:Martin Fowler 发表的 Presentation Model 文章
MVP从视图层中分离了行为(事件响应)和状态(属性,用于数据展示),它创建了一个视图的抽象,也就是presenter层,而视图就是P层的『渲染』结果。P层中包含所有的视图渲染需要的动态信息,包括视图的内容(text、color)、组件是否启用(enable),除此之外还会将一些方法暴露给视图用于某些事件的响应。
MVVM(Model-View-ViewModel)
- View:界面
- Model:数据模型
- ViewModel:作为桥梁负责沟通 View 和 Model
优点:
- 分离视图 (View) 和模型 (Model),降低代码耦合,提高视图或逻辑的重用性
- 自动更新 DOM,避免了对 DOM 的频繁操作
- 提高可测试性
缺点:
- Bug 难以调试