MVVM 架構雙向數據綁定（數據劫持模塊Object.defineProperty）

時間 2019-11-24

標籤 mvvm 架構雙向數據綁定劫持模塊 object.defineproperty object defineproperty 欄目系統架構简体版

原文原文鏈接

數據劫持 Observer 類的實現(暫時先說數據劫持，後續其餘功能再補充，儘可能說完整個VUE的MVVM實現)

還記得實現 MVVM 類的時候就建立了這個類的實例，當時傳入的參數是 MVVM 實例的 data 屬性，在 MVVM 中把數據經過 Object.defineProperty 掛到了實例上，並添加了 getter 和 setter，其實 Observer 類主要目的就是給 data 內的全部層級的數據都進行這樣的操做。數組

文件：Observer.js

class Observer {
    constructor (data) {
        this.observe(data);
    }
    // 添加數據監聽
    observe(data) {
        // 驗證 data
        if(!data || typeof data !== 'object') {
            return;
        }

        // 要對這個 data 數據將原有的屬性改爲 set 和 get 的形式
        // 要將數據一一劫持，先獲取到 data 的 key 和 value
        Object.keys(data).forEach(key => {
            // 劫持（實現數據響應式）
            this.defineReactive(data, key, data[key]);
            this.observe(data[key]); // 深度劫持
        });
    }
    // 數據響應式
    defineReactive (object, key, value) {
        let _this = this;
        // 每一個變化的數據都會對應一個數組，這個數組是存放全部更新的操做
        let dep = new Dep();

        // 獲取某個值被監聽到
        Object.defineProperty(object, key, {
            enumerable: true,
            configurable: true,
            get () { // 當取值時調用的方法
                Dep.target && dep.addSub(Dep.target);
                return value;
            },
            set (newValue) { // 當給 data 屬性中設置的值適合，更改獲取的屬性的值
                if(newValue !== value) {
                    _this.observe(newValue); // 從新賦值若是是對象進行深度劫持
                    value = newValue;
                    dep.notify(); // 通知全部人數據更新了
                }
            }
        });
    }
}複製代碼