什麼是雙向資料繫結
雙向資料繫結簡單來說就是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="賴祥燃, [email protected], 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
建構函式接收應用根元素、資料、方法來初始化雙向資料繫結:
```javascript
/**
- EBind建構函式
- @param options
- @constructor
*/
function EBind(options) {
this._init(options);
}
/**
- 初始化建構函式
- @param options
@private
*/
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 中的更新方法。
```javascript
/**
- 對data進行處理,重寫相應的set和get函式
- @param currentObj 當前物件
- @param completeKey
@private
*/
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元素中。
```javascript
/**
- 解析指令(e-bind、e-model、e-click)等,並在這個過程中對 view 與 model 進行繫結
- @param root root 為 id 為 app 的 Element 元素,也就是我們的根元素
@private
*/
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 實現對檢視的更新。
/**
* 指令類Watcher,用來繫結更新函式,實現對DOM元素的更新
* @param options Watcher 類屬性:
* name 指令名稱,例如文字節點,該值設為"text"
* el 指令對應的DOM元素
* eb 指令所屬EBind例項
* exp 指令對應的值,本例如"number"
* attr 繫結的屬性值,本例為"innerHTML"
* @constructor
*/
function Watcher(options) {
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 實現了簡單的雙向資料繫結。
原始碼:https://github.com/laixiangran/e-bind