本文學(xué)習(xí)自https://github.com/DMQ/mvvm擎值，建議大家去閱讀原文麻顶。
幾種實(shí)現(xiàn)雙向綁定的做法
目前幾種主流的mvc(vm)框架都實(shí)現(xiàn)了單向數(shù)據(jù)綁定狡汉，而我所理解的雙向數(shù)據(jù)綁定無非就是在單向綁定的基礎(chǔ)上給可輸入元素（input甸赃、textare等）添加了change(input)事件，來動(dòng)態(tài)修改model和 view趟据，并沒有多高深券犁。所以無需太過介懷是實(shí)現(xiàn)的單向或雙向綁定。
實(shí)現(xiàn)數(shù)據(jù)綁定的做法有大致如下幾種：
- 發(fā)布者-訂閱者模式（backbone.js）
- 臟值檢查（angular.js）
- 數(shù)據(jù)劫持（vue.js）
發(fā)布者-訂閱者模式: 一般通過sub, pub的方式實(shí)現(xiàn)數(shù)據(jù)和視圖的綁定監(jiān)聽汹碱，更新數(shù)據(jù)方式通常做法是 vm.set('property', value)粘衬，這種方式現(xiàn)在畢竟太low了，我們更希望通過 vm.property = value這種方式更新數(shù)據(jù)咳促，同時(shí)自動(dòng)更新視圖稚新，于是有了下面兩種方式。
臟值檢查: angular.js 是通過臟值檢測(cè)的方式比對(duì)數(shù)據(jù)是否有變更跪腹，來決定是否更新視圖褂删，最簡(jiǎn)單的方式就是通過 setInterval() 定時(shí)輪詢檢測(cè)數(shù)據(jù)變動(dòng)，當(dāng)然Google不會(huì)這么low冲茸，angular只有在指定的事件觸發(fā)時(shí)進(jìn)入臟值檢測(cè)屯阀，大致如下：
- DOM事件，譬如用戶輸入文本轴术，點(diǎn)擊按鈕等难衰。( ng-click )
- XHR響應(yīng)事件 ( $http )
- 瀏覽器Location變更事件 ( $location )
- Timer事件( $timeout , $interval )
- 執(zhí)行 $digest() 或 $apply()
數(shù)據(jù)劫持: vue.js 則是采用數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式，通過Object.defineProperty()來劫持各個(gè)屬性的setter逗栽，getter召衔，在數(shù)據(jù)變動(dòng)時(shí)發(fā)布消息給訂閱者，觸發(fā)相應(yīng)的監(jiān)聽回調(diào)祭陷。
思路整理
已經(jīng)了解到vue是通過數(shù)據(jù)劫持的方式來做數(shù)據(jù)綁定的，其中最核心的方法便是通過Object.defineProperty()來實(shí)現(xiàn)對(duì)屬性的劫持趣席，達(dá)到監(jiān)聽數(shù)據(jù)變動(dòng)的目的兵志，無疑這個(gè)方法是本文中最重要、最基礎(chǔ)的內(nèi)容之一宣肚，如果不熟悉defineProperty想罕，猛戳這里 整理了一下，要實(shí)現(xiàn)mvvm的雙向綁定，就必須要實(shí)現(xiàn)以下幾點(diǎn)：
1按价、 實(shí)現(xiàn)一個(gè)數(shù)據(jù)監(jiān)聽器Observer惭适，能夠?qū)?shù)據(jù)對(duì)象的所有屬性進(jìn)行監(jiān)聽，如有變動(dòng)可拿到最新值并通知訂閱者 楼镐。
2癞志、實(shí)現(xiàn)一個(gè)指令解析器Compile，對(duì)每個(gè)元素節(jié)點(diǎn)的指令進(jìn)行掃描和解析框产，根據(jù)指令模板替換數(shù)據(jù)凄杯，以及綁定相應(yīng)的更新函數(shù)。
3秉宿、實(shí)現(xiàn)一個(gè)Watcher戒突，作為連接Observer和Compile的橋梁，能夠訂閱并收到每個(gè)屬性變動(dòng)的通知描睦，執(zhí)行指令綁定的相應(yīng)回調(diào)函數(shù)膊存，從而更新視圖 。
4忱叭、mvvm入口函數(shù)隔崎，整合以上三者。
實(shí)現(xiàn)Observer
我們知道可以利用Obeject.defineProperty()來監(jiān)聽屬性變動(dòng)窑多，那么將需要observe的數(shù)據(jù)對(duì)象進(jìn)行遞歸遍歷仍稀，包括子屬性對(duì)象的屬性，都加上 setter和getter 這樣的話埂息，給這個(gè)對(duì)象的某個(gè)值賦值技潘，就會(huì)觸發(fā)setter，那么就能監(jiān)聽到了數(shù)據(jù)變化千康。相關(guān)代碼可以是這樣：
var data = {name: 'kindeng'};
observe(data);
data.name = 'dmq'; // 哈哈哈享幽，監(jiān)聽到值變化了 kindeng --> dmq
function observe(data) {
if (!data || typeof data !== 'object') {
return;
}
// 取出所有屬性遍歷
Object.keys(data).forEach(function(key) {
defineReactive(data, key, data[key]);
});
};
function defineReactive(data, key, val) {
observe(val); // 監(jiān)聽子屬性
Object.defineProperty(data, key, {
enumerable: true, // 可枚舉
configurable: false, // 不能再define
get: function() {
return val;
},
set: function(newVal) {
console.log('哈哈哈，監(jiān)聽到值變化了 ', val, ' --> ', newVal);
val = newVal;
}
});
}
這樣我們已經(jīng)可以監(jiān)聽每個(gè)數(shù)據(jù)的變化了拾弃，那么監(jiān)聽到變化之后就是怎么通知訂閱者了值桩，所以接下來我們需要實(shí)現(xiàn)一個(gè)消息訂閱器，很簡(jiǎn)單豪椿，維護(hù)一個(gè)數(shù)組奔坟，用來收集訂閱者，數(shù)據(jù)變動(dòng)觸發(fā)notify搭盾，再調(diào)用訂閱者的update方法咳秉，代碼改善之后是這樣：
// ... 省略
function defineReactive(data, key, val) {
var dep = new Dep();
observe(val); // 監(jiān)聽子屬性
Object.defineProperty(data, key, {
// ... 省略
set: function(newVal) {
if (val === newVal) return;
console.log('哈哈哈，監(jiān)聽到值變化了 ', val, ' --> ', newVal);
val = newVal;
dep.notify(); // 通知所有訂閱者
}
});
}
function Dep() {
this.subs = [];
}
Dep.prototype = {
addSub: function(sub) {
this.subs.push(sub);
},
notify: function() {
this.subs.forEach(function(sub) {
sub.update();
});
}
};
那么問題來了鸯隅，誰是訂閱者澜建？怎么往訂閱器添加訂閱者？ 沒錯(cuò)，上面的思路整理中我們已經(jīng)明確訂閱者應(yīng)該是Watcher, 而且var dep = new Dep();是在 defineReactive方法內(nèi)部定義的炕舵，所以想通過dep添加訂閱者何之，就必須要在閉包內(nèi)操作，所以我們可以在 getter里面動(dòng)手腳：
// Observer.js
// ...省略
Object.defineProperty(data, key, {
get: function() {
// 由于需要在閉包內(nèi)添加watcher咽筋，所以通過Dep定義一個(gè)全局target屬性溶推，暫存watcher, 添加完移除
Dep.target && dep.addDep(Dep.target);
return val;
}
// ... 省略
});
// Watcher.js
Watcher.prototype = {
get: function(key) {
Dep.target = this;
this.value = data[key]; // 這里會(huì)觸發(fā)屬性的getter，從而添加訂閱者
Dep.target = null;
}
}
這里已經(jīng)實(shí)現(xiàn)了一個(gè)Observer了晤硕，已經(jīng)具備了監(jiān)聽數(shù)據(jù)和數(shù)據(jù)變化通知訂閱者的功能悼潭。
