輕量級前端MVVM框架avalon - 總體架構

官網提供架構圖

 

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

如圖

• 左邊是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);

 

整個結構基本如上

之後會分析具體的每一個實現,源碼分析儘可能到行...