VUE雙向綁定原理是前端小伙伴很難繞過(guò)的一道面試題！本篇文章對(duì)其原理進(jìn)行了最大程度的精簡(jiǎn)，希望對(duì)面試VUE開(kāi)發(fā)的前端小伙伴有所幫助！我在這里將指令 v-改為z-，主要完成z-model、z-click、z-text以及z-html四個(gè)提令。
為了能夠快速讀懂代碼，首先要先弄明白以下三個(gè)概念：
1、觀察者（observer）：也就是數(shù)據(jù)監(jiān)聽(tīng)器，負(fù)責(zé)數(shù)據(jù)對(duì)象的所有屬性進(jìn)行監(jiān)聽(tīng)劫持，并將消息發(fā)送給訂閱者進(jìn)行數(shù)據(jù)更新
2、訂閱者（watcher）：負(fù)責(zé)接收數(shù)據(jù)的變化，更新視圖（view），數(shù)據(jù)與訂閱者是一對(duì)多的關(guān)系。
3、解析器（compile)：負(fù)責(zé)對(duì)你的每個(gè)節(jié)點(diǎn)元素指令進(jìn)行掃描和解析，負(fù)責(zé)相關(guān)指令的數(shù)據(jù)初始化及創(chuàng)造訂閱者
實(shí)現(xiàn)效果如下：
html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="lib/zhang.js"></script>
</head>
<body>
<div id="myApp">
<input type="button" value="加個(gè)！" z-on:click="fn">
<input type="text" style="width:400px" z-model="site">
<div z-text="site"></div>
<div z-html="site"></div>
</div>
</body>
<script>
var vm = new Zhang({
el: "#myApp",
data: {
site: "<a
},
methods: {
fn() {
this.site += "!";
}
}
})
</script>
</html>
zhang.js完整代碼如下，不足70行：
function Zhang(options){// 創(chuàng)建構(gòu)造函數(shù)Zhang,并接收對(duì)象結(jié)構(gòu)體options
this.$el=document.querySelector(options.el);// 指定掛載元素
this.$data=options.data;// 存放你的數(shù)據(jù)內(nèi)容
this.$methods=options.methods;// 存放設(shè)你的方法
this.binding={};// 所有數(shù)據(jù)相關(guān)的訂閱者對(duì)象都存放于此。最終結(jié)構(gòu)為{數(shù)據(jù)屬性:[訂閱者對(duì)象，訂閱者對(duì)象……]}
this.observer();// 調(diào)用觀察者，對(duì)數(shù)據(jù)進(jìn)行劫持
this.compile(this.$el);// 對(duì)元素指令進(jìn)行解析，訂閱者也是在此處創(chuàng)建的
}
Zhang.prototype.observer=function(){// 觀察者
var value="";// 定義用于存放數(shù)據(jù)屬性值的變量value
for(var key in this.$data){ // 遍歷數(shù)據(jù)對(duì)象
value=this.$data[key];// 對(duì)象屬性值
this.binding[key]=[];// 數(shù)據(jù)訂閱者初始化,是一個(gè)數(shù)組，
var binding=this.binding[key];// 用于存放本數(shù)據(jù)相關(guān)的所有訂閱者，初始為[]
Object.defineProperty(this.$data,key,{// 開(kāi)始設(shè)置劫持
get(){
return value;// 讀取值為value
},
set(v){// v為設(shè)置的值
if(v!==value){// 當(dāng)設(shè)置的值與當(dāng)前值不相等時(shí)
value=v;// 將讀取值更新為v
binding.forEach(watcher=>{
watcher.update();// 通知與本數(shù)據(jù)相關(guān)的訂閱者們進(jìn)行視圖更新
})
}
}
})
}
}
Zhang.prototype.compile=function(el){// 解析器
var nodes=el.children;// 獲得所有子節(jié)點(diǎn)
for(var i=0;i<nodes.length;i++){// 對(duì)子節(jié)點(diǎn)進(jìn)行遍歷
var node=nodes[i];// 具體節(jié)點(diǎn)
if(node.children.length>0)// 判斷是否具有子節(jié)點(diǎn)
this.compile(node);// 如果有子點(diǎn)進(jìn)行遞歸操作
if(node.hasAttribute("z-on:click")){// 該節(jié)點(diǎn)是否擁有z-on指令
var attrVal=node.getAttribute("z-on:click");// 得到指令對(duì)應(yīng)的方法名
// 為元素綁定click事件，事件方法為$methods下的方法，并將其this指向this.$data
node.addEventListener("click",this.$methods[attrVal].bind(this.$data))
}
if(node.hasAttribute("z-model")){// 該節(jié)點(diǎn)是否擁有z-model指令
var attrVal=node.getAttribute("z-model");// 獲得指令對(duì)應(yīng)的數(shù)據(jù)屬性
node.addEventListener("input",((i)=>{// 為指令添加input事件
this.binding[attrVal].push(new Watcher(node,"value",this,attrVal));// 為該數(shù)據(jù)添加訂閱者
return ()=>{
this.$data[attrVal]=nodes[i].value;// 更新$data的屬性值，會(huì)在觀察者中進(jìn)行劫持
}
})(i))
}
if(node.hasAttribute("z-html")){// 該節(jié)點(diǎn)是否擁有z-html指令
var attrVal=node.getAttribute("z-html");// 獲得指令對(duì)應(yīng)的數(shù)據(jù)屬性
this.binding[attrVal].push(new Watcher(node,"innerHTML",this,attrVal));
}
if(node.hasAttribute("z-text")){// 該節(jié)點(diǎn)是否擁有z-text指令
var attrVal=node.getAttribute("z-text");// 獲得指令對(duì)應(yīng)的數(shù)據(jù)屬性
this.binding[attrVal].push(new Watcher(node,"innerText",this,attrVal));
}
}
}
function Watcher(el,attr,vm,val){// 觀察者
this.el=el; // 指令所在的元素
this.attr=attr;// 綁定的屬性名
this.vm=vm; // 指令所在實(shí)例
this.val=val; // 指令的值
this.update(); // 更新視圖view
}
Watcher.prototype.update=function(){
this.el[this.attr]=this.vm.$data[this.val];
}
