感謝百度前端技術(shù)學院帶領(lǐng)我進步！謹以此文，記錄我的學習過程~
動態(tài)數(shù)據(jù)綁定

Vue的初學者一定對于數(shù)據(jù)的動態(tài)綁定并不陌生，從最簡單的需求開始一步步理解其實現(xiàn)原理，以及相關(guān)涉及到的知識點。

一

let app1 = new Observer({
  name: 'youngwind',
  age: 25
});

let app2 = new Observer({
  university: 'bupt',
  major: 'computer'
});

// 要實現(xiàn)的結(jié)果如下：
app1.data.name // 你訪問了 name
app.data.age = 100;  // 你設(shè)置了 age，新的值為100
app2.data.university // 你訪問了 university
app2.data.major = 'science'  // 你設(shè)置了 major，新的值為 science

實際上這需要用到ES5中的Object.prototype.defineProperty(參見文檔)這個方法,簡單敘述一下其參數(shù)：
<blockquote>
Object.defineProperty(obj,key,descriptor)：

• obj是待操作的對象；
• key是對象中待操作的屬性名
• descriptor是一個配置對象，其中有：
  configurable:配置總開關(guān)，默認為false，只有當其值為true時，才能動態(tài)的修改配置方法；
  enumerable：枚舉開關(guān)，默認為false，只有當其值為true時，該屬性才能被枚舉；
  value：默認為undefined，即為本意obj[key] = value;
  writable:默認為false，只有其值為true時，屬性值才能被改寫；
  set/get：為屬性提供getter和setter方法。
  </blockquote>

為了實現(xiàn)第一個需求，我們需要為每一個屬性均提供getter/setter：

function Observer(data) {
    this.data = data;
    this.makeObserver(data);
}
Observer.prototype.makeObserver = function(data){
   if(typeof data !== "object"){
        throw "please input object!"
    }
    let val;
    //在對象中遍歷，只能用for..in..但是這個方法會將原型鏈上的屬性方法均會遍歷
    //因此用Object.hasOwnProperty進行過濾，只保留自身對象上的
    for(let key in data){
        if(data.hasOwnProperty(key)){
            val = data[key];
            //如果還是引用類型，則迭代直至所有的屬性均綁定了get/set
            if(typeof val === "object"){
                new Observer(val)
            }
            this.convert(key,val);
        }
    }
}
Observer.prototype.convert = function(){
    Object.defineProperty(this.data,key,{
        enumerable:true,
        configurable:true,
        get:function () {
            console.log("你訪問了" + key);
            return val;
        },
        set:function (newVal,func) {
            console.log("你設(shè)置了" + key + "新的值為" + newVal);
            if(newVal == val) return;
            //如果值為對象，那么還得給對象里的屬性綁定setter/getter
            if(typeof newVal == "object"){
                new Observer(newVal);
            }
            val = newVal;
            return val;
        }
    })
}

二

綁定了getter,setter后，只是進行了數(shù)據(jù)獲取/修改后的反饋，并沒有涉及到觸發(fā)數(shù)據(jù)改動后的回調(diào)。我們可以用事件觸發(fā)的思路，也就是利用發(fā)布訂閱（觀察者）模式來進行函數(shù)回調(diào)。
簡單來說：就是單獨創(chuàng)建一個中間層，用以統(tǒng)一管理事件，該中間層給出兩個接口，一個用于訂閱事件，一個用于發(fā)布事件；
一個簡單的實現(xiàn)：

