什么是MVVM模式
MVVM是由MVC倒退而来 ， 在传统的MVC模式中，Model是数据层，View层只负责展现数据，Controller层负责数据解析，然而对于简单的数据结构，持续依照MVC的设计思路，将数据解析的局部放到了Controller外面，那么Controller就将变得相当臃肿（Controller被设计进去并不是解决数据解析的），为此开发者们专门为数据解析创立出了一个新的类：ViewModel，这就是MVVM模式
当用户操作 View(视图)，ViewModal 感知到变动，而后告诉 Modal 产生相应扭转；反之当 Modal(数据) 产生扭转，ViewModal 也能感知到变动，使 View 作出相应更新。
如何实现MVVM模式
实现mvvm次要蕴含两个方面，数据变动更新视图，视图变动更新数据：
关键点在于data如何更新view，因为view更新data其实能够通过事件监听即可，比方input标签监听 ‘input’ 事件就能够实现了。所以咱们着重来剖析下，当数据扭转，如何更新视图的。
实现数据双向绑定的办法有很多：
其中比拟有名的就是vue的数据劫持形式了； vue3版本之前是采纳数据劫持联合发布者-订阅者模式的形式来实现数据的双向绑定;
设计模式–公布订阅
公布订阅模式定义了一种一对多的依赖关系，让多个订阅者对象同时监听某一个主题对象。这个主题对象在本身状态变动时，会告诉所有订阅者对象，使它们可能自动更新本人的状态。
数据劫持
所谓数据劫持，指的是在拜访或者批改对象的某个属性时，通过一段代码拦挡这个行为，进行额定的操作或者批改返回后果。比拟典型的是 Object.defineProperty() 和 ES2015 中新增的 Proxy 对象。
Object.defineProperty()
它能够来管制一个对象属性的一些特有操作，比方读写权、是否能够枚举，这里咱们次要先来钻研下它对应的两个形容属性get和set
var o = {};
var bValue;
Object.defineProperty(o, "b", {
get : function(){
console.log('get')
return bValue;
},
set : function(newValue){
console.log('set')
bValue = newValue;
},
enumerable : true,
configurable : true
});
o.b = 38; //触发对象o的set
console.log(o.b)//触发对象o的getapi参考：mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty
基于数据劫持mvvm的双向绑定，必须要实现以下几点：
数据监听器（observer）
对data中的所有数据做监听，通过Object.defineProperty,调用getter和setter办法对数据进行劫持，产生数据调用是触发get办法，产生数据扭转时触发set办法；
/**监听数据变动**/
observer(data) {
Object.keys(data).forEach(key => {
let value = data[key];
let dep = new Dep();
Object.defineProperty(data, key, {
configurable: true,
enumerable: true,
get() {
//数据调用触发get，一旦调用数据就会增加到订阅核心
if (Dep.target) {
dep.addSub(Dep.target);
}
return value;
},
set(newValue) {
console.log("set", newValue);
if (newValue !== value)
value = newValue;
//一旦数据扭转，告诉订阅者
dep.notify(newValue);
}
})
})
}指令解析器（compile）
获取调用相应数据的节点（文本节点或者是标签节点）并替换最新的数据，例如{{}}；
循环遍历页面所有节点，获取到的所有文本节点或者是标签，判断以后是文本节点还是标签，拿到节点数据创立一个订阅对象；
compile(el) {
// 获取须要挂载的根节点
let element = document.querySelector(el);
this.compileNode(element);
}
compileNode(element) {
// 模板解析
let childNodes = element.childNodes;
// console.log(childNodes);
Array.from(childNodes).forEach(node => {
//如果是 文本节点
if (node.nodeType == 3) {
//文本
// console.log(node);
let nodeContent = node.textContent;
// console.log(nodeContent);
let reg = /\{\{\s*(\S*)\s*\}\}/;
if (reg.test(nodeContent)) {
// console.log("("+RegExp.$1+")");
node.textContent = this._data[RegExp.$1];
// 创立一个订阅者
new Watcher(this, RegExp.$1, newValue => {
node.textContent = newValue;
});
}
}
else if (node.nodeType == 1) {
// 如果是标签
let attrs = node.attributes;
// console.log(attrs);
Array.from(attrs).forEach(attr => {
// console.log(attr);
let attrName = attr.name;
let attrValue = attr.value;
// console.log(attrName);
if (attrName.indexOf("k-") == 0) {
attrName = attrName.substr(2);
console.log(attrName);
if (attrName == "model") {
node.value = this._data[attrValue];
}
node.addEventListener("input", e => {
// console.log(e.target.value);
this._data[attrValue] = e.target.value;
})
// 创立一个订阅者
new Watcher(this, attrValue, newValue => {
node.value = newValue;
});
}
})
}
if (node.childNodes.length > 0) {
this.compileNode(node);
}
})
}数据订阅核心（Dep）
性能是增加订阅者和告诉订阅者，具备存储和散发性能，发布者和订阅者都须要依赖订阅核心，任何产生调用的数据都会被增加到订阅两头，并且告诉相应的订阅者；
//订阅核心，性能是增加订阅者和告诉订阅者
class Dep {
constructor() {
this.subs = [];
}
addSub(sub) {
this.subs.push(sub);
}
notify(newValue) {
this.subs.forEach(v => {
v.update(newValue);
})
}
}订阅者（Watcher）
初始化时，所有调用的节点都会创立成一个订阅者，当数据发生变化后触发相应的update更新回调函数；
//初始化new出n多个watcher对象，并传入对应的回调
//订阅者
class Watcher {
constructor(vm, exp, cb) {
//缓存本人 防止反复调用反复增加
Dep.target = this;
vm._data[exp];
this.cb = cb;
Dep.target = null
}
update(newValue) {
console.log("更新了", newValue);
this.cb(newValue);
}
}整合Observer、Compile和Watcher三者，通过Observer来监听本人的model数据变动，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变动 -> 视图更新；视图交互变动(input) -> 数据model变更的双向绑定成果
Proxy数据代理
Proxy 在 ES2015 标准中被正式退出，在数据劫持这个问题上，Proxy 能够被认为是 Object.defineProperty() 的升级版。外界对某个对象的拜访，都必须通过这层拦挡。因而它能够劫持整个对象，并返回一个新对象，而不是 对象的某个属性，所以也就不须要对 keys 进行遍历。然而仍旧不反对对象嵌套，反对数组的push，pop，shift
proxy的构造函数：
var proxy = new Proxy(target, handler);其中有两个参数：
target是用Proxy包装的被代理对象(能够是任何类型的对象，包含原生数组，函数，甚至另一个代理)。
handler是一个对象，其申明了代理target 的一些操作，其属性是当执行一个操作时定义代理的行为的函数。
var arr = [1,2,3]
var handle = {
//target指标对象 key属性名 receiver理论承受的对象
get(target,key,receiver) {
console.log(`get ${key}`)
// Reflect相当于映射到指标对象上
return Reflect.get(target,key,receiver)
},
set(target,key,value,receiver) {
console.log(`set ${key}`)
return Reflect.set(target,key,value,receiver)
}
}
//arr要拦挡的对象，handle定义拦挡行为
var proxy = new Proxy(arr,handle)
proxy.push(4)
但新规范同样也有劣势，那就是：
- Proxy 的兼容性不如 Object.defineProperty() (caniuse 的数据表明，QQ 浏览器和百度浏览器并不反对 Proxy，这对国内挪动开发来说预计无奈承受，但两者都反对 Object.defineProperty())
- 不能应用 polyfill 来解决兼容性
小结
数据绑定只是MVVM模型中的冰山一角，比方在代码实现过程中订阅者更新数据是间接批改DOM的，是否能够将高性能耗费的DOM操作合并在一起解决来晋升效率，这就引出了一系列咱们经常听到的Virtual-DOM(虚构DOM树)、 diff 操作等等，如果对三大框架的底层原理感兴趣，也能够持续摸索。
发表回复