什么是雙向數據綁定
雙向數據綁定簡單來說就是UI視圖（View）與數據（Model）相互綁定在一起，當數據改變之后相應的UI視圖也同步改變。反之，當UI視圖改變之后相應的數據也同步改變。
雙向數據綁定最常見的應用場景就是表單輸入和提交。一般情況下，表單中各個字段都對應着某個對象的屬性，這樣當我們在表單輸入數據的時候相應的就改變對應的對象屬性值，反之對象屬性值改變之后也反映到表單中。
目前流行的 MVVM 框架（Angular、Vue）都實現了雙向數據綁定，這樣也就實現了視圖層和數據層的分離。相信使用過 jQuery 的人都知道，往往我們在獲取到數據之后就直接操作 DOM ，這樣數據操作和 DOM 操作就高度耦合在一起了。
實現方式
發布者-訂閱者模式
這種實現方式就是使用自定義的 data 屬性在 HTML 代碼中指明綁定。所有綁定起來的 JavaScript 對象以及 DOM 元素都將 “訂閱” 一個發布者對象。任何時候如果 JavaScript 對象或者一個 HTML 輸入字段被偵測到發生了變化，我們將代理事件到發布者-訂閱者模式，這會反過來將變化廣播並傳播到所有綁定的對象和元素。具體實現可看這篇文章：http://www.html-js.com/article/Study-of-twoway-data-binding-JavaScript-talk-about-JavaScript-every-day
臟值檢查
Angularjs（這里特指AngularJS 1.x.x版本，不代表AngularJS 2.x.x版本）雙向數據綁定的技術實現是臟值檢查。原理就是：Angularjs內部會維護一個序列，將所有需要監控的屬性放在這個序列中，當發生某些特定事件時（並不是定時的而是由某些特殊事件觸發的，比如：DOM事件、XHR事件等等），Angularjs會調用 $digest 方法，這個方法內部做的邏輯就是遍歷所有的 watcher，對被監控的屬性做對比，對比其在方法調用前后屬性值有沒有發生變化，如果發生變化，則調用對應的 handler。
這種方式的缺點很明顯，遍歷輪訓 watcher 是非常消耗性能的，特別是當單頁的監控數量達到一個數量級的時候。
訪問器監聽
vue.js 實現數據雙向綁定的原理就是訪問器監聽。它使用了 ECMAScript5.1（ECMA-262）中定義的標准屬性 Object.defineProperty 方法。通過 Object.defineProperty 設置各個屬性的 setter，getter，在數據變動時更新UI視圖。
實現
本文將采用 訪問器監聽 這種方式來實現一個簡單的雙向數據綁定，主要實現：
- obverse：對數據進行處理，重寫相應的 set 和 get 函數
- complie：解析指令（e-bind、e-model、e-click）等，並在這個過程中對 view 與 model 進行綁定
- Watcher：作為連接
obverse和complie的橋梁，用來綁定更新函數，實現對視圖的更新
首先看下我們的視圖代碼：
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="author" content="賴祥燃, laixiangran@163.com, http://www.laixiangran.cn"/>
<title>實現簡單的雙向數據綁定</title>
<style>
#app {
text-align: center;
}
</style>
<script src="eBind.js"></script>
<script>
window.onload = function () {
new EBind({
el: '#app',
data: {
number: 0,
person: {
age: 0
}
},
methods: {
increment: function () {
this.number++;
},
addAge: function () {
this.person.age++;
}
}
});
};
</script>
</head>
<body>
<div id="app">
<form>
<input type="text" e-model="number">
<button type="button" e-click="increment">增加</button>
</form>
<h3 e-bind="number"></h3>
<form>
<input type="text" e-model="person.age">
<button type="button" e-click="addAge">增加</button>
</form>
<h3 e-bind="person.age"></h3>
</div>
</body>
從視圖代碼可以看出，在 <div id="app"> 的子元素中我們應用了三個自定義指令
e-bind、e-model、e-click, 然后我們通過 new EBind({***}) 應用雙向數據綁定。
分析
EBind
EBind 構造函數接收應用根元素、數據、方法來初始化雙向數據綁定：
function EBind(options) {
this._init(options);
}
EBind.prototype._init = function (options) {
// options 為上面使用時傳入的結構體，包括 el, data, methods
this.$options = options;
// el 是 #app, this.$el 是 id 為 app 的 Element 元素
this.$el = document.querySelector(options.el);
// this.$data = {number: 0}
this.$data = options.data;
// this.$methods = {increment: function () { this.number++; }}
this.$methods = options.methods;
// _binding 保存着 model 與 view 的映射關系，也就是我們定義的 Watcher 的實例。當 model 改變時，我們會觸發其中的指令類更新，保證 view 也能實時更新
this._binding = {};
// 重寫 this.$data 的 set 和 get 方法
this._obverse(this.$data);
// 解析指令
this._complie(this.$el);
};
obverse
_obverse 的關鍵是使用 Object.defineProperty 來定義傳入數據對象的 getter 及 setter，通過 setter 來監聽對象屬性的變化從而觸發 Watcher 中的更新方法。
EBind.prototype._obverse = function (currentObj, completeKey) {
var _this = this;
Object.keys(currentObj).forEach(function (key) {
if (currentObj.hasOwnProperty(key)) {
// 按照前面的數據，_binding = {number: _directives: [], preson: _directives: [], preson.age: _directives: []}
var completeTempKey = completeKey ? completeKey + '.' + key : key;
_this._binding[completeTempKey] = {
_directives: []
};
var value = currentObj[key];
// 如果值還是對象，則遍歷處理
if (typeof value === 'object') {
_this._obverse(value, completeTempKey);
}
var binding = _this._binding[completeTempKey];
// 雙向數據綁定的關鍵
Object.defineProperty(currentObj, key, {
enumerable: true,
configurable: true,
get: function () {
console.log(key + '獲取' + JSON.stringify(value));
return value;
},
set: function (newVal) {
if (value !== newVal) {
console.log(key + '更新' + JSON.stringify(newVal));
value = newVal;
// 當 number 改變時，觸發 _binding[number]._directives 中的綁定的 Watcher 類的更新
binding._directives.forEach(function (item) {
item.update();
});
}
}
});
}
})
};
_complie
_complie 的關鍵是簡析自定義指令，根據不同的自定義指令實現不同的功能。如 e-click 就解析為將對應 node 綁定 onclick 事件，e-model 必須綁定在 INPUT 和 TEXTAREA 上，然后監聽 input 事件，更改 model 的值，e-bind 就直接將綁定的變量值輸出到DOM元素中。
EBind.prototype._complie = function (root) {
var _this = this;
var nodes = root.children;
for (var i = 0; i < nodes.length; i++) {
var node = nodes[i];
// 對所有元素進行遍歷，並進行處理
if (node.children.length) {
this._complie(node);
}
// 如果有 e-click 屬性，我們監聽它的 onclick 事件，觸發 increment 事件，即 number++
if (node.hasAttribute('e-click')) {
node.onclick = (function () {
var attrVal = node.getAttribute('e-click');
// bind 是使 data 的作用域與 method 函數的作用域保持一致
return _this.$methods[attrVal].bind(_this.$data);
})();
}
// 如果有 e-model 屬性且元素是 INPUT 和 TEXTAREA，我們監聽它的 input 事件，更改 model 的值
if (node.hasAttribute('e-model') && (node.tagName === 'INPUT' || node.tagName === 'TEXTAREA')) {
node.addEventListener('input', (function (index) {
var attrVal = node.getAttribute('e-model');
// 添加指令類 Watcher
_this._binding[attrVal]._directives.push(new Watcher({
name: 'input',
el: node,
eb: _this,
exp: attrVal,
attr: 'value'
}));
return function () {
var keys = attrVal.split('.');
var lastKey = keys[keys.length - 1];
var model = keys.reduce(function (value, key) {
if (typeof value[key] !== 'object') {
return value;
}
return value[key];
}, _this.$data);
model[lastKey] = nodes[index].value;
}
})(i));
}
// 如果有 e-bind 屬性
if (node.hasAttribute('e-bind')) {
var attrVal = node.getAttribute('e-bind');
// 添加指令類 Watcher
_this._binding[attrVal]._directives.push(new Watcher({
name: 'text',
el: node,
eb: _this,
exp: attrVal,
attr: 'innerHTML'
}));
}
}
};
Watcher
作為連接 _obverse 和 _complie 的橋梁，用來綁定更新函數，通過 update 實現對視圖的更新。
function Watcher(options) {
// options 屬性：
// name 指令名稱，例如文本節點，該值設為"text"
// el 指令對應的DOM元素
// eb 指令所屬EBind實例
// exp 指令對應的值，本例如"number"
// attr 綁定的屬性值，本例為"innerHTML"
this.$options = options;
this.update();
}
/**
* 根據 model 更新 view
*/
Watcher.prototype.update = function () {
var _this = this;
var keys = this.$options.exp.split('.');
// 比如 H3.innerHTML = this.data.number; 當 number 改變時，會觸發這個 update 函數，保證對應的 DOM 內容進行了更新。
this.$options.el[this.$options.attr] = keys.reduce(function (value, key) {
return value[key];
}, _this.$options.eb.$data);
};
總結
這樣我們就使用原生 JavaScript 實現了簡單的雙向數據綁定。