JavaScript實現簡單的雙向資料繫結

laixiangran發表於2018-04-23
JavaScript

什麼是雙向資料繫結

雙向資料繫結簡單來說就是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 實現了簡單的雙向資料繫結。

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

相關文章