基于Object.defineProperty实现双向数据绑定
雙向數據綁定可算是前端領域經久不衰的熱詞，不管是前端開發還是面試都會有所涉及。而且不同的框架也想盡一切辦法去實現這一特性，比如：
Knockout / Backbone --- 發布-訂閱模式
Angular --- ‘臟檢查’
Vue --- 'Object.defineProperty'
簡單的說就是在數據和UI之間建立雙向的通信通道，當用戶通過Function改變了數據，那么這個改變也會立即反應到UI上；或者說用戶通過UI的操作，那么這些操作也會隨之引起對應的數據變動。emmmmmm...沒毛病！
既然本文標題是討論Object.defineProperty，那么筆者就把當前火熱的到Boom的國產框架：Vue.js 請出來，然后在了解完她實現雙向數據綁定的原理之后，我們著手實現一個抽象派的雙向數據綁定。那么那位朋友就說了，什么叫 抽象派 ？我估計吧，可能就是馬(Vue)和馬骨架的區別吧，TAT...
在介紹Vue的雙向數據綁定之前，筆者還想多叨叨幾句，如果某一天有人問你：Vue是如何實現雙向數據綁定的？ 姑且先在這里停頓下，思考下這個問題的答案...................
或許有朋友會脫口而出“數據劫持”，說的沒錯！的確就是“數據劫持”，但是還不夠充分和不夠精確。筆者在這里也談下自己的一點點所見所聞所想：
下面進入正題，一起了解下Vue實現雙向數據綁定的原理，果斷上圖：
首先，Vue的Compile模塊會對Vue的 template 代碼進行編譯解析并生成一系列的watcher，也可以稱之為“更新函數”，它負責把變更后的相關數據重新渲染到指定的地方。舉個栗子：
<input v-model="message">Compile會解析出 v-moel 這個指令并且生成 watcher 并連接數據中的 message 和當前這個Dom對象，一旦收到這個message被變更的通知，watcher就會根據變更對這個Dom進行重新渲染。
當然一個頁面或者一個項目中肯定有很多watcher，因此Vue使用了Dep這個對象來存儲每一個watcher，當數據發生變更，Observer會調用Dep的notify方法以通知所有訂閱了該數據的watcher,讓它們醒醒該干活了...
Vue的雙向數據綁定也說得差不多了，下面就開始順著這個思路著手寫一個吧，畢竟說得多不如code來得好啊！！！具體的實現效果如下，Let‘s do it
不知道為什么GIF上傳不了，所以只能將就用圖片了，QAQ....
功能就用文字解釋下：第一個行的 title 0 直接顯示的是數據，以便觀察；我們可以在輸入框中輸入任何int, 然后點擊“加”可以實現對數值的 +1 操作，同時輸入框的數值和 title 也會隨之變化；當然，通過輸入數值，title也會跟著變化。
首先把Html代碼呈上來：
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Object.defineProperty實現雙向綁定</title> </head><body><h1 id='h1'></h1><input type="text" id="inp" onkeyup="inputChange(event)"><input type="button" value="加" onclick="btnAdd()" /> </body> <script src="./index.js"></script></html>然后開始一步一步在index.js里寫代碼吧
1) 首先我們先定義一個數據源
2) 然后定義一個Dep，用于存儲watcher
//用于管理watcher的Dep對象 let Dep = function () {this.list = [];this.add = function(watcher){this.list.push(watcher)},this.notify = function(newValue){this.list.forEach(function (fn) {fn(newValue)})} };3) 模擬Compile出來的watchers，該demo涉及到兩個地方的重新render，一個是title，另一個是輸入框。所以寫兩個watcher，然后存入Dep
// 模擬compile,通過對Html的解析生成一系列訂閱者（watcher） function renderInput(newValue) {let el = document.getElementById('inp');if (el) {el.value = newValue} }function renderTitle(newValue) {let el = document.getElementById('h1');if (el) {el.innerHTML = newValue} }//將解析出來的watcher存入Dep中待用 let dep = new Dep(); dep.add(renderInput); dep.add(renderTitle)4) 使用 Object.defineProperty 定義一個Observer
function observer(vm, key, value) {Object.defineProperty(vm, key, {enumerable: true,configurable: true,get: function () {console.log('Get');return value},set: function (newValue) {if (value !== newValue) {value = newValueconsole.log('Update')//將變動通知給相關的訂閱者dep.notify(newValue)}}}) }5) 再將頁面使用的兩個方法寫出來。(Vue使用的是指令對事件進行綁定，但是本文不涉及指令，所以用最原始的方法綁定事件)
//頁面引用的方法 function inputChange(ev) {let value = Number.parseInt(ev.target.value);vm.value = (Number.isNaN(value)) ? 0 : value; }function btnAdd() {vm.value = vm.value + 1; }主要的代碼都寫好后，下面第一件事就是初始化：
//數據初始化方法 function initMVVM(vm) {Object.keys(vm).forEach(function (key) {observer(vm, key, vm[key])}) }//初始化數據源 initMVVM(vm)//初始化頁面，將數據源渲染到UI dep.notify(vm.value);這樣一個簡單的基于 Object.defineProperty 的雙向數據綁定就完成了。看完的朋友有沒有對雙向數據綁定有了更多的理解了呢？如果沒有理解的話，可以將代碼復制到本地，然后循著代碼再運行下，或許能容易理解。當然這里的代碼并不高深，只是從淺層去談論了雙向數據綁定，所以有不足或者表達錯誤的地方，煩請各位朋友多多指正。
這里是源碼，由于放不了動圖，所以有興趣的小伙伴可以拿下來最后還是補充一句，Object.defineProperty雖然好用，但并不是無懈可擊的，它對數組數據的處理并沒有想象中的好甚至表現很差，因此Vue團隊專門為Vue中的數組類型編寫了額外的方法以實現對數組的正確監控
。因此，ES6中的Proxy挺身而出，拯救了ES5 中 Object.defineProperty對數組數據處理的不足。有興趣的朋友請期待筆者的下一篇博客，討論下用Proxy實現雙向數據綁定。
咱們下期再見！！
與50位技術專家面對面20年技術見證，附贈技術全景圖總結
以上是生活随笔為你收集整理的基于Object.defineProperty实现双向数据绑定的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Alpha系列（四）——主动投资管理定律
- 下一篇： CSS如何实现内凹角效果 By 大漠