原生js實現檢測物件變化

阿新 • • 發佈：2019-01-12

最近這段時間，前端開發開始逐漸模組化，一些MVC、MVVM等框架比較流行，比如angular、vue、react；這三個框架比較相似的有一點就是資料的雙向繫結，檢視的更新導致相應資料變化，資料的改變引起檢視的變化。像這種魔法的操作是怎麼實現的呢？像angular則是採用了‘髒值檢測的方式’，資料發生變更後，對於所有的數據和檢視的繫結關係進行一次檢測，識別是否有資料發生了改變，有變化進行處理，可能進一步引發其他資料的改變，所以這個過程可能會迴圈幾次，一直到不再有資料變化發生後，將變更的資料傳送到檢視，更新頁面展現。如果是手動對 ViewModel 的資料進行變更，為確保變更同步到檢視，需要手動觸發一次“髒值檢測”。VueJS 則使用 ES5 提供的 Object.defineProperty() 方法，監控對資料的操作，從而可以自動觸發資料同步。並且，由於是在不同的資料上觸發同步，可以精確的將變更傳送給繫結的檢視，而不是對所有的資料都執行一次檢測。接下來就一塊實現檢測物件變化的功能。（本程式碼使用es6編寫，部分瀏覽器不支援，還需要使用babel進行編譯）

首先，js中的屬性分為倆種，一種是資料屬性，一種是訪問器屬性。

var data = {};
data.name = '田二黑';

上面這種就是資料屬性。當然和下面效果一樣：

Object.defineProperty(obj, 'name', {  
    value: '田二黑',       // 屬性的值  
    writable: true,     // 是否可寫  
    enumerable: true,   // 是否能夠通過for in 列舉  
    configurable: true  // 是否可使用 delete刪除  
})

當然我們可以定義訪問器屬性 get set，當你讀取age屬性時，會自動呼叫get，設定屬性時會呼叫set

Object.defineProperty(obj, 'age', {  
    get: function(){  
        return 20;  
    },  
    set: function(newVal){  
        this.age += 20;  
    }  
})

其中，vue就是利用訪問器實現的資料雙向繫結，像下面這個例子（可能你家沒滿月的孩子都會寫了）

new Vue({  
   data:{  
  name:'田二黑',  
    age:21  
    }  
})

如果我們把data物件的屬性全部轉化為訪問器屬性，那我們不就可以檢測變化了,修改時候會呼叫set訪問器，在裡面回撥通知不就行了？

const OP = Object.prototype;  
const types = {  
  obj:'[object Object]',  
  array:'[object Array]'  
}  
export default class Jsonob{  
    constructor(obj,cb){  
        if(OP.toString.call(obj) !== types.obj){  
            console.log('請傳入一個物件');  
            return false;  
        }  
        this._callback = cb;  
        this.observe(obj);  
    }  
    observe(obj){  
        Object.keys(obj).forEach((key)=>{  
            let val = obj[key];  
            Object.defineProperty(obj,key,{  
                get:function(){  
                    return val;  
                },  
                set:(function(newVal){  
                    this._callback(newVal)  
                    val = newVal  
                }).bind(this)  
            })  
        },this)  
    }  
}

上面程式碼聲明瞭類Jsonob，接收要監聽的物件和回撥函式；observe方法，遍歷該物件，並依次將物件屬性轉為訪問器屬性，在set中回撥通知。

接下來我們測試一下

import Jsonob from './jsonOb'  
var data = {  
    a: 200,  
    level1: {  
        b: 'str',  
        c: [1, 2, 3],  
        level2: {  
            d: 90  
        }  
    }  
}  
var cb = (val)=>{  
    console.log(val)  
}  
new Jsonob(data,cb);  
data.level1.level2.d = 50

當修改物件data中屬性時，回撥打印出新的值。這樣還沒結束，我的舊值去哪了，我想獲取舊值咋辦？並且如果我設定的新值又是個物件咋辦

let val = obj[key];  
Object.defineProperty(obj,key,{  
get:function(){  
     return val;  
    },  
set:(function(newVal){  
     this._callback(newVal)  
     val = newVal  
    }).bind(this)  
})

