MVC&MVVM
双向绑定原理
观察者模式
虚拟DOM
(此文章用来先占坑,后面会更新详细一些)
MVC&MVVM
先看这样一张图
MVC的思想:一句话描述就是controller负责将model的数据用view显示出来
但是这样有一些问题就是:
1.开发者需要大量调用相同的DOM API,操作冗余,代码难以维护
2.降低页面渲染性能,
3.当Model层变化,开发者需要主动更新到view,当用户页面操作导致数据发生变化,开发者也需要同步到model中。
而MVVM 出现了,它的核心思想就是通过双向数据绑定原理把view层和model层连接起来,它俩之间的数据同步工作完全是自动的,无需人为干涉,因此开发者只需要关注业务逻辑,不需要手动操作DOM,不需要关注数据状态的同步问题,复杂的数据状态维护全部由MVVM统一管理。
区别:
MVC也是一种设计思想,主要就是MVC中的Controlled演变成MVVM中的ViewModel。MVVM主要解决了MVC中大量的DOM操作使页面渲染性能降低,加载速度变慢,影响用户体验。和当Model频繁发送变化,开发者需要主动更新到View。
双向数据绑定原理
利用Object.defineProperty()对数据进行劫持,设置一个监听器Observer,用来监听所有属性,如果属性上发生变化了,就需要告诉订阅者Watcher去更新数据,最后指令解析器Compile解析对应的指令,进而会执行对应的更新函数,从而更新视图,实现双向绑定。
观察者模式(Observer)
观察者模式又被称为发布-订阅者模式或消息机制,它定义了对象间的一对多的依赖关系,只要一个对象的状态改变时,所有依赖于它的对象都得到通知并被自动更新,解决了主体对象与观察者之间功能的耦合。
平常对DOM的事件绑定就是一个非常典型的发布-订阅者模式,我们需要监听用户点击按钮这个动作,所以订阅按钮上的click
事件,只要按钮被点击,就会向订阅者发布这个消息,然后做相应操作。
大致的结构是这样
const Observer = (function(){
let _message = {
}