感謝百度前端技術學院帶領我進步！謹以此文，記錄我的學習過程~
動態數據綁定
Vue的初學者一定對于數據的動態綁定并不陌生，從最簡單的需求開始一步步理解其實現原理，以及相關涉及到的知識點。
一
let app1 = new Observer({
name: 'youngwind',
age: 25
});
let app2 = new Observer({
university: 'bupt',
major: 'computer'
});
// 要實現的結果如下：
app1.data.name // 你訪問了 name
app.data.age = 100; // 你設置了 age，新的值為100
app2.data.university // 你訪問了 university
app2.data.major = 'science' // 你設置了 major，新的值為 science
實際上這需要用到ES5中的Object.prototype.defineProperty(參見文檔)這個方法,簡單敘述一下其參數：
<blockquote>
Object.defineProperty(obj,key,descriptor)：
- obj是待操作的對象；
- key是對象中待操作的屬性名
- descriptor是一個配置對象，其中有：
configurable:配置總開關，默認為false，只有當其值為true時，才能動態的修改配置方法；
enumerable：枚舉開關，默認為false，只有當其值為true時，該屬性才能被枚舉；
value：默認為undefined，即為本意obj[key] = value;
writable:默認為false，只有其值為true時，屬性值才能被改寫；
set/get：為屬性提供getter和setter方法。
</blockquote>
為了實現第一個需求，我們需要為每一個屬性均提供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("你設置了" + key + "新的值為" + newVal);
if(newVal == val) return;
//如果值為對象，那么還得給對象里的屬性綁定setter/getter
if(typeof newVal == "object"){
new Observer(newVal);
}
val = newVal;
return val;
}
})
}
二
綁定了getter,setter后，只是進行了數據獲取/修改后的反饋，并沒有涉及到觸發數據改動后的回調。我們可以用事件觸發的思路，也就是利用發布訂閱（觀察者）模式來進行函數回調。
簡單來說：就是單獨創建一個中間層，用以統一管理事件，該中間層給出兩個接口，一個用于訂閱事件，一個用于發布事件；
一個簡單的實現：
//發布訂閱模式，一個中間層（包括一個訂閱接口，一個取消接口，一個發布接口）
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，保留其他參數
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
});
// 你需要實現 $watch 這個 API
app1.$watch('age', function(age) {
console.log(`我的年紀變了，現在已經是：${age}歲了`)
});
app1.data.age = 100; // 輸出：'我的年紀變了，現在已經是100歲了'
此時，我們在第一個需求的基礎上，利用觀察者模式的思想添加中間層：
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("你設置了" + key + "新的值為" + newVal);
if(newVal == val) return;
if(typeof newVal == "object"){
new Observer(newVal);
}
that.eventBus.emit(key,newVal); //觸發訂閱
val = newVal;
return val;
}
})
};
//發布訂閱模式，一個中間層（包括一個訂閱接口，一個取消接口，一個發布接口）
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，保留其他參數
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
});
// 你需要實現 $watch 這個 API
app1.$watch('age', function(age) {
console.log(`我的年紀變了，現在已經是：${age}歲了`)
});
app1.data.age = 100; // 輸出：'我的年紀變了，現在已經是100歲了'
