JavaScript實現簡單的雙向數據綁定

什麼是雙向數據綁定雙向數據綁定簡單來說就是UI視圖（View）與數據（Model）相互綁定在一起，當數據改變之後相應的UI視圖也同步改變。反之，當UI視圖改變之後相應的數據也同步改變。雙向數據綁定最常見的應用場景就是表單輸入和提交。一般情況下，表單中各個欄位都對應著某個對象的屬性，這樣當我們在表 ...

什麼是雙向數據綁定

雙向數據綁定簡單來說就是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 構造函數接收應用根元素、數據、方法來初始化雙向數據綁定：


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 實現了簡單的雙向數據綁定。

源碼：https://github.com/laixiangran/e-bind