avalon v4發布，迷你簡單易用的MVVM架構

文章目錄

• 主要優點如下

avalon已經從mass Framework抽取出來，沒有任何依賴。

主要優點如下

• 使用簡單，在HTML中添加綁定，在JS中用avalon.define定義ViewModel，再調用avalon.scan方法，它就能動了！
• 相容到IE6
• 沒有任何依賴，只有77K，壓縮後22K
• 支援管道符風格的過濾函數，方便格式化輸出
• 局部重新整理的顆粒度已細化到一個文本節點，特性節點
• 要操作的節點，在第一次掃描就與視圖重新整理函數相綁定，並緩衝起來，因此沒有選取器出場的餘地。
• 讓DOM操作的代碼近乎絕跡
• 使用類似CSS的重疊覆蓋機制，讓各個ViewModel分區交替地渲染頁面
• 節點移除時，智能卸載對應的視圖重新整理函數，節約記憶體
• 動用一切可使用的訪問器，及時定向地通知雙向繫結鏈的上層（複合型的Computed屬性，監控數組，根據綁定值編譯而成的求值函數，視圖重新整理函數）。

與其他架構比較

• 它體積更少，在主要的幾個MVVM架構（擁有雙向繫結機制），knockout是三千多行，angularjs 1.6萬， emberjs2-3萬行， winjs是幾M， kendoui是幾M！
• 相容情況，kendoui與 knockoutjs IE6, angularjs IE7, emberjs IE8, winJS IE9
• 讓使用者寫代碼更少（可見我給出的todos）
• 上手難度，與knockout差不多，但借鑒了angularjs的{{}}，更為易用。
• 與knockoutjs, angular, winjs一樣是使用動態模板，至少保持第一屏資料是真實的，對SEO友好。
• 源碼也是它們中最易讀的。簡單的代碼也意味著擴充調試等容易。

下面用avalon實現一個tabs

   <div ms-controller="tabs" >        <div ms-each-tab="tabs" class="triggers">            <a href="###" class="trigger" ms-class-selected="activated === $index" ms-click="activate">{{tab.title}}</a>        </div>        <div ms-each-tab="tabs" >            <div  class="panel" ms-visible="activated === $index">{{tab.panel}}</div>        </div >    </div >
            avalon.ready(function() {                avalon.define("tabs", function(a) {                    a.tabs = [                        {                            title: "aaaa",                            panel: "aaaa panel"                        },                        {                            title: "bbbb",                            panel: "ffffffffffffffffffff"                        },                        {                            title: "cccc",                            panel: "cccc panel"                        }                    ]                    a.activated = 0                    a.activate = function(){                         a.activated = this.$scope.$index;                    }                })                avalon.scan();            })
            {{tab.title}}        {{tab.panel}}
更多例子與介紹可參看這裡