之前就总看到这三个模型的相关博客,在学习Vue的过程中,也总会接触到MVVM架构,今天按自己的理解写这篇博客
1.MVC
Model:数据层,对外暴露操作数据的接口
View:视图层,依赖Model中的数据,
Controller:控制器,操作Model中的数据
实现方式:观察者模式,View 依赖 Model,Model 不依赖 View,Model 变化之后,需要通知依赖他的 View(通知方式可以是调用 View 提供好的方法)
流程:View—>Controller—>Model—>View
MVC的应用场景:Backbone.js,Spine.js
优点: 耦合性低,视图层和业务层分离,允许更改视图层代码而不用重新编译模型和控制器代码;部署快;可维护性高
缺点: 不适合小型,中等规模的应用程序;增加系统结构和实现的复杂性
参考👉MVC的优缺点
2.MVP
Model:修改数据
View:更新界面
Presenter:通过 Model.js 对外暴露的接口操作数据;调用 HTML 提供的方法更新页面
Presenter分离了数据和视图,是Model与View的桥梁,MVP架构核心在Presenter。
流程:View—>Presenter—>Model—>Presenter—>View
MVP的应用场景:jQuery
优点: 模块职责划分明显,层次清晰,接口功能清晰;Model层和View层分离,解耦,修改View而不影响Model;功能复用性高
缺点: MVP中接口过多,额外的代码复杂度和学习成本
3.MVVM
Model:修改数据
View:界面
ViewModel:操作数据,响应请求
MVVM是MVP的改进版,Vue是典型的MVVM架构。template属于View,组件里面的js逻辑属于ViewModel层,Vue实例中的data属于Model
流程:View—>ViewModel—>Model—>ViewModel—>View
MVVM的应用场景:Vue,angular
优点: MVVM分离了视图和模型,降低代码耦合,提高视图或者逻辑的重用性。在MVVM设计模式中,我们只需要关注视图层和数据层,更多的精力需要花在数据层上,不需要我们自己操作DOM。
缺点: 比较难调Bug,因为MVVM使用了双向数据绑定的模式,当页面异常时,可能是View的代码有问题,也可能是Model代码有问题,数据绑定会让一个位置的bug很快传到别的地方,所以要定位原始bug位置不太容易。
4.MVC与MVP的区别
- MVC中Model可以与View直接交互,而MVP中Model与View完全解耦,数据和视图直接的交互全交给Presenter
- MVC中Model与View耦合在一起,如果View中方法改变,Model也要随之改变;而MVP通过Presenter实现UI交互逻辑,若UI有变化,Model不需要改动,只需要修改Presenter
5.MVP与MVVM的区别
可以参考这篇👉mvp和mvvm的区别
关于三种架构更详细的解释👉JavaScript 中的 MVC、MVP、MVVM