MVVM框架主要包含3個(gè)部分:model、view和 viewmodel。
- Model:指的是數(shù)據(jù)部分，對應(yīng)到前端就是javascript對象
- View:指的是視圖部分，對應(yīng)前端就是dom
- Viewmodel:就是連接視圖與數(shù)據(jù)的中間件
1.雙向數(shù)據(jù)綁定的實(shí)現(xiàn)方式
簡單的來說，就是框架的控制器層（這里的控制器層是一個(gè)泛指，可以理解為控制view行為和聯(lián)系model層的中間件）和UI展示層（view層）建立一個(gè)雙向的數(shù)據(jù)通道。當(dāng)這兩層中的任何一方發(fā)生變化時(shí)，另一層將會(huì)自動(dòng)作出相應(yīng)的變化。
一般來說要實(shí)現(xiàn)這種雙向數(shù)據(jù)綁定，在前端我目前了解的有三種形式：
- 基于臟檢查 angular,regular（網(wǎng)易開發(fā)）
- 觀察機(jī)制
- 封裝屬性訪問器
2.基于臟檢查
目前angular,regular的實(shí)現(xiàn)都是基于臟檢查。當(dāng)發(fā)生某些特定的事情的時(shí)候，框架會(huì)調(diào)用相關(guān)的digest方法。內(nèi)部邏輯就是遍歷所有的watcher,對監(jiān)控的屬性做對比。如果值發(fā)生了變化，則執(zhí)行相應(yīng)的handler。
2.1基于regular詳細(xì)介紹一下：
watcher對象看起來是這樣的：
{
get: function(context){...} //獲得表達(dá)式當(dāng)前求值，此函數(shù)在解析時(shí)，已經(jīng)生成
set: function(){} // 有些表達(dá)式可以生成set函數(shù)，用于處理賦 值，這個(gè)一般用于雙向綁定的場景
once: false // 此監(jiān)聽器是否只生效一次
last: undefined// 上一次表達(dá)式的求值結(jié)果
fn: function(newvalue, oldvalue){} // 即你傳入$watch的第二個(gè)參數(shù)，當(dāng)值改變時(shí)，會(huì)調(diào)用此函數(shù)
// ...
}
當(dāng)系統(tǒng)進(jìn)入臟檢查階段，遍歷所有的$watch綁定的watcher,然后對比watcher.get()與watcher.last,如果不同則運(yùn)行對應(yīng)的watcher.fn(newvalue, oldvalue)。然后再進(jìn)入下一個(gè)watcher的檢查。
何時(shí)進(jìn)行臟檢查？
在Regular中，digest階段是由$update
方法觸發(fā)的。
具體源碼在regular/src/helper/watcher.js里面
由于regularjs是基于臟檢查，所以當(dāng)不是由regularjs本身控制的操作(如事件、指令)引起的數(shù)據(jù)操作，可能需要你手動(dòng)的去同步data與view的數(shù)據(jù). $update方法即幫助將你的data同步到view層.
//手動(dòng)同步
var component = new Regular()；
component.data.name = 'leeluolee'
// you need call $update to Synchronize data and view
component.$update();
//自動(dòng)進(jìn)入
<div on-click={blog.title='Hello'}>{blog.title}</div>
總結(jié)：但是很顯然，臟檢查是低效的，它的效率基本上取決于你綁定的觀察者數(shù)量，在Regular中，你可以通過[@(Expression)
](https://regularjs.github.io/reference?syntax-zh#bind-once)元素來控制你的觀察者數(shù)量。
3.觀察者機(jī)制
使用ES7中的 Object.observe 方法對對象（或者其屬性）進(jìn)行監(jiān)控觀察，一旦其發(fā)生變化時(shí)，將會(huì)執(zhí)行相應(yīng)的handler。這是目前監(jiān)控屬性數(shù)據(jù)變更最完美的一種方法，語言（瀏覽器）原生支持，沒有什么比這個(gè)更好了。唯一的遺憾就是目前支持廣度還不行，有待全面推廣。
4.封裝屬性訪問器(存取器get,set）
vue.js和avalon.js實(shí)現(xiàn)數(shù)據(jù)雙向綁定的原理就是屬性訪問器。
它使用了ES5中的定義標(biāo)準(zhǔn)屬性的Object.defineProperty 方法。
Object.defineProperty(obj, prop, descriptor)
//obj 待修改的對象
//prop 待修改的屬性名稱
//descriptor 待修改屬性的相關(guān)描述，要求傳入一個(gè)對象。
//@{param} descriptor
1.configurable ，屬性是否可配置。可配置的含義包括：是否可以刪除屬性（ delete ），是否可以修改屬性的 writable 、 enumerable 、 configurable 屬性。
2.enumerable ，屬性是否可枚舉?？擅杜e的含義包括：是否可以通過 for...in 遍歷到，是否可以通過 Object.keys() 方法獲取屬性名稱。
3.writable ，屬性是否可重寫?？芍貙懙暮x包括：是否可以對屬性進(jìn)行重新賦值。
4.value ，屬性的默認(rèn)值。
5.set ，屬性的重寫器。一旦屬性被重新賦值，此方法被自動(dòng)調(diào)用。
6.get ，屬性的讀取器。一旦屬性被訪問讀取，此方法被自動(dòng)調(diào)用。
Object.defineProperty使用示例：
var o = {};
Object.defineProperty(o, 'name', { value: 'erik'});
console.log(Object.getOwnPropertyDescriptor(o, 'name'));
// {
value: "erik",
writable: false,
enumerable:false,
configurable: false
}
Object.defineProperty(o, 'age', {
value: 23,
configurable: true,
writable: true
});
console.log(o.age); // 23
o.age = 18;
console.log(o.age); // 18. 因?yàn)閍ge屬性是可重寫的
console.log(Object.keys(o)); // []. name和age屬性都不是可枚舉的
Object.defineProperty(o, 'sex', {
value: '女',
writable: false
});
o.sex = '男'; // 這里的賦值其實(shí)是不起作用的
console.log(o.sex); // '女';
delete o.sex; // false, 屬性刪除的動(dòng)作也是無效的
注意：
- Object.defineProperty() 方法設(shè)置屬性時(shí)，屬性不能同時(shí)聲明訪問器屬性（ set 和 get ）和 writable 或者 value 屬性。 意思就是，某個(gè)屬性設(shè)置了 writable 或者 value 屬性，那么這個(gè)屬性就不能聲明 get 和 set 了，反之亦然。
- 因?yàn)?Object.defineProperty() 在聲明一個(gè)屬性時(shí)，不允許同一個(gè)屬性出現(xiàn)兩種以上存取訪問控制。
4.1基于vue使用封裝屬性訪問器
首先，vuejs在實(shí)例化的過程中，會(huì)對遍歷傳給實(shí)例化對象選項(xiàng)中的data 選項(xiàng)，遍歷其所有屬性并使用 Object.defineProperty 把這些屬性全部轉(zhuǎn)為 getter/setter。
同時(shí)每一個(gè)實(shí)例對象都有一個(gè)watcher實(shí)例對象，他會(huì)在模板編譯的過程中,用getter去訪問data的屬性，watcher此時(shí)就會(huì)把用到的data屬性記為依賴，這樣就建立了視圖與數(shù)據(jù)之間的聯(lián)系。當(dāng)之后我們渲染視圖的數(shù)據(jù)依賴發(fā)生改變（即數(shù)據(jù)的setter被調(diào)用）的時(shí)候，watcher會(huì)對比前后兩個(gè)的數(shù)值是否發(fā)生變化，然后確定是否通知視圖進(jìn)行重新渲染。這樣就實(shí)現(xiàn)了所謂的雙向數(shù)據(jù)綁定。
