今天是周五，今天一行代碼也沒有寫，心血來潮想看看vue.js的實現原理和雙向綁定MVVM。來吧BB那么多費話真沒用，講一點實現基礎理論是必要的
我相信大家對Angular.JS的成為下一代最主流的MVC架構還記憶在心，但好景不長，angular2.0 vue.js react 紛紛居上。為什么我把vue.js夾在中間
因為1.0抄angular的，2.0抄react的，這我也能理解尤大神，沒辦法，一個想搞過一個團隊，只有抄，說錯了，（借鑒）我只能說真心好，快，輕。
數據劫持:vue.js 則是采用數據劫持結合發布者-訂閱者模式的方式，通過Object.defineProperty()
來劫持各個屬性的setter
，getter
，在數據變動時發布消息給訂閱者，觸發相應的監聽回調。
已經了解到vue是通過數據劫持的方式來做數據綁定的，其中最核心的方法便是通過Object.defineProperty()
來實現對屬性的劫持，達到監聽數據變動的目的，無疑這個方法是本文中最重要、最基礎的內容之一，要實現mvvm的雙向綁定，就必須要實現以下幾點：
1、實現一個數據監聽器Observer，能夠對數據對象的所有屬性進行監聽，如有變動可拿到最新值并通知訂閱者
2、實現一個指令解析器Compile，對每個元素節點的指令進行掃描和解析，根據指令模板替換數據，以及綁定相應的更新函數
3、實現一個Watcher，作為連接Observer和Compile的橋梁，能夠訂閱并收到每個屬性變動的通知，執行指令綁定的相應回調函數，從而更新視圖4、mvvm入口函數，整合以上三者
我寫的文章永遠是詳解，不然就不是我的個性了，什么github，這種里面的東西是治標不治本，拿來用用可以，換種自己想要的東西，就是一頭苦惱，所以這次分享內面內容分n次說,我也不確定幾次！反正就是詳細說！我也不知道最后分幾部！就當看抗日劇吧
我做解析還是喜歡先把要用到的知識點先拿出來解析一下，結合一下之后你就會發現，看代碼一點都不難
第一章Object.keys()和 Object.defineProperty用法
Object.keys()
--引用MDN
Object.keys()方法會返回一個由給定對象的所有可枚舉自身屬性的屬性名組成的數組，數組中屬性名的排列順序和使用for-in
循環遍歷該對象時返回的順序一致 (順序一致不包括數字屬性)（兩者的主要區別是 for-in 還會遍歷出一個對象從其原型鏈上繼承到的可枚舉屬性）。
返回參數
返回可枚舉的自身屬性的屬性名
描述
Object.keys
返回一個所有元素為字符串的數組，其元素來自于從給定的對象上面可直接枚舉的屬性。這些屬性的順序與手動遍歷該對象屬性時的一致。
var obj = {
name : "ziksang",
age : 20
}//聲明一個對象
console.log(Object.keys(obj))
//["name", "age"]打印出來的是對象的屬性名
//>>>>-----------------------------
//以下所有返回的都是字符串數組
var arr = ["a", "b", "c"];
console.log(Object.keys(arr));
//["0", "1", "2"] 返回的是合并合后數組的下標
// 類數組對象，簡稱類似數組的對象
var obj2 = { 0 : "a", 1 : "b", 2 : "c"};
console.log(Object.keys(obj2));
//["0", "1", "2"]打印出來健值,簡稱屬性名
function demo(){
console.log(arguments)
//這里的arguments也是一個類數組對象
return Object.keys(arguments)
}
console.log(demo(1,2,3))
////["0", "1", "2"]打印出來是下標,怎么說呢也可以叫為下標，也可以叫我屬性名
//>>>>------------------------------------
//具有隨機鍵排序的數組類對象
var an_obj = { 100: 'a', 2: 'b', 7: 'c' };
//果如遇到排序不正常的類數組對象
//最后的返回值會給你從小到大排序
console.log(Object.keys(an_obj)); // console: ['2', '7', '100']
以上有那些用法，我已經給大家很祥細的講出來了
細節注意點
var obj = {
name : "ziksang",
}
//聲明一個obj對象
obj.__proto__.a = 1
//在obj的原型上加一個a的屬性
for( prop in obj){
console.log(prop)
//name,a //for in 是可以枚舉
}
console.log(Object.keys(obj))
//["name"]不可以枚舉對象上原型的屬性名
//>>>>-----------------------------------------------------
console.log(Object.keys("foo"));
// TypeError: "foo" is not an object (ES5 code)
console.log(Object.keys("foo"));
//因為在ES6里，字符串也是一個Iterator（可以遍歷的對象）
//分把字符串當作數組分隔，然后取下標
// ["0", "1", "2"] (ES6 code)
Object.defineProperty()
方法會直接在一個對象上定義一個新屬性，或者修改一個已經存在的屬性， 并返回這個對象。
語法
Object.defineProperty(obj, prop, descriptor)
參數
obj
需要定義屬性的對象。
prop
需定義或修改的屬性的名字。
descriptor
將被定義或修改的屬性的描述符。
返回值
返回傳入函數的對象，即第一個參數obj
描述
雖然以下這句話不是我寫的，但是一定要細讀，這才是Object.defineProperty精髓
該方法允許精確添加或修改對象的屬性。一般情況下，我們為對象添加屬性是通過賦值來創建并顯示在屬性枚舉中（for...in
或Object.keys
方法），但這種方式添加的屬性值可以被改變，也可以被刪除。而使用Object.defineProperty()則允許改變這些額外細節的默認設置。例如，默認情況下，使用 Object.defineProperty()增加的屬性值是不可改變的。
對象里目前存在的屬性描述符有兩種主要形式：數據描述符和存取描述符。數據描述符是一個擁有可寫或不可寫值的屬性。存取描述符是由一對 getter-setter 函數功能來描述的屬性。描述符必須是兩種形式之一；不能同時是兩者。
數據描述符和存取描述符均具有以下可選鍵值：
configurable
當且僅當該屬性的 configurable 為 true 時，該屬性描述符
才能夠被改變，也能夠被刪除。**默認為false
**。
enumerable
當且僅當該屬性的 enumerable 為 true 時，該屬性才能夠出現在對象的枚舉屬性中。
**默認為false。
**
數據描述符同時具有以下可選鍵值：
value
該屬性對應的值。可以是任何有效的 JavaScript 值（數值，對象，函數等）。默認為undefined
。
writable
當且僅當該屬性的 writable 為 true 時，該屬性才能被
賦值運算符改變。
**默認為false
**。
存取描述符同時具有以下可選鍵值：
get
一個給屬性提供 getter 的方法，如果沒有 getter 則為undefined
。該方法返回值被用作屬性值。默認為undefined
。
set
一個給屬性提供 setter 的方法，如果沒有 setter 則為undefined
。該方法將接受唯一參數，并將該參數的新值分配給該屬性。默認為undefined
。
記住，這些選項不一定是自身屬性，如果是繼承來的也要考慮。為了確認保留這些默認值，你可能要在這之前凍結Object.prototype
，明確指定所有的選項，或者將proto
屬性指向null
。
//這上面的是一種隱式寫法
//所有數據描述符都是默認為false的
Object.defineProperty(obj, "key", {
__proto__: null, // 沒有繼承的屬性
// 不可 enumerable(枚舉)
// 不可 configurable(配置)
// 不可 writable(從寫)
value: "static" // 作為默認值
});
// 顯式寫法
Object.defineProperty(obj, "key", {
__proto__ : null
enumerable: false,
configurable: false,
writable: false,
value: "static"
});
如果對象中不存在指定的屬性，Object.defineProperty()
就創建這個屬性。當描述符中省略某些字段時，這些字段將使用它們的默認值。擁有布爾值的字段的默認值都是false。value，get和set字段的默認值為undefined。定義屬性時如果沒有get/set/value/writable，那它被歸類為數據描述符。
var o = {};
//聲明一個對象
var a;//聲明一個變量a
Object.defineProperty(o, "b", {
get : function(){ return a },
//調用o.b返回的是一個Undefined
set : function(newValue){ a = newValue },
//調用o.b = 3 然后b 的 屬性值就為3
enumerable : true,//可枚舉，為數據描述符
configurable : true//可配置 ，為數據描述符
});
//>>>>-----------------------------------------------------
var o = {};
//聲明一個對象
Object.defineProperty(o, "a", {
value : 37, //存儲描述 ，設置a的值為37
writable : false, //數據描述，不可修改
enumerable : true, //可枚舉
configurable : true //可配置
});
console.log(o.a) //=>37
o.a = 4
//因為是不可修改的，所以改了沒用
console.log(o.a) //=>4
//>>>---------------------------------------------------
var o ={}
Object.defineProperty(o, "conflict", {
value: "0x9f91102",
get: function() { return "0xdeadbeef" } //存儲描述符不能同樣
});
//底下報錯
// throws a TypeError: value appears only in data descriptors, get appears only in accessor descriptors
舉兩個例子
1.例子1
function Archiver() {
var count = 1;
//聲明一個變量count =1
var archive = [];
//聲明空數組
Object.defineProperty(this, 'temperature', {
//在構造函數定義一個屬性，this指向這個構造函數
//temperature是定義的屬性名
get: function() {
console.log('get!');
return count;
//返回count變量，就是給他初時值義定
},
set: function(value) {
count = value;
//當給屬性從新定義值時把新值給初始值
archive.push({ val: count });
//把每次設置的值扔進一個數組里
}
});
this.getArchive = function() { return archive; };
//在構造函數里的方法，返回數組值
}
var arc = new Archiver();
console.log(arc.temperature); // 'get!'
arc.temperature = 11;
arc.temperature = 13;
console.log(arc.getArchive()); // [{ val: 11 }, { val: 13 }]
2.例子2
//定義一個對象，這個對象用于定義的描述
var pattern = {
get: function () {
return 'I alway return this string,whatever you have assigned';
},
//get方法返回一個字符串
set: function () {
this.myname = 'this is my name string';
}
//設置myname的值，這里的this是運行時執行的，所以這里不指向pattern對象
};
function TestDefineSetAndGet() {
Object.defineProperty(this, 'myproperty', pattern);
}
//聲明一個構造函數
//1.this.指向這個構造函數
//2.myproperty是指定構造函數的一個屬性
//parttern是里面的描述
var instance = new TestDefineSetAndGet();
instance.myproperty = 'test';
//設置了定義屬性的值，這里有什么用呢？改變myproperty的值
//非也，本質上是出發set方法讓this.myname有值
//如果去掉的話，你會發現console.log(instance.myname);//undefined
console.log(instance.myproperty);
// 'I alway return this string,whatever you have assigned'
console.log(instance.myname);
// 'this is my name string'
就光這些知識點，有沒有發覺已經離數據驅動的原理很相近了，就是通過get 和 set的方式來劫持這些屬性，所以造房子，必須把根基打好，所以下一章我就要開始講 Observe如何監聽，觀察這些屬性
