資訊專欄INFORMATION COLUMN
摘要：兼容性更詳細的可以看一下實現(xiàn)思路系列的雙向綁定，關鍵步驟實現(xiàn)數(shù)據(jù)監(jiān)聽器，用重寫數(shù)據(jù)的，值更新就在中通知訂閱者更新數(shù)據(jù)。
前言
現(xiàn)在的前端面試不管你用的什么框架，總會問你這個框架的雙向綁定機制，有的甚至要求你現(xiàn)場實現(xiàn)一個雙向綁定出來，那對于沒有好好研究過這方面知識的同學來說，當然是很難的，接下來本文用160行代碼帶你實現(xiàn)一個極簡的雙向綁定機制。如果喜歡的話可以點波贊/關注，支持一下，希望大家看完本文可以有所收獲。
本文是在面試題：你能寫一個Vue的雙向數(shù)據(jù)綁定嗎？的基礎上仔細研究+改動，并添加了詳細注釋，而成的。
個人博客了解一下：obkoro1.com效果GIF： demo地址：
codepen:仿Vue極簡雙向綁定
Github:仿Vue極簡雙向綁定
了解Object.defineProperty()：這個API是實現(xiàn)雙向綁定的核心，最主要的作用是重寫數(shù)據(jù)的get、set方法。
使用方式： let obj = {
singer: "周杰倫"
};
let value = "青花瓷";
Object.defineProperty(obj, "music", {
// value: "七里香", // 設置屬性的值 下面設置了get set函數(shù) 所以這里不能設置
configurable: false, // 是否可以刪除屬性 默認不能刪除
// writable: true, // 是否可以修改對象 下面設置了get set函數(shù) 所以這里不能設置
enumerable: true, // music是否可以被枚舉 默認是不能被枚舉(遍歷)
// ☆ get,set設置時不能設置writable和value，要一對一對設置，交叉設置/同時存在 就會報錯
get() {
// 獲取obj.music的時候就會調用get方法
// let value = "強行設置get的返回值"; // 打開注釋 讀取屬性永遠都是‘強行設置get的返回值’
return value;
},
set(val) {
// 將修改的值重新賦給song
value = val;
}
});
console.log(obj.music); // 青花瓷
delete obj.music; // configurable設為false 刪除無效
console.log(obj.music); // 青花瓷
obj.music = "聽媽媽的話";
console.log(obj.music); // 聽媽媽的話
for (let key in obj) {
// 默認情況下通過defineProperty定義的屬性是不能被枚舉(遍歷)的
// 需要設置enumerable為true才可以 否則只能拿到singer 屬性
console.log(key); // singer, music
}
示例demo：
對，這里有個demo。
畫一下重點：get,set設置時不能設置writable和value, 他們是一對情侶的存在，交叉設置或同時存在,會報錯
通過defineProperty設置的屬性，默認不能刪除，不能遍歷，當然你可以通過設置更改他們。
get、set 是函數(shù)，可以做的事情很多。
兼容性：IE 9,Firefox 4, Chorme 5,Opera 11.6,Safari 5.1
更詳細的可以看一下MDN
實現(xiàn)思路： mvvm系列的雙向綁定，關鍵步驟：實現(xiàn)數(shù)據(jù)監(jiān)聽器Observer，用Object.defineProperty()重寫數(shù)據(jù)的get、set，值更新就在set中通知訂閱者更新數(shù)據(jù)。
實現(xiàn)模板編譯Compile，深度遍歷dom樹，對每個元素節(jié)點的指令模板進行替換數(shù)據(jù)以及訂閱數(shù)據(jù)。
實現(xiàn)Watch用于連接Observer和Compile，能夠訂閱并收到每個屬性變動的通知，執(zhí)行指令綁定的相應回調函數(shù)，從而更新視圖。
mvvm入口函數(shù)，整合以上三者。
流程圖：這部分講的很清楚，現(xiàn)在有點懵逼也沒關系，看完代碼，自己copy下來玩一玩之后，回頭再看實現(xiàn)思路，相信會有收獲的。
具體代碼實現(xiàn)： html結構：{{ testData1 }}
{{ testData2 }}
看到這個模板，相信用過Vue的同學都不會陌生。
調用方法：采用類Vue方式來使用雙向綁定：
window.onload = function () {
var app = new myVue({
el: "#app", // dom
data: { // 數(shù)據(jù)
testData1: "仿Vue",
testData2: "極簡雙向綁定",
name: "OBKoro1"
}
})
}
創(chuàng)建myVue函數(shù)：
實際上這里是我們實現(xiàn)思路中的第四步，用于整合數(shù)據(jù)監(jiān)聽器this._observer()、指令解析器this._compile()以及連接Observer和Compile的_watcherTpl的watch池。
function myVue(options = {}) { // 防止沒傳，設一個默認值
this.$options = options; // 配置掛載
this.$el = document.querySelector(options.el); // 獲取dom
this._data = options.data; // 數(shù)據(jù)掛載
this._watcherTpl = {}; // watcher池
this._observer(this._data); // 傳入數(shù)據(jù)，執(zhí)行函數(shù)，重寫數(shù)據(jù)的get set
this._compile(this.$el); // 傳入dom，執(zhí)行函數(shù)，編譯模板 發(fā)布訂閱
};
Watcher函數(shù):
這是實現(xiàn)思路中的第三步，因為下方數(shù)據(jù)監(jiān)聽器_observer()需要用到Watcher函數(shù)，所以這里就先講了。
像實現(xiàn)思路中所說的，這里起到了連接Observer和Compile的作用：
在模板編譯_compile()階段發(fā)布訂閱
在賦值操作的時候，更新視圖
// new Watcher() 為this._compile()發(fā)布訂閱+ 在this._observer()中set(賦值)的時候更新視圖
function Watcher(el, vm, val, attr) {
this.el = el; // 指令對應的DOM元素
this.vm = vm; // myVue實例
this.val = val; // 指令對應的值
this.attr = attr; // dom獲取值，如value獲取input的值 / innerHTML獲取dom的值
this.update(); // 更新視圖
}
Watcher.prototype.update = function () {
this.el[this.attr] = this.vm._data[this.val]; // 獲取data的最新值 賦值給dom 更新視圖
}
沒有看錯，代碼量就這么多，可能需要把整個代碼連接起來，多看幾遍才能夠理解。
實現(xiàn)數(shù)據(jù)監(jiān)聽器_observer()：實現(xiàn)思路中的第一步，用Object.defineProperty()遍歷data重寫所有屬性的get set。
然后在給對象的某個屬性賦值的時候，就會觸發(fā)set。
在set中我們可以監(jiān)聽到數(shù)據(jù)的變化，然后就可以觸發(fā)watch更新視圖。
myVue.prototype._observer = function (obj) {
var _this = this;
Object.keys(obj).forEach(key => { // 遍歷數(shù)據(jù)
_this._watcherTpl[key] = { // 每個數(shù)據(jù)的訂閱池()
_directives: []
};
var value = obj[key]; // 獲取屬性值
var watcherTpl = _this._watcherTpl[key]; // 數(shù)據(jù)的訂閱池
Object.defineProperty(_this._data, key, { // 雙向綁定最重要的部分 重寫數(shù)據(jù)的set get
configurable: true, // 可以刪除
enumerable: true, // 可以遍歷
get() {
console.log(`${key}獲取值：${value}`);
return value; // 獲取值的時候 直接返回
},
set(newVal) { // 改變值的時候 觸發(fā)set
console.log(`${key}更新：${newVal}`);
if (value !== newVal) {
value = newVal;
watcherTpl._directives.forEach((item) => { // 遍歷訂閱池
item.update();
// 遍歷所有訂閱的地方(v-model+v-bind+{{}}) 觸發(fā)this._compile()中發(fā)布的訂閱Watcher 更新視圖
});
}
}
})
});
}
實現(xiàn)Compile 模板編譯
這里是實現(xiàn)思路中的第三步，讓我們來總結一下這里做了哪些事情：
首先是深度遍歷dom樹，遍歷每個節(jié)點以及子節(jié)點。
將模板中的變量替換成數(shù)據(jù)，初始化渲染頁面視圖。
把指令綁定的屬性添加到對應的訂閱池中
一旦數(shù)據(jù)有變動，收到通知，更新視圖。
myVue.prototype._compile = function (el) {
var _this = this, nodes = el.children; // 獲取app的dom
for (var i = 0, len = nodes.length; i < len; i++) { // 遍歷dom節(jié)點
var node = nodes[i];
if (node.children.length) {
_this._compile(node); // 遞歸深度遍歷 dom樹
}
// 如果有v-model屬性，并且元素是INPUT或者TEXTAREA，我們監(jiān)聽它的input事件
if (node.hasAttribute("v-model") && (node.tagName = "INPUT" || node.tagName == "TEXTAREA")) {
node.addEventListener("input", (function (key) {
var attVal = node.getAttribute("v-model"); // 獲取v-model綁定的值
_this._watcherTpl[attVal]._directives.push(new Watcher( // 將dom替換成屬性的數(shù)據(jù)并發(fā)布訂閱 在set的時候更新數(shù)據(jù)
node,
_this,
attVal,
"value"
));
return function () {
_this._data[attVal] = nodes[key].value; // input值改變的時候 將新值賦給數(shù)據(jù) 觸發(fā)set=>set觸發(fā)watch 更新視圖
}
})(i));
}
if (node.hasAttribute("v-bind")) { // v-bind指令
var attrVal = node.getAttribute("v-bind"); // 綁定的data
_this._watcherTpl[attrVal]._directives.push(new Watcher( // 將dom替換成屬性的數(shù)據(jù)并發(fā)布訂閱 在set的時候更新數(shù)據(jù)
node,
_this,
attrVal,
"innerHTML"
))
}
var reg = /{{s*([^}]+S)s*}}/g, txt = node.textContent; // 正則匹配{{}}
if (reg.test(txt)) {
node.textContent = txt.replace(reg, (matched, placeholder) => {
// matched匹配的文本節(jié)點包括{{}}, placeholder 是{{}}中間的屬性名
var getName = _this._watcherTpl; // 所有綁定watch的數(shù)據(jù)
getName = getName[placeholder]; // 獲取對應watch 數(shù)據(jù)的值
if (!getName._directives) { // 沒有事件池 創(chuàng)建事件池
getName._directives = [];
}
getName._directives.push(new Watcher( // 將dom替換成屬性的數(shù)據(jù)并發(fā)布訂閱 在set的時候更新數(shù)據(jù)
node,
_this,
placeholder,
"innerHTML"
));
return placeholder.split(".").reduce((val, key) => {
return _this._data[key]; // 獲取數(shù)據(jù)的值 觸發(fā)get 返回當前值
}, _this.$el);
});
}
}
}
完整代碼&demo地址
GitHub完整代碼
codepen:仿Vue極簡雙向綁定
Github:仿Vue極簡雙向綁定
如果覺得還不錯的話，就給個Star??鼓勵一下我吧~
結語本文只是一個簡單的實現(xiàn)雙向綁定的方法，主要目的是幫助各位同學理解mvvm框架的雙向綁定機制，也并沒有很完善，這里還是有很多缺陷，比如：沒有實現(xiàn)數(shù)據(jù)的深度對數(shù)據(jù)進行get、set等。希望看完本文，大家能有所收獲。
希望看完的朋友可以點個喜歡/關注，您的支持是對我最大的鼓勵。個人blog and 掘金個人主頁，如需轉載，請放上原文鏈接并署名。碼字不易，感謝支持！本人寫文章本著交流記錄的心態(tài)，寫的不好之處，不撕逼，但是歡迎指點。
如果喜歡本文的話，歡迎關注我的訂閱號，漫漫技術路，期待未來共同學習成長。
以上2018.6.24
參考資料：剖析Vue原理&實現(xiàn)雙向綁定MVVM
面試題：你能寫一個Vue的雙向數(shù)據(jù)綁定嗎？
不好意思！耽誤你的十分鐘，讓MVVM原理還給你
文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://www.ezyhdfw.cn/yun/95662.html
摘要：的雙向數(shù)據(jù)綁定方法我覺得很巧妙我是尤雨溪腦殘粉為什么選美團外賣美團外賣項目估計差不多能夠設計到大部分技術點，不包括服務端渲染作為練習夠用了。平日里我點外賣一直用美團。用多了可能也比較了解美團外賣吧。 前言 很多初學者尤其是像我這樣的公司有且只有一個前端的時候，硬著頭皮去學習一門新框架，周圍無人幫忙，平日里遇到問題只能求助于思否，百度，google。點擊我的個人頭像去看我的提問你們就知道...
摘要：仿滴滴出行項目最近，各大社區(qū)出現(xiàn)很多小伙伴的項目，趁著這股熱潮我也用擼了一個滴滴出行的項目?？墒牵髞碓谑謾C上發(fā)現(xiàn)，輸入的時候居然調不出軟鍵盤，寫項目的時候沒考慮到設備問題，簡直是大大的失誤。也就是說可以在組件內部進行請求，不需要提交。 Vue2.0 仿滴滴出行項目 最近，各大社區(qū)出現(xiàn)很多小伙伴的vue項目，趁著這股熱潮我也用vue擼了一個滴滴出行的項目。 效果預覽 showImg(h...
摘要：目標你好上面是最常見的的用法現(xiàn)在我就只實現(xiàn)一件事改變執(zhí)行這一句時頁面會及時更新開始動工第一步先聲明一個類我們一開始定義的屬性是定義在中的我們想要這樣賦值的時候和的相關聯(lián)需要中間做一個代理修改代碼執(zhí)行函數(shù)實現(xiàn)代理觀察的屬性要想實現(xiàn)這樣賦值的時 目標 html {{ someStr }} js let myMvvm = new Mvvm({ el: documen...
摘要：目標你好上面是最常見的的用法現(xiàn)在我就只實現(xiàn)一件事改變執(zhí)行這一句時頁面會及時更新開始動工第一步先聲明一個類我們一開始定義的屬性是定義在中的我們想要這樣賦值的時候和的相關聯(lián)需要中間做一個代理修改代碼執(zhí)行函數(shù)實現(xiàn)代理觀察的屬性要想實現(xiàn)這樣賦值的時 目標 html {{ someStr }} js let myMvvm = new Mvvm({ el: documen...
閱讀 2805·2019-08-30 15:53
閱讀 589·2019-08-29 17:22
閱讀 1214·2019-08-29 13:10
閱讀 2376·2019-08-26 13:45
閱讀 2805·2019-08-26 10:46
閱讀 3242·2019-08-26 10:45
閱讀 2566·2019-08-26 10:14
閱讀 523·2019-08-23 18:23
