官網提供架構圖
單看這個圖呢,還木有說明,感覺有點蛋疼,作者的抽象度太高了,還好在前面已經大概分析過了執行流程
如圖
- 左邊是View視圖,我們就理解html結構,換句話就是說用戶能看到的界面,渲染頁面,綁定事件,切換類名,什麼髒活都攬
- 右邊是ViewModel 視圖模式,就是開發者通過avalon.define("xxx", function(vm){vm.firstName = "模型"})
- 既然是MVVM 那麼還有個M跑哪裏去了,M在MVVM定義中,M只是一個過客,被VM給再次包裝,它與其他表示業務狀態的東西融入VM(ViewModel)中,一個普通的JS對象,可能是後臺傳過來的,也可能是直接從VM中拿到 vm.firstName = "模型" 這個就是M咯,所以作者在圖中就沒體現出來吧
從定義ViewModel開始,掃描到vm關聯的東東 形成訪問器,好吧其實整個就這麼簡單
打開avalon源碼,我們就看到這樣的結構
(function(DOC) {
內部代碼
})(document);
這種基本的結構雖然已經被寫爛了 ,但是既然是分析就從來到位來一遍吧.
自調用匿名函數
jquery爲例
- 這是一個自調用匿名函數。什麼東東呢?在第一個括號內,創建一個匿名函數;第二個括號,立即執行
- 爲什麼要創建這樣一個“自調用匿名函數”呢?
通過定義一個匿名函數,創建了一個“私有”的命名空間,該命名空間的變量和方法,不會破壞全局的命名空間。這點非常有用也是一個JS框架必須支持的功能,jQuery被應用在成千上萬的JavaScript程序中,必須確保jQuery創建的變量不能和導入他的程序所使用的變量發生衝突。
3. 匿名函數從語法上叫函數直接量,JavaScript語法需要包圍匿名函數的括號,事實上自調用匿名函數有兩種寫法
寫法1
(function() {
console.info( this );
console.info( arguments );
}( window ) );
寫法2
(function() {
console.info( this );
console.info( arguments );
})( window );
4.爲什麼要傳入window呢?
通過傳入window變量,使得window由全局變量變爲局部變量,當在jQuery代碼塊中訪問window時,不需要將作用域鏈回退到頂層作用域,這樣可以更快的訪問window;這還不是關鍵所在,更重要的是,將window作爲參數傳入,可以在壓縮代碼時進行優化,看看jquery-1.6.1.min.js:
(function(a,b){})(window); // window 被優化爲 a
5.爲什麼要在在參數列表中增加undefined呢?
在 自調用匿名函數 的作用域內,確保undefined是真的未定義。因爲undefined能夠被重寫,賦予新的值。
undefined = "now it's defined";
alert( undefined );
瀏覽器測試結果:
6.注意到源碼最後的分號了嗎?
分號是可選的,但省略分號並不是一個好的編程習慣;爲了更好的兼容性和健壯性,請在每行代碼後加上分號並養成習慣。
總體架構
按代碼結構
(function(DOC) {
//命名空間
avalon = function(el) {
return new avalon.init(el);
};
//avalon掛在工具函數
// 迷你jQuery對象的原型方法
//css操作相關的方法
//ecma262兼容補丁
//nextTick 高級定時器
//Observable 觀察者模式
//Define 模型定義方法
//Parse 解析求值函數與執行作用域
//Scan 節點掃描
//Bind html自定義標籤綁定處理方法
})(document);
整個結構基本如上
以後會分析具體的每個實現,源碼分析儘量到行...