MVVM设计模式的要点和中心思想
MVVM设计模式的要点和中心思想
-
MVVM设计模式介绍
· M – model，模型层
· V – view，视图层
· VM – viewmodel，视图模型- MVVM实现了数据的双向绑定:
- 当M层的数据进行了修改时，VM层会检测到变化，并通知V层进行对应的修改
- 修改V层则会通知M层进行数据的修改
- MVVM实现了视图与模型层的相互解耦
-
数据双向绑定的方式
①发布，订阅者方式
一般通过pub,sub的方式来实现数据和视图的绑定。
②脏值检查
angular.js就是通过脏值检测的方式对比数据是否有变更，来决定是否更新视图。类似于通过定时器来轮询检测数据是否变化
③数据劫持
vue.js是采用数据劫持结合发布者、订阅者模式的方法。通过object.defineProperty()来劫持各个属性的setter、getter，在数据变更时发布消息给订阅者，触发相应的监听回调。
简单来说MVVM 设计模式进行开发的时候，是面向数据编程。即极大程度的简化了代码量。这大量的代码，几乎都来自于以前的 DOM 操作。而我们只用专注于view层和model层就可以了。
3.vue实现思路
在这里主要讲一下vue的实现思路
· 实现一个Compile解析器，能够对模型层的指令进行解析，来变化视图层的数据。
· 实现一个Observer数据监听器，能够对所有的对象属性进行监听。
· 实现一个Watcher观察者，将Compile的解析结果和Observer所监听的对象建立连接，再Observer监听到数据变化时，接受通知，并更新DOM。
· 创建一个公共的入口对象，new时接收初始化的配置并且协调上面三个模块。也就是vue。
- 简单说一下发布、订阅者模式
发布-订阅者模式，也叫观察者模式。它定义了一种一对多的依赖关系，即当一个对象的状态发生改变的时候，所有依赖于它的对象都会得到通知并自动更新，解决了主体对象与观察者之间功能的耦合。
—— 例子：微信公众号
—— 订阅者：只需要要订阅微信公众号
—— 发布者(公众号):发布新文章的时候，推送给所有订阅者
—— 优点：
———— 解耦合
——————订阅者不用每次去查看公众号是否有新的文章
——————发布者不用关心谁订阅了它，只要给所有订阅者推送即可