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中的知識，^_^