MVVM模式的理解
MVVM
全称Model-View-ViewModel
是基于MVC
和MVP
体系结构模式的改进,MVVM
就是MVC
模式中的View
的状态和行为抽象化,将视图UI
和业务逻辑分开,更清楚地将用户界面UI
的开发与应用程序中业务逻辑和行为的开发区分开来。
自己的理解
数据改变只发生在以下两种情况:
- View层先改变,体现在用户手动改变网页中的元素,可以通过监听HTML事件来改变数据层
- Model层先改变,体现在按照业务需求改变Js中的数据(例如Ajax向后台通信拿到新的数据),可以通过
Object.defineProperty
来劫持数据的变化,监听者察觉到数据变化后把变化通知给发布者,再由发布者去更新网页中的数据,然后再释放变化。
因此,我们的简单实现需要以下几个模块:
observer
,负责监听js中数据的变化,其实就是监听Vue.$data
中的数据,如果发现数据变化通知发布者改变网页内容。watcher
,负责发布页面变化。compiler
,这是个隐藏的,虽然上面没有提到他,但它可以说是很重要的一环,它负责连接Model和View,它是一个模板解析器,负责处理拥有Vue特性的HTML元素,它把每一个需要特殊处理的HTMLElement
元素都记录了下来,并保存为watcher
,比如拥有v-model
的input
组件,v-on:click
的按钮,v-bind
的p
标签。当发布者watcher
要去更新视图的时候,直接调用自身的upload
函数即可。
描述
MVVM
模式简化了界面与业务的依赖,有助于将图形用户界面的开发与业务逻辑或数据模型的开发分离开来。在MVVM
中的ViewModel
作为绑定器将视图层UI
与数据层Model
链接起来,在Model
更新时,ViewModel
通过绑定器将数据更新到View
,在View
触发指令时,会通过ViewModel
传递消息到Model
,ViewModel
像是一个黑盒,在开发过程中只需要关注于呈现UI
的视图层以及抽象模型的数据层Model
,而不需要过多关注ViewModel
是如何传递的数据以及消息。
组成
Model
- 以面向对象来对对事物进行抽象的结果,是代表真实状态内容的领域模型。
- 也可以将
Model
称为数据层,其作为数据中心仅关注数据本身,不关注任何行为。
View
View
是用户在屏幕上看到的结构、布局和外观,即视图UI
。- 当
Model
进行更新的时候,ViewModel
会通过数据绑定更新到View
。
ViewModel
ViewModel
是暴露公共属性和命令的视图的抽象。ViewModel
中的绑定器在视图和数据绑定器之间进行通信。- 在
Model
更新时,ViewModel
通过绑定器将数据更新到View
,在View
触发指令时,会通过ViewModel
传递消息到Model
。
优点
- 低耦合: 视图
View
可以独立于Model
变化和修改,一个ViewModel
可以绑定到不同的View
上,当View
变化的时候Model
可以不变,当Model
变化的时候View
也可以不变。 - 可重用性: 可以把一些视图逻辑放在一个
ViewModel
里面,让很多View
重用这段视图逻辑。 - 独立开发: 开发人员可以专注于业务逻辑和数据的开发
Model
,设计人员可以专注于页面设计。 - 可测试: 界面素来是比较难于测试的,测试行为可以通过
ViewModel
来进行。
不足
- 对于过大的项目,数据绑定需要花费更多的内存。
- 数据绑定使得
Bug
较难被调试,当界面异常,可能是View
的代码有问题,也可能是Model
的代码有问题,数据绑定使得一个位置的Bug
可能被快速传递到别的位置,要定位原始出问题的地方就变得不那么容易了。
实例
未完成。。。。。。。。