上面的val = obj[key]；儲存的不就是舊值嗎？於是修改程式碼如下

Object.keys(obj).forEach((key)=>{  
            let oldVal = obj[key];  
            Object.defineProperty(obj,key,{  
                get:function(){  
                    return oldVal;  
                },  
                set:(function(newVal){  
                    if(oldVal !== newVal){  
                        if(OP.toString.call(newVal) === '[object Object]'){  
                                this.observe(newVal);  
                            }  
                        this._callback(newVal,oldVal)  
                        oldVal = newVal  
                    }  
                }).bind(this)  
            })  
            if(OP.toString.call(obj[key]) === types.obj){  
                this.observe(obj[key])  
            }  
        },this)

判斷修改的值是否為物件，如果是物件，則繼續轉換新增的值的屬性為訪問器屬性。在回撥中就能接收新值和舊值。當然相信你已經發現了，

data.leavel.c是個陣列，當我們push，shift等操作時還監聽不到，首先，當我們呼叫陣列的push等方法時，是執行的陣列原型上的方法，那我們重

寫原型上的這些方法，在這些方法裡面監聽不就ok了，像這樣

Array.prototype.push = function(){  
    /********/  
Array.prototype.shift= function(){  
    /********/  
}

陣列有push，shift，pop，unshift等等，你要重寫那麼多方法並實現其功能，就算你實現了，並且不影響其他程式碼中陣列的使用，效能上來說也是不

能相提並論的。那我們怎麼實現？我們可不可以讓陣列例項的原型指向一個我們自定義的物件fakeprototype，當我們呼叫push方法時，呼叫的是該

物件上的push方法，在方法裡面監聽變化，然後在呼叫Array.prototype真正原型物件上的push方法不就行了。程式碼實現如下：

const OP = Object.prototype;  
const types = {  
  obj:'[object Object]',  
  array:'[object Array]'  
}  
const OAM =['push','pop','shift','unshift','short','reverse','splice']  
export default class Jsonob{  
    constructor(obj,cb){  
        if(OP.toString.call(obj) !== types.obj && OP.toString.call(obj) !== types.array){  
            console.log('請傳入一個物件或陣列');  
            return false;  
        }  
        this._callback = cb;  
        this.observe(obj);  
    }  
    observe(obj){  
        if(OP.toString.call(obj) === types.array){  
            this.overrideArrayProto(obj);  
        }  
        Object.keys(obj).forEach((key)=>{  
            let oldVal = obj[key];  
            Object.defineProperty(obj,key,{  
                get:function(){  
                    return oldVal;  
                },  
                set:(function(newVal){  
                    if(oldVal !== newVal){  
                        if(OP.toString.call(newVal) === '[object Object]'){  
                            this.observe(newVal);  
                        }  
                        this._callback(newVal,oldVal)  
                        oldVal = newVal  
                    }  
                }).bind(this)  
            })  
            if(OP.toString.call(obj[key]) === types.obj || OP.toString.call(obj[key]) === types.array){  
                this.observe(obj[key])  
            }  
        },this)  
    }  
    overrideArrayProto(array){  
            // 儲存原始 Array 原型  
        var originalProto = Array.prototype,  
            // 通過 Object.create 方法建立一個物件，該物件的原型是Array.prototype  
            overrideProto = Object.create(Array.prototype),  
            self = this,  
            result;  
            // 遍歷要重寫的陣列方法  
            OAM.forEach((method)=>{  
                Object.defineProperty(overrideProto,method,{  
                    value:function(){  
                        var oldVal = this.slice();  
                        //呼叫原始原型上的方法  
                        result = originalProto[method].apply(this,arguments);  
                        //繼續監聽新陣列  
                        // self.observe(this);  
                        self._callback(this,oldVal);  
                        return result;  
                    }  
                })  
            });  
        // 最後 讓該陣列例項的 __proto__ 屬性指向 假的原型 overrideProto  
        array.__proto__ = overrideProto;  
          
    }  
}

當我們再去對data.leave1.c.push()的時候，就能監聽到變化。然而還沒有完，我們現在只是知道了修改的新值和舊值，我們修改的哪個屬性啊？我們

現在的程式還無法知道，像vue，在模板中<div>{{name}}</div><div>{{age}}</div> 如果name變化，只是修改第一個div，這就是知道修改哪個屬

性的好像，不然只能對模板重新全部重新整理，效能肯定是不如區域性修改的。因此我們還要在程式碼的基礎上加個路徑變數，表示是data的哪個屬性。

const OP = Object.prototype;  
const types = {  
  obj:'[object Object]',  
  array:'[object Array]'  
}  
const OAM =['push','pop','shift','unshift','short','reverse','splice']  
export default class Jsonob{  
    constructor(obj,cb){  
        if(OP.toString.call(obj) !== types.obj && OP.toString.call(obj) !== types.array){  
            console.log('請傳入一個物件或陣列');  
            return false;  
        }  
        this._callback = cb;  
        this.observe(obj);  
    }  
    observe(obj,path){  
        if(OP.toString.call(obj) === types.array){  
            this.overrideArrayProto(obj,path);  
        }  
        Object.keys(obj).forEach((key)=>{  
            let oldVal = obj[key];  
            let pathArray = path&&path.slice();  
            if(pathArray){  
                pathArray.push(key);  
            }  
            else{  
                pathArray = [key];  
            }  
            Object.defineProperty(obj,key,{  
                get:function(){  
                    return oldVal;  
                },  
                set:(function(newVal){  
                    if(oldVal !== newVal){  
                        if(OP.toString.call(newVal) === '[object Object]'){  
                            this.observe(newVal,pathArray);  
                        }  
                        this._callback(newVal,oldVal,pathArray)  
                        oldVal = newVal  
                    }  
                }).bind(this)  
            })  
            if(OP.toString.call(obj[key]) === types.obj || OP.toString.call(obj[key]) === types.array){  
                this.observe(obj[key],pathArray)  
            }  
        },this)  
    }  
    overrideArrayProto(array,path){  
            // 儲存原始 Array 原型  
        var originalProto = Array.prototype,  
            // 通過 Object.create 方法建立一個物件，該物件的原型是Array.prototype  
            overrideProto = Object.create(Array.prototype),  
            self = this,  
            result;  
            // 遍歷要重寫的陣列方法  
            OAM.forEach((method)=>{  
                Object.defineProperty(overrideProto,method,{  
                    value:function(){  
                        var oldVal = this.slice();  
                        //呼叫原始原型上的方法  
                        result = originalProto[method].apply(this,arguments);  
                        //繼續監聽新陣列  
                        self.observe(this,path);  
                        self._callback(this,oldVal,path);  
                        return result;  
                    }  
                })  
            });  
        // 最後 讓該陣列例項的 __proto__ 屬性指向 假的原型 overrideProto  
        array.__proto__ = overrideProto;  
          
    }

當第一次呼叫observe時，path為空，則pathArray將當前key傳入，如果不為空，則繼續追加path。好了，我們現在的程式算是比較完整了，知道

要修改的屬性，新值和就舊值。水平有限，希望指出共同進步。

原生js實現檢測物件變化

原生js實現檢測物件變化

原生js實現拖動滑塊驗證

原生js實現outerWidth()方法，用到getComputedStyle

原生js實現form表單序列化

h5原生js實現輪播圖

原生js實現數據單向綁定

原生js實現清除子元素節點

原生JS實現tab切換--web前端開發

原生js實現輪播

原生js實現的瀑布流布局

原生JS實現增加刪除class

JQuery&原生js ——實現剪刀石頭布小遊戲

原生JS實現放大鏡效果

用原生js實現ajax、jsonp

原生JS實現ajax省市區三聯

原生JS實現圖片放大鏡插件

原生js實現購物車相關功能

原生js實現三級聯動

原生js實現簡單的焦點圖效果

原生js實現選項卡

原生js實現檢測物件變化

相關推薦