MVVM之双向数据绑定原理
双向数据绑定原理分析
十几年前，前端还处于刀耕火种的时代，作为前端开发者，对于DOM的操作那是家常便饭了，可是当要修改的规模上升至一个很高的程度时，维护的成本就变得非常巨大，而消耗的性能也自然变得更大。这是不科学的，也是不太友好的。当前端进入到现代社会文明时，对于DOM的操作就变得慎之又慎，因此虚拟DOM就孕育而生。我们把所有的DOM节点抽象为DOM树的同时，也享受到了这样做带来的开发维护高效，以及页面相应的高性能体验。 双向数据绑定就是虚拟DOM的最大受益者。也很大程度上解放了前端的开发困境。下面我们对数据双向绑定（MVVM）进行原理探索。实现mini版本的双向数据绑定。
HTML片段
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id='app'>
<h3>姓名</h3>
<p>{{name}}</p>
<h3>年龄</h3>
<p>{{age}}</p>
</div>
</body>
</html>JS片段
<script>
document.addEventListener('DOMContentLoaded', function(){
let opt = {el:'#app', data:{name:'填写中...', age:28}}
let vm = new Vue(opt)
setTimeout(() => {
opt.data.name = '许浩'
}, 2000);
}, false)
class Vue{
constructor(opt){
this.opt = opt
this.observe(opt.data)
let root = document.querySelector(opt.el)
this.compile(root)
}
// 为响应式对象 data 里的每一个 key 绑定一个观察者对象
observe(data){
Object.keys(data).forEach(key => {
let obv = new Observer()
data["_"+key] = data[key]
// 通过 getter setter 暴露 for 循环中作用域下的 obv，闭包产生
Object.defineProperty(data, key, {
get(){
Observer.target && obv.addSubNode(Observer.target);
return data['_'+key]
},
set(newVal){
obv.update(newVal)
data['_'+key] = newVal
}
})
})
}
// 初始化页面，遍历 DOM，收集每一个key变化时，随之调整的位置，以观察者方法存放起来
compile(node){
[].forEach.call(node.childNodes, child =>{
if(!child.firstElementChild && /\{\{(.*)\}\}/.test(child.innerHTML)){
let key = RegExp.$1.trim()
child.innerHTML = child.innerHTML.replace(new RegExp('\\{\\{\\s*'+ key +'\\s*\\}\\}', 'gm'),this.opt.data[key])
Observer.target = child
this.opt.data[key]
Observer.target = null
}
else if (child.firstElementChild)
this.compile(child)
})
}
}
// 常规观察者类
class Observer{
constructor(){
this.subNode = []
}
addSubNode(node){
this.subNode.push(node)
}
update(newVal){
this.subNode.forEach(node=>{
node.innerHTML = newVal
})
}
}
</script>
