監聽一個變數的變化

目前主流的前端框架（例如：react、vue）都有的共同特點是資料繫結，他們通過對一個變數的監聽，來實現變數變化時候的動態響應。當網頁中的資料發生了變化，便立即呼叫相關的回撥函式來更變dom節點中的內容，來實現資料檢視的更新。

在智庫這個專案中，由於種種原因，我們並沒有用react和vue等框架，所以我們就需要使用其他的方法來實現資料流的繫結。

現在常用的資料繫結的方式有很多比如說ES5的getter和setter、髒數值檢查以及ES6中的proxy，在專案中我們用到的是ES5的getter和setter。

ES5的getter和setter

在ES5中，有一個Object.defineProperty

來自MDN的官方文件
Object.defineProperty(obj, prop, descriptor)
引數
obj
要在其上定義屬性的物件。
prop
要定義或修改的屬性的名稱。
descriptor
將被定義或修改的屬性描述符。

我們會發現屬性描述符有一下幾種：

其中，get和set的描述就是我們現在需要對物件繫結的方法，這兩個屬性就像是對這個物件的某一個鍵名的監聽，當我們讀取這個鍵名的時候，會自動呼叫get方法，當我們改寫set的時候，會自動呼叫set

下面我們來一個例項：

var obj={};
Object.defineProperty(obj,'data',{
    get:function(){
        return data;
    },
    set:function(newValue){
        data=newValue;
        console.log('set :',newValue);
        //需要觸發的渲染函式可以寫在這...
    }
})

這樣，當我們給obj的data賦值的時候，就會觸發set 的方法

    obj.data=1;//set: 1

這樣，在每次更改數值的時候，我們無需手動多次呼叫渲染函式，只需要在defineProporty

同時，如果你想一下子定義多個變數的getter和setter，你可以使用Object.defineProperties(obj,props)

引數
obj
要在其上定義屬性的物件。
props
要定義其可列舉屬性或修改的屬性描述符的物件。

話不多說，直接上程式碼：

    var obj = {};
Object.defineProperties(obj, {
    a: {
        configurable: true,
        get: function() {
            console.log('get: ',a)
            return a
        },
        set: function(newValue) {
            a = newValue;
            console.log('set: ',a)
        }
    },
    b: {
        configurable: true,
        get: function() {
            console.log('get: ',b)
            return b;
        },
        set: function(newValue) {
            b = newValue;
            console.log('set: ',b)
        }
    }
})