1-3:MVVM MVP 都是有MVC延伸而来的,都是之前比较老的框架,使用的是MVC.
MVP 是Jquery 框架的思想 MVVM 是Vue 思想 上图解释。
一:MVC
(1)View 传送指令到 Controller
(2)Controller 完成业务逻辑后,要求 Model 改变状态
(3)Model 将新的数据发送到 View,用户得到反馈。所有通信都是单向的。
二:MVP
(1)各部分之间的通信,都是双向的。
(2)View 与 Model 不发生联系,都通过 Presenter 传递。
(3)View 非常薄,不部署任何业务逻辑,称为"被动视图"(Passive View),即没有任何主动性,而 Presenter非常厚,所有逻辑都部署在那里。
Model 数据层(Ajax获取远程的数据)
Presenter 呈现层(业务逻辑相关的控制层) 控制器
View 视图层(DOM 展示) 视图
应用场景:当我试图点击提交的时候,改变。视图被操作的时候,控制器会处理(负责所有的业务逻辑),可以操作模型层,发送Ajax请求。控制器通过DOM来改变视图
视图层发送一个事件,交给控制器,控制器要么操作Ajax获取数据,要么直接操作DOM,控制器里面有业务逻辑,决定怎么修改页面的视图层,控制器是数据层和视图层的中转站。 大部分都是在操作DOM
三:MVVM:(Vue)
Model 有数据层
View 有视图层 负责显示数据
ViewModel(Vue 自带的) 层 取代Presenter
编码的时候,不需要关注ViewModel(因为这是内置的)
数据变化 页面跟着变化 VM 层来做的 Vue 就是VM 它可以监听数据改变了,触发视图层的改变,它也可以从监听视图层的事件,改变数据。
Model 有数据层
View 有视图层 负责显示数据
ViewModel(Vue 自带的) 层 取代Presenter
编码的时候,不需要关注ViewModel(因为这是内置的)
数据变化 页面跟着变化 VM 层来做的 Vue 就是VM 它可以监听数据改变了,触发视图层的改变,它也可以监听视图层的事件,改变数据。
// 面向数据编程
Object.defineProperty
虚拟DOM的机制
实现VM 架构体系
View 和 Model 之间并没有直接的联系,而是通过ViewModel进行交互,Model 和 ViewModel 之间的交互是双向的, 因此View数据的变化会同步到Model中,而Model 数据的变化也会立即反应到View 上。
四:组件化概念:
可以抽象的理解为,它们都是页面中的一部分,页面可以由拼积木组成的。