1. MVC
MVC 的意思是, 软件可以分为三个部分。
视图(View):用户界面.
控制器(controller):业务逻辑
模型(Model): 数据保存
1.View 传送指令 到 Controller
2.Controller 完成业务逻辑后, 要求 Model 改变状态。
3.Model 将新的数据发送到 View. 用户得到反馈 ,实际项目中 往往会采用更灵活的方法。
MVC允许在不改变视图的情况下改变视图对用户输入的响应方式,用户对View的操作交给了Controller处理,在Controller中响应View的事件调用Model的接口对数据进行操作,一旦Model发生变化便通知相关视图进行更新。
如果前端没有框架,只使用原生的html+js,MVC模式可以这样理解。将html看成view;js看成controller,负责处理用户与应用的交互,响应对view的操作(对事件的监听),调用Model对数据进行操作,完成model与view的同步(根据model的改变,通过选择器对view进行操作);将js的ajax当做Model,也就是数据层,通过ajax从服务器获取数据。
2. MVP
MVP 模式将Controller 改名为 Presenter, 同时改变了通信方向。
1.各部分之间的通信, 都是双向的。
2.View 与 Model 不发生联系, 都通过 Presenter 传递。
3.View 非常薄, 不部署任何业务逻辑, 称为 被动视图,Presenter 非常厚, 所有逻辑都部署在那里。
3. MVVM
MVVM 模式, 将Presenter 改名为 ViewModel.
它采用双向数据绑定,(data-binding) : View 的变动。自动反映在 ViewModel, 反之亦然。
MVVM与MVC最大的区别就是:它实现了View和Model的自动同步,也就是当Model的属性改变时,我们不用再自己手动操作Dom元素,来改变View的显示,而是改变属性后该属性对应View层显示会自动改变。
这里我们拿典型的MVVM模式的代表,Vue实例中的data相当于Model层,而ViewModel层的核心是Vue中的双向数据绑定,即Model变化时VIew可以实时更新,View变化也能让Model发生变化。整体看来,MVVM比MVC精简很多,不仅简化了业务与界面的依赖,还解决了数据频繁更新的问题,不用再用选择器操作DOM元素。因为在MVVM中,View不知道Model的存在,Model和ViewModel也观察不到View,这种低耦合模式提高代码的可重用性。