avalon v0.4發布，迷你簡單易用的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($index)">{{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(i){
                         a.activated = i
                    }
                })
                avalon.scan();
            })

{{tab.title}}

{{tab.panel}}

更多例子與介紹可參看這里