官網提供架構圖

單看這個圖呢,還木有說明,感覺有點蛋疼,作者的抽象度太高了,還好在前面已經大概分析過了執行流程

如圖

• 左邊是View視圖,我們就理解html結構,換句話就是說用戶能看到的界面,渲染頁面，綁定事件，切換類名，什么臟活都攬
• 右邊是ViewModel 視圖模式,就是開發者通過avalon.define("xxx", function(vm){vm.firstName = "模型"})
• 既然是MVVM 那么還有個M跑哪里去了,M在MVVM定義中，M只是一個過客,被VM給再次包裝,它與其他表示業務狀態的東西融入VM（ViewModel）中,一個普通的ＪＳ對象，可能是后臺傳過來的，也可能是直接從ＶＭ中拿到 vm.firstName = "模型" 這個就是M咯,所以作者在圖中就沒體現出來吧

從定義ViewModel開始,掃描到vm關聯的東東 形成訪問器,好吧其實整個就這么簡單。

打開avalon源碼,我們就看到這樣的結構：

(function(DOC) {  
 
     內部代碼  
 
})(document); 

這種基本的結構雖然已經被寫爛了，但是既然是分析就從來到位來一遍吧。

自調用匿名函數

jquery為例

1. 這是一個自調用匿名函數。什么東東呢？在第一個括號內，創建一個匿名函數；第二個括號，立即執行

2. 為什么要創建這樣一個“自調用匿名函數”呢？

通過定義一個匿名函數，創建了一個“私有”的命名空間，該命名空間的變量和方法，不會破壞全局的命名空間。這點非常有用也是一個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); 

整個結構基本如上。

以后會分析具體的每個實現,源碼分析盡量到行……

原文鏈接：http://www.cnblogs.com/aaronjs/p/3143641.html