MVVM的實現原理入門了解2 資料繫結初始化

資料繫結主要應用檔案為 observer.js 

因為 在mvvm檔案中 資料**後 執行的**為

object.keys(data).foreach(function(key) );

observe(data, this);

observer.js的內容

//資料繫結

function observer(data) 
observer.prototype = );
},convert: function(key, val) ,
// 使用資料劫持實現資料繫結的關鍵**
definereactive: function(data, key, val) } 此時dep數量為4個 分別為name option a b 等對應
var dep = new dep();
var childobj = observe(val); // 如果data中的屬性為物件 那麼遞迴呼叫observe 直到不是物件
object.defineproperty(data, key,
return val;
},//setter 主要用來更新介面
set: function(newval) 
val = newval;
// 新的值是object的話，進行監聽
childobj = observe(newval);
// 通知訂閱者 也就是通知dep中 subs中存入的watcher
dep.notify();
}});
}};function observe(value, vm) 
// 返回observer例項 傳入 data
return new observer(value);
};var uid = 0;
function dep() 
dep.prototype = ,
// 呼叫將adddep的this指向為 dep.target 也就是說 watcher呼叫adddep
// 建立dep與watcher之間關係的**
depend: function() ,
removesub: function(sub) 
},notify: function() );
}};dep.target = null;

var childobj = observe(val);

在observer.js中的執行流程

在mvvm中呼叫observe(data,this) -->  因為data為乙個物件因此 new observer(data)

將data儲存在observer函式上 呼叫walk並傳遞data

walk方法地主要功能為 遍歷data中的屬性值與屬性名 並傳遞給實現資料繫結的關鍵方法definereactive 省略convert

definereactive的作用就是使用資料劫持實現資料繫結  definereactive中

new dep(); 稍後講

var childobj = observe(val); 這一步的作用就是將傳遞的data中的屬性值進行遞迴遍歷，檢視是否為物件，跳出遞迴的條件為data中的屬性值不為物件時  如 data: }     目的就是 將data中的name屬性進行資料劫持、對city中的north屬性進行資料劫持

使用object.defineproperty 實現資料劫持 主要就是為data中的每乙個屬性名新增set與get方法

set方法 值發生改變時呼叫

set: function(newval) 

val = newval;
childobj = observe(newval);//判斷這個新的值是否為物件 如果是則進行監視
dep.notify();//通知訂閱者
}

get: function() 

return val; 
}

對於dep的理解

dep中有兩個屬性 乙個為id數字,乙個為subs陣列 在observer.js檔案中有乙個

var uid = 0; 

function dep()

definereactive方法是為每乙個data中的屬性進行繫結set與get事件  由此可以指定 dep的id就是data中每乙個屬性的唯一標識

比如

data: 

},

目前observer初始化所作的全部內容 由於dep.target = null 所以dep.depend()不執行     dep.notify()因為subs陣列為空 所以也不執行 

編譯原理入門（二） 編譯系統的結構

在下圖中，高階語言是輸入，而組合語言或者機器語言是輸出，編譯器的作用便是做乙個中間轉換的過程，我們來看看編譯器是怎麼把源語言翻譯成機器語言的，此部分我們需要借助生活中常見的英漢互譯來幫助我們更好的理解編譯器的整個結構和編譯過程。如下圖，學過英語的都知道一些英語的語法組成，簡單的英語結構可以分為主謂賓...

Vue的MVVM原理及其實現

mvvm是model view viewmodel的簡寫。它本質上就是mvc 的改進版。mvvm分為三個部分 分別是m model，模型層 v view，檢視層 vm viewmodel，v與m連線的橋梁，也可以看作為控制器 3 vm v與m溝通的橋梁，負責監聽m或者v的修改，是實現mvvm雙向繫結...

多型 2 多型的實現原理

當類中宣告虛函式時，編譯器會在類中生成乙個虛函式表 虛函式表是乙個儲存類成員函式指標的資料結構 虛函式表是由編譯器自動生成與維護的 virtual成員函式會被編譯器放入虛函式表中 存在虛函式時，每個物件中都有乙個指向虛函式表的指標 vfptr指標 物件在建立的時,由編譯器對vfptr指標進行初始化 ...