//發(fā)布訂閱模式，一個中間層（包括一個訂閱接口，一個取消接口，一個發(fā)布接口）
function PubSub(){
    this.handlers = {};
}
PubSub.prototype.on = function (eventType,handler) {
    if (!(eventType in this.handlers)){
        this.handlers[eventType] = [];
    }
    this.handlers[eventType].push(handler);
    return this;
}
PubSub.prototype.emit = function (eventType) {
    if(!this.handlers[eventType]) return;
    var handlerArgs = [].slice.call(arguments,1);  //刨除eventType，保留其他參數(shù)
    for(var i = 0; i < this.handlers[eventType].length;i++){
        this.handlers[eventType][i].apply(this,handlerArgs);  //實際上等于func(..rest);
    }
    return this;
}
PubSub.prototype.off = function (eventType) {
    if(!(eventType in this.handlers)) return;
    delete this.handlers[eventType];
    return this;
}
Observer.prototype.$watch = function(attr, callback){
    this.eventBus.on(attr, callback);
};

第二個需求變?yōu)椋?/p>

 let app1 = new Observer({
         name: 'youngwind',
         age: 25
 });

 // 你需要實現(xiàn) $watch 這個 API
 app1.$watch('age', function(age) {
         console.log(`我的年紀變了，現(xiàn)在已經(jīng)是：${age}歲了`)
 });

 app1.data.age = 100; // 輸出：'我的年紀變了，現(xiàn)在已經(jīng)是100歲了'

此時，我們在第一個需求的基礎(chǔ)上，利用觀察者模式的思想添加中間層：

function Observer(data) {
    this.data = data;
    this.makeObserver(data);
    this.eventBus = new PubSub();
}
//該方法就是給屬性綁get/set
Observer.prototype.makeObserver = function (data) {
    if(typeof data !== "object"){
        throw "please input object!"
    }
    let val;
    //在對象中遍歷，只能用for..in..但是這個方法會將原型鏈上的屬性方法均會遍歷
    //因此用Object.hasOwnProperty進行過濾，只保留自身對象上的
    for(let key in data){
        if(data.hasOwnProperty(key)){
            val = data[key];
            //如果還是引用類型，則迭代直至所有的屬性均綁定了get/set
            if(typeof val === "object"){
                new Observer(val)
            }
            this.convert(key,val);
        }
    }
};
Observer.prototype.convert = function (key,val) {
    var that = this;
    Object.defineProperty(this.data,key,{
        enumerable:true,
        configurable:true,
        get:function () {
            console.log("你訪問了" + key);
            return val;
        },
        set:function (newVal,func) {
            console.log("你設(shè)置了" + key + "新的值為" + newVal);
            if(newVal == val) return;
            if(typeof newVal == "object"){
                new Observer(newVal);
            }
            that.eventBus.emit(key,newVal);    //觸發(fā)訂閱
            val = newVal;
            return val;
        }
    })
};


//發(fā)布訂閱模式，一個中間層（包括一個訂閱接口，一個取消接口，一個發(fā)布接口）
function PubSub(){
    this.handlers = {};
}
PubSub.prototype.on = function (eventType,handler) {
    if (!(eventType in this.handlers)){
        this.handlers[eventType] = [];
    }
    this.handlers[eventType].push(handler);
    return this;
}
PubSub.prototype.emit = function (eventType) {
    if(!this.handlers[eventType]) return;
    var handlerArgs = [].slice.call(arguments,1);  //刨除eventType，保留其他參數(shù)
    for(var i = 0; i < this.handlers[eventType].length;i++){
        this.handlers[eventType][i].apply(this,handlerArgs);  //實際上等于func(..rest);
    }
    return this;
}
PubSub.prototype.off = function (eventType) {
    if(!(eventType in this.handlers)) return;
    delete this.handlers[eventType];
    return this;
}
Observer.prototype.$watch = function(attr, callback){
    this.eventBus.on(attr, callback);
};


let app1 = new Observer({
    name: 'youngwind',
    age: 25
});


// 你需要實現(xiàn) $watch 這個 API
app1.$watch('age', function(age) {
    console.log(`我的年紀變了，現(xiàn)在已經(jīng)是：${age}歲了`)
});

app1.data.age = 100; // 輸出：'我的年紀變了，現(xiàn)在已經(jīng)是100歲了'