javascript實現雙向資料繫結

雙向資料繫結已經是面試中經常被問到的點，需要對原理和實現都要有一定了解。

　　下面是實現雙向繫結的兩種方法：

1. 1. 屬性劫持
   2. 髒資料檢查

 

一、屬性劫持

　　主要是通過Object物件的defineProperty方法，重寫data的set和get函式來實現的。

　　　　在屬性劫持中，主要通過 _observe(重定義get、set方法，實現資料變化更新檢視)、_compile(實現檢視初始化、並對元素繫結事件)、_updata(實現具體更新檢視方法) 三個方法完成雙向繫結。


　　__observe方法中，_binding儲存資料相關更新的watcher物件列表，set函式觸發回更新所有相關的繫結檢視物件：

MyVue.prototype._observe = function (data) {
    const _this = this
    Object.keys(data).forEach(key => {
        if (data.hasOwnProperty(key)) {
            let value = data[key]
            this._binding[key] = {
                _directives: []
            }
            this._observe(value)

            Object.defineProperty(data, key, {
                enumerable: true,
                configurable: true,
                get() {
                    return value
                },
                set(newValue) {
                    if (value !== newValue) {
                        value = newValue
                        _this._binding[key]._directives.forEach(item => {
                            item._updata()
                        })
                    }
                }
            })
        }
    })
}

 

　　_compile方法中，會對DOM中的繫結命令進行解析，並繫結相關的處理函式：

MyVue.prototype._compile = function (root) {
    const _this = this
    const nodes = root.children;
    Object.values(nodes).forEach(nodeChild => {
        if (nodeChild.children.length) {
            this._compile(nodeChild)
        }

        if (nodeChild.hasAttribute(`v-click`)) {
            nodeChild.addEventListener(`click`, (function (params) {
                const attrVal = nodeChild.getAttribute(`v-click`);
                return _this.$methods[attrVal].bind(_this.$data)
            })())
        }

        if (nodeChild.hasAttribute(`v-model`) && (nodeChild.tagName = `INPUT` || nodeChild.tagName == `TEXTAREA`)) {
            nodeChild.addEventListener(`input`, (function (params) {
                var attrVal = nodeChild.getAttribute(`v-model`);
                _this._binding[attrVal]._directives.push(
                    new Watcher({
                        el: nodeChild,
                        vm: _this,
                        exp: attrVal,
                        attr: `value`
                    })
                )

                return function () {
                    _this.$data[attrVal] = nodeChild.value;
                }
            })())
        }

        if (nodeChild.hasAttribute(`v-bind`)) {
            const attrVal = nodeChild.getAttribute(`v-bind`);
            _this._binding[attrVal]._directives.push(
                new Watcher({
                    el: nodeChild,
                    vm: _this,
                    exp: attrVal,
                    attr: `innerHTML`
                })
            )
        }
    })
}

 

　　_updata函式，主要在_compile函式中呼叫進行檢視初始化和set函式呼叫更新繫結資料的相關檢視:

function Watcher({ el, vm, exp, attr }) {
    this.el = el
    this.vm = vm
    this.exp = exp
    this.attr = attr

    this._updata()
}

Watcher.prototype._updata = function () {
    this.el[this.attr] = this.vm.$data[this.exp]
}

 

 網上的一張屬性劫持的執行圖：

  

• Observer 資料監聽器，能夠對資料物件的所有屬性進行監聽，如有變動可拿到最新值並通知訂閱者，內部採用Object.defineProperty的getter和setter來實現。
• Compile 指令解析器，它的作用對每個元素節點的指令進行掃描和解析，根據指令模板替換資料，以及繫結相應的更新函式。
• Watcher 訂閱者， 作為連線 Observer 和 Compile 的橋樑，能夠訂閱並收到每個屬性變動的通知，執行指令繫結的相應回撥函式。
• Dep 訊息訂閱器，內部維護了一個陣列，用來收集訂閱者（Watcher），資料變動觸發notify 函式，再呼叫訂閱者的 update 方法。

完整的程式碼請參考 Two Way Binding

二、髒資料檢查

　　主要通過執行一個檢測來遍歷所有的資料，對比你更改了地方，然後執行變化。

　　　　在髒檢查中，作用域scope物件中會維護一個“watcher”陣列，用來存放所以需要檢測的表示式，以及對應的回撥處理函式。

　　對於所有需要檢測的物件、屬性，scope通過“watch”方法新增到“watcher”陣列中：　

Scope.prototype.watch = function(watchExp, callback) {
    this.watchers.push({
        watchExp: watchExp,
        callback: callback || function() {}
    });
}

　　當Model物件發生變化的時候，呼叫“digest”方法進行髒檢測，如果發現髒資料，就呼叫對應的回撥函式進行介面的更新：

Scope.prototype.digest = function() {
    var dirty;

    do { 
        dirty = false;

        for(var i = 0; i < this.watchers.length; i++) {
            var newVal = this.watchers[i].watchExp(),
                oldVal = this.watchers[i].last;

            if(newVal !== oldVal) {
                this.watchers[i].callback(newVal, oldVal);
                dirty = true;
                this.watchers[i].last = newVal;
            }
        }
    } while(dirty);

}

完整的程式碼請參考 Two Way Binding

 

如果喜歡請關注我的Github，給個Star吧，我會定期分享一些JS中的知識，^_^