一 MVC模式和MVVM模式
1.MVC模式
MVC是一種軟件架構(gòu)模式.把軟件分為三層(Model, View, Controller)
model 用來存儲數(shù)據(jù)皂股，做數(shù)據(jù)的持久化
view 用來展示數(shù)據(jù)
-
controller 用來控制程序的流程
MVC模式.png
2.MVVM模式
mvvm 分為model(模型) view(視圖) viewModel(視圖模型)
- model 用來存儲數(shù)據(jù)
- view 用來展示數(shù)據(jù)
-
ViewModel 關(guān)聯(lián)數(shù)據(jù),和model實現(xiàn)雙向綁定。
MVVM模式.png
二 實現(xiàn)雙向綁定
- backbone 發(fā)布者訂閱者模式
一般通過sub, pub的方式實現(xiàn)數(shù)據(jù)和視圖的綁定監(jiān)聽发乔，更新數(shù)據(jù)方式通常做法是 vm.set('property', value) - angular 臟值檢測
angular.js 是通過臟值檢測的方式比對數(shù)據(jù)是否有變更琢锋，來決定是否更新視圖膨更，最簡單的方式就是通過 setInterval() 定時輪詢檢測數(shù)據(jù)變動剧董，當(dāng)然Google不會這么low，angular只有在指定的事件觸發(fā)時進入臟值檢測瑰妄，大致如下：
DOM事件，譬如用戶輸入文本钧大，點擊按鈕等翰撑。( ng-click )
XHR響應(yīng)事件 ( $http )
瀏覽器Location變更事件 ( $location )
Timer事件( $timeout , $interval )
執(zhí)行 $digest() 或 $apply()
- vue 數(shù)據(jù)劫持（結(jié)合發(fā)布者訂閱者的模式）
vue.js 則是采用數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式，通過Object.defineProperty()來劫持各個屬性的setter，getter眶诈，在數(shù)據(jù)變動時發(fā)布消息給訂閱者涨醋，觸發(fā)相應(yīng)的監(jiān)聽回調(diào)。
關(guān)于Object.defineProperty
語法：
Object.defineProperty(obj, prop, descriptor)
參數(shù)說明：
obj：必需逝撬。目標(biāo)對象
prop：必需浴骂。需定義或修改的屬性的名字
descriptor：必需。目標(biāo)屬性所擁有的特性
返回值：
傳入函數(shù)的對象宪潮。即第一個參數(shù)obj
針對屬性溯警，我們可以給這個屬性設(shè)置一些特性，比如是否只讀不可以寫狡相；是否可以被for..in或Object.keys()遍歷梯轻。
給對象的屬性添加特性描述，目前提供兩種形式：數(shù)據(jù)描述和存取器描述尽棕。
數(shù)據(jù)描述符
- value
屬性對應(yīng)的值,可以使任意類型的值喳挑，默認為undefined - writable
屬性的值是否可以被重寫。設(shè)置為true可以被重寫滔悉；設(shè)置為false伊诵，不能被重寫。默認為false回官。 - enumerable
此屬性是否可以被枚舉（使用for...in或Object.keys()）曹宴。設(shè)置為true可以被枚舉；設(shè)置為false歉提，不能被枚舉笛坦。默認為false。 - configurable
是否可以刪除目標(biāo)屬性或是否可以再次修改屬性的特性（writable, configurable, enumerable）唯袄。設(shè)置為true可以被刪除或可以重新設(shè)置特性弯屈；設(shè)置為false蜗帜，不能被可以被刪除或不可以重新設(shè)置特性恋拷。默認為false。
這個屬性起到兩個作用：
目標(biāo)屬性是否可以使用delete刪除
目標(biāo)屬性是否可以再次設(shè)置特性
一旦使用Object.defineProperty給對象添加屬性厅缺，那么如果不設(shè)置屬性的特性蔬顾，那么configurable、enumerable湘捎、writable這些值都為默認的false
存取描述
當(dāng)使用存取器描述屬性的特性的時候诀豁，允許設(shè)置以下特性屬性：
var obj = {};
Object.defineProperty(obj,"newKey",{
get:function (){} | undefined,
set:function (value){} | undefined
configurable: true | false
enumerable: true | false
});
注意：當(dāng)使用了getter或setter方法，不允許使用writable和value這兩個屬性
getter/setter
當(dāng)設(shè)置或獲取對象的某個屬性的值的時候窥妇，可以提供getter/setter方法舷胜。
getter 是一種獲得屬性值的方法
setter是一種設(shè)置屬性值的方法。
在特性中使用get/set屬性來定義對應(yīng)的方法活翩。
var obj = {};
var initValue = 'hello';
Object.defineProperty(obj,"newKey",{
get:function (){
//當(dāng)獲取值的時候觸發(fā)的函數(shù)
return initValue;
},
set:function (value){
//當(dāng)設(shè)置值的時候觸發(fā)的函數(shù),設(shè)置的新值通過參數(shù)value拿到
initValue = value;
}
});
//獲取值
console.log( obj.newKey ); //hello
//設(shè)置值
obj.newKey = 'change value';
console.log( obj.newKey ); //change value
configurable
當(dāng)且僅當(dāng)該屬性的 configurable 為 true 時烹骨，該屬性描述符才能夠被改變翻伺，同時該屬性也能從對應(yīng)的對象上被刪除。默認為 false沮焕。
enumerable
當(dāng)且僅當(dāng)該屬性的enumerable為true時吨岭，該屬性才能夠出現(xiàn)在對象的枚舉屬性中。默認為 false峦树。
