监听一个变量的变化

目前主流的前端框架（例如：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)
        }
    }
})