視頻教程: 地址1 地址2

關於AvalonJS

avalon是一個簡單易用迷你的MVVM框架，它最早發佈於2012.09.15，爲解決同一業務邏輯存在各種視圖呈現而開發出來的。事實上，這問題其實也可以簡單地利用一般的前端模板加jQuery 事件委託搞定，但隨着業務的膨脹，代碼就充滿了各種選擇器與事件回調，難以維護。因此徹底的將業務與邏輯分離，就只能求助於架構。最初想到的是MVC，嘗試過backbone，但代碼不降反升，很偶爾的機會，碰上微軟的WPF，優雅的MVVM架構立即吸引住我，我覺得這就是我一直追求的解決之道。

MVVM將所有前端代碼徹底分成兩部分，視圖的處理通過綁定實現（angular有個更炫酷的名詞叫指令），業務邏輯則集中在一個個叫VM的對象中處理。我們只要操作VM的數據，它就自然而然地神奇地同步到視圖。顯然所有神祕都有其內幕，C#是通過一種叫訪問器屬性的語句實現，那麼JS也有沒有對應的東西。感謝上帝，IE8最早引入這東西（Object.defineProperty），可惜有BUG，但帶動了其他瀏覽器實現它，IE9+便能安全使用它。對於老式IE，我找了好久，實在沒有辦法，使用VBScript實現了。

Object.defineProperty或VBS的作用是將對象的某一個屬性，轉換一個setter與getter，我們只要劫持這兩個方法，通過Pub/Sub模式就能偷偷操作視圖。爲了紀念WPF的指引，我將此項目以WPF最初的開發代號avalon來命名。它真的能讓前端人員脫離DOM的苦海，來到數據的樂園中！

優勢

絕對的優勢就是降低了耦合，讓開發者從複雜的各種事件中掙脫出來。舉一個簡單地例子，同一個狀態可能跟若干個事件的發生順序與發生時的附加參數都有關係，不用 MVC (包括 MVVM) 的情況下, 邏輯可能非常複雜而且脆弱。並且通常需要在不同的地方維護相關度非常高的一些邏輯，稍有疏忽就會釀成 bug 不能自拔。使用這類框架能從根本上降低應用開發的邏輯難度，並且讓應用更穩健。

除此之外，也免去了一些重複的體力勞動，一個 {value} 就代替了一行 $(selector).text(value)。一些個常用的 directive 也能快速實現一些原本可能需要較多代碼才能實現的功能

使用簡單,作者是吃透了knockout, angular,rivets API設計出來，沒有太多複雜的概念，指令數量控制得當，基本能覆蓋所有jQuery操作，確保中小型公司的菜鳥前端與剛轉行過來的後端也能迅速上手。
兼容性非常好，支持IE6+，firefox3.5+, opera11+, safari5+, chrome4，最近也將國產的山寨瀏覽器（360， QQ，搜狗，獵豹，邀遊等）加入兼容列隊（相比其他MVVM框架，KnockoutJS(IE6), AngularJS1.3(IE9), EmberJS(IE8), WinJS(IE9)）
向前兼容非常好，不會出現angular那種跳崖式升級
注重性能，由於avalon一直在那些上千的大表格里打滾，經歷長期的優化，它能支撐14000以上綁定（相對而言，angular一個頁面只能放2000個綁定）。另，在IE10等能良好支持HTML5的瀏覽器，還提供了avalon.modern.js這個高性能的版本。
沒有任何依賴，不到5000行，壓縮後不到50KB
完善的單元測試，由於測試代碼非常龐大，放在獨立的倉庫中—— avalon.test
擁有一個包含2個Grid，1個樹，1 個驗證插件等總數近50個UI組件庫 OniUI，由去哪兒網前端架構組在全力開發與維護
存在一個活躍的小社區，由於國內已有不少公司在用，我們都集中一個QQ羣裏互相交流幫助 QQ:79641290、228372837(註明來學avalon)
支持管道符風格的過濾函數，方便格式化輸出
讓DOM操作的代碼近乎絕跡，因此實現一個功能，大致把比jQuery所寫的還要少50%
使用類似CSS的重疊覆蓋機制，讓各個ViewModel分區交替地渲染頁面
節點移除時，智能卸載對應的視圖刷新函數，節約內存
操作數據即操作DOM，對ViewModel的操作都會同步到View與Model去
自帶AMD模塊加載器，省得與其他加載器進行整合

avalon現在有三個分支:avalon.js 兼容IE6，標準瀏覽器, 及主流山寨瀏覽器(QQ, 獵豹, 搜狗, 360, 傲遊); avalon.modern.js 則只支持IE10等支持HTML5現代瀏覽器 ; avalon.mobile.js，添加了觸屏事件與fastclick支持，用於移動端

開始的例子

我們從一個完整的例子開始認識 avalon ：

<!DOCTYPE html>

<html>

    <head>

        <title></title>

        <meta
http-equiv="Content-Type"
content="text/html; charset=UTF-8">

        <script
src="avalon.js"></script>

    </head>

    <body>

        <div
ms-controller="box">

            <div
style=" background: #a9ea00;"
ms-css-width="w"
ms-css-height="h" 
ms-click="click"></div>

            <p>{{ w }} x {{ h }}</p>

            <p>W: <input
type="text"
ms-duplex="w"
data-duplex-event="change"/></p>

            <p>H: <input
type="text"
ms-duplex="h"
/></p>

        </div>

        <script>

              var vm = avalon.define({

                 $id: "box",

                  w: 100,

                  h: 100,

                  click: function() {

                    vm.w = parseFloat(vm.w) + 10;

                    vm.h = parseFloat(vm.h) + 10;

                  }

              })

        </script>

    </body>

</html>

上面的代碼中，我們可以看到在JS中，沒有任何一行操作DOM的代碼，也沒有選擇器，非常乾淨。在HTML中，我們發現就是多了一些以ms-開始的屬性與{{}}標記，有的是用於渲染樣式，有的是用於綁定事件。這些屬性或標記，實質就是avalon的綁定系統的一部分。綁定（有的框架也將之稱爲指令），負責幫我們完成視圖的各種操作，相當於一個隱形的jQuery。正因爲有了綁定，我們就可以在JS代碼專注業務邏輯本身，寫得更易維護的代碼！

掃描

不過上面的代碼並不完整，它能工作，是因爲框架默認會在DOMReady時掃描DOM樹，將視圖中的綁定屬性與{{}}插值表達式抽取出來，轉換爲求值函數與視圖刷新函數。

上面的JS代碼相當於：

avalon.ready(function() {

    var
vm = avalon.define({

          $id:
"box",

          w: 100,

          h: 100,

          click:
function() {

             vm.w = parseFloat(vm.w) + 10;

             vm.h = parseFloat(vm.h) + 10;

          }

      })

      avalon.scan()

 })

avalon.scan是一個非常重要的方法，它有兩個可選參數，第一個是掃描的起點元素，默認是HTML標籤，第2個是VM對象。

//源碼

    avalon.scan =
function(elem, vmodel) {

        elem = elem || root

        var
vmodels = vmodel ? [].concat(vmodel) : []

        scanTag(elem, vmodels)

    }

視圖模型

視圖模型，ViewModel，也經常被略寫成VM，是通過avalon.define方法進行定義。生成的對象會默認放到avalon.vmodels對象上。每個VM在定義時必須指定$id。如果你有某些屬性不想監聽，可以直接將此屬性名放到$skipArray數組中。

var vm = avalon.define({

         $id:
"test",

         a: 111,

         b: 222,

         $skipAarray: ["b"],

         $c: 333,

         firstName:
"司徒",

         lastName:
"正美",

         fullName: {//一個包含set或get的對象會被當成PropertyDescriptor，

            set:
function(val) {//裏面必須用this指向scope，不能使用scope

                var
array = (val || "").split(" ");

                this.firstName = array[0] ||
"";

                this.lastName = array[1] ||
"";

            },

            get:
function() {

                return
this.firstName + " "
+ this.lastName;

            }

         },

         array: [1,2,3],

         array2:[{e: 1}, {e: 2}]

         d: {

            k: 111,

            $skipArray: ["f"],

            f: 2222

         }

    })

接着我們說一些重要的概念：

$id，每個VM都有$id，如果VM的某一個屬性是對象（並且它是可監控的），也會轉換爲一個VM，這個子VM也會默認加上一個$id。但只有用戶添加的那個最外面的$id會註冊到avalon.vmodels對象上。
監控屬性，一般地，VM中的屬性都會轉換爲此種屬性，當我們以vm.aaa = yyy這種形式更改其值時，就會同步到視圖上的對應位置上。
計算屬性，定義時爲一個對象，並且只存在set,get兩個函數或只有一個get一個函數。它是監控屬性的高級形式，表示它的值是通過函數計算出來的，是依賴於其他屬性合成出來的。
監控數組，定義時爲一個數組，它會添加了許多新方法，但一般情況下與普通數組無異，但調用它的push, unshift, remove, pop等方法會同步視圖。
非監控屬性，這包括框架添加的$id屬性，以$開頭的屬性，放在$skipArray數組中的屬性，值爲函數、元素節點、文本節點的屬性，總之，改變它們的值不會產生同步視圖的效果。

$skipArray 是一個字符串數組，只能放當前對象的直接屬性名，想禁止子對象的某個屬性的監聽，在那個子對象上再添加一個$skipAray數組就行了。

視圖裏面，我們可以使用ms-controller, ms-important指定一個VM的作用域。

此外，在ms-each, ms-with，ms-repeat綁定屬性中，它們會創建一個臨時的VM，我們稱之爲代理VM，用於放置$key, $val, $index, $last, $first, $remove等變量或方法。

另外，avalon不允許在VM定義之後，再追加新屬性與方法，比如下面的方式是錯誤的：

var vm = avalon.define({

    $id:   
"test", 

    test1: 
"點擊測試按鈕沒反應 綁定失敗";

});

vm.one = function() {

    vm.test1 =
"綁定成功";

};

我們再看看如何更新VM中的屬性(重點)：

<script>

var model : avalon.define({

     $id:  "update",

     aaa : "str",

     bbb : false,

     ccc : 1223,

     time : new Date,

     simpleArray : [1, 2, 3, 4],

     objectArray : [{name: "a"}, {name: "b"}, {name: "c"}, {name: "d"}],

     object : {

         o1: "k1",

         o2: "k2",

         o3: "k3"

     },

     simpleArray : [1, 2, 3, 4],

     objectArray : [{name: "a", value: "aa"}, {name: "b", value: "bb"}, {name: "c", value: "cc"}, {name: "d", value: "dd"}],

     object : {

         o1: "k1",

         o2: "k2",

         o3: "k3"

     }

 })

       setTimeout(function() {

           //如果是更新簡單數據類型（string, boolean, number）或Date類型

           model.aaa = "這是字符串"

           model.bbb = true

           model.ccc = 999999999999

           var date = new Date

           model.time = new Date(date.setFullYear(2005))

       }, 2000)

       setTimeout(function() {

           //如果是數組，注意保證它們的元素的類型是一致的

           //只能全是字符串，或是全是布爾，不能有一些是這種類型，另一些是其他類型

           //這時我們可以使用set方法來更新（它有兩個參數，第一個是index，第2個是新值）

           model.simpleArray.set(0, 1000)

           model.simpleArray.set(2, 3000)

           model.objectArray.set(0, {name: "xxxxxxxxxxxxxxxx", value: "xxx"})

       }, 2500)

       setTimeout(function() {

           model.objectArray[1].name = "5555"

       }, 3000)

       setTimeout(function() {

           //如果要更新對象，直接賦給它一個對象，注意不能將一個VM賦給它，可以到VM的$model賦給它（要不會在IE6-8中報錯）

           model.object = {

               aaaa: "aaaa",

               bbbb: "bbbb",

               cccc: "cccc",

               dddd: "dddd"

           }

       }, 3000)

   </script>

   <div
ms-controller="update">

       <div>{{aaa}}</div>

       <div>{{bbb}}</div>

       <div>{{ccc}}</div>

       <div>{{time | date("yyyy - MM - dd mm:ss")}}</div>

       <ul
ms-each="simpleArray">

           <li>{{el}}</li>

       </ul>

       <div>  <select
ms-each="objectArray">

               <option
ms-value="el.value">{{el.name}}</option>

           </select>

       </div>

       <ol
ms-with="object">

           <li>{{$key}}                {{$val}}</li>

       </ol>

   </div>

這裏還有個例子，大家認真看看。

綁定

avalon的綁定（或指令），擁有以下三種類型：

{{}}插值表達式，這是開標籤與閉標籤間，換言之，也是位於文本節點中，innerText裏。{{}}裏面可以添加各種過濾器（以|進行標識）。值得注意的是{{}}實際是文本綁定(ms-text)的一種形式。
ms-*綁定屬性，這是位於開標籤的內部， 95%的綁定都以這種形式存在。它們的格式大概是這樣劃分的"ms" + type + "-" + param1 + "-" + param1 + "-" + param2 + ... + number = value

ms-skip                //這個綁定屬性沒有值

ms-controller="expr"   //這個綁定屬性沒有參數

ms-if="expr"           //這個綁定屬性沒有參數

ms-if-loop="expr"       //這個綁定屬性有一個參數

ms-repeat-el="array"    //這個綁定屬性有一個參數

ms-attr-href="xxxx"    //這個綁定屬性有一個參數

ms-attr-src="xxx/{{a}}/yyy/{{b}}"   //這個綁定屬性的值包含插值表達式，注意只有少部分表示字符串類型的屬性可以使用插值表達式

ms-click-1="fn"       //這個綁定屬性的名字最後有數字，這是方便我們綁定更多點擊事件 ms-click-2="fn" ms-click-3="fn"

ms-on-click="fn"     //只有表示事件與類名的綁定屬性的可以加數字，如這個也可以寫成 ms-on-click-0="fn"

ms-class-1="xxx" ms-class-2="yyy" ms-class-3="xxx" //數字還表示綁定的次序

ms-css-background-color="xxx" //這個綁定屬性有兩個參數，但在css綁定裏，相當於一個，會內部轉換爲backgroundColor

ms-duplex-aaa-bbb-string="xxx"//這個綁定屬性有三個參數，表示三種不同的攔截操作
data-xxx-yyy="xxx"，輔助指令，比如ms-duplex的某一個輔助指令爲data-duplex-event="change"，ms-repeat的某一個輔助指令爲data-repeat-rendered="yyy"

作用域綁定(ms-controller, ms-important)

如果一個頁面非常複雜，就需要劃分模塊，每個模塊交由不同的ViewModel去處理。我們就要用到ms-controller與ms-important來指定ViewModel了。

我們看下面的例子：

HTML結構

<div 
ms-controller="AAA">

    <div>{{name}} :  {{color}}</div>

    <div
ms-controller="BBB">

        <div>{{name}} :  {{color}}</div>

        <div
ms-controller="CCC">

            <div>{{name}} :  {{color}}</div>

        </div>

        <div
ms-important="DDD">

            <div>{{name}} :  {{color}}</div>

        </div>

    </div>

</div>

ViewModel

　avalon.ready(function() {

    avalon.define({

          $id: "AAA",

          name: "liger",

        color: "green"

    });

      avalon.define({

          $id: "BBB",

          name: "sphinx",

        color: "red"

    });

    avalon.define({

          $id: "CCC",

          name: "dragon" //不存在color

    });

       avalon.define({

          $id: "DDD",

          name: "sirenia" //不存在color

    });

    avalon.scan()

})

{{name}} : {{color}}

可以看出ViewModel在DOM樹的作用範圍其實與CSS很相似，採取就近原則，如果當前ViewModel沒有此字段就找上一級ViewModel的同名字段，這個機制非常有利於團隊協作。

如果從另一個角度來看，由於這種隨機組成的方式就能實現類似繼承的方式，因此我們就不必在JS代碼時構建複雜的繼承體系。

類的繼承體系是源自後端複雜業務的膨脹而誕生的。早在20世界80年代初期，也就是面向對象發展的初期，人們就非常看重繼承這個概念。繼承關係蘊涵的意義是非常深遠的。使用繼承我們可以基於差異編程，也就是說，對於一個滿足我們大部分需求的類，可以創建一個它的子類，重載它個別方法來實現我們所要的功能。只子繼承一個類，就可以重類該類的代碼！通過繼承，我們可以建立完整的軟件結構分類，其中每一個層都可以重用該層次以上的代碼。這是一個美麗新世界。

但類繼承的缺點也是很明顯的，在下摘錄一些：

面嚮對象語言與生俱來的問題就是它們與生俱來的這一整個隱性環境。你想要一根香蕉，但你得到的是一頭手裏握着香蕉的大猩猩，以及整個叢林。 -- Joe Armstrong

在適合使用複合模式的共有類中使用繼承，會把這個類與它的超類永遠地束縛在一起，從而人爲地限制了子類的性能

類繼承的缺點

超類改變，子類要跟着改變，違反了“開——閉”原則
不能動態改變方法實現，不能在運行時改變由父類繼承來的實現
破壞原有封裝，因爲基類向子類暴露了實現細節
繼承會導致類的爆炸

因此在選擇是繼承還是組合的問題上，avalon傾向組合。組合的使用範例就是CSS，因此也有了ms-important的誕生。

而ms-important就相當於CSS的important語句，強制這個區域使用此ViewModel，不再往上查找同名屬性或方法！

另，爲了避免未經處理的原始模板內容在頁面載入時在頁面中一閃而過，我們可以使用以下樣式（詳見這裏）：

.ms-controller,.ms-important{

     visibility:
hidden;

 }

忽略掃描綁定(ms-skip)

這是ms-skip負責。只要元素定義了這個屬性，無論它的值是什麼，它都不會掃描其他屬性及它的子孫節點了。

<div 
ms-controller="test"
ms-skip>

    <p

        ms-repeat-num="cd"

        ms-attr-name="num"

        ms-data-xxx="$index">

        {{$index}} - {{num}}

    </p>

    A：<div
ms-each="arr">{{yy}}</div>

</div>

模板綁定(ms-include)

如果單是把DOM樹作爲一個模板遠遠不夠的，比如有幾個地方，需要重複利用一套HTML結構，這就要用到內部模板或外部模板了。

內部模板是，這個模板與目標節點是位於同一個DOM樹中。我們用一個MIME不明的script標籤或者noscript標籤（0.94後支持，建議使用它）保存它，然後通過ms-include="id"引用它。

<html>

    <head>

        <meta
http-equiv="content-type"
content="text/html; charset=UTF-8"
/>

        <script
src="avalon.js"></script>

        <script>

            avalon.define({

                 $id: "test",

                 xxx: "引入內部模板"

              })

        </script>

    </head>

    <body
>

        <script
type="avalon"
id="tpl">

            here, {{ 3 + 6 * 5  }}

        </script>

        <div
ms-controller="test">

            <p>{{xxx}}</p>

            <div
ms-include="'tpl'"></div>

        </div>

    </body>

</html>

注意，ms-include的值要用引號括起，表示這只是一個字符串，這時它就會搜索頁面的具有此ID的節點，取其innerHTML，放進ms-include所在的元素內部。否則這個tpl會被當成一個變量，框架就會在VM中檢測有沒有此屬性，有就取其值，重複上面的步驟。如果成功，頁面會出現here, 2的字樣。

如果大家想在模板加載後，加工一下模板，可以使用data-include-loaded來指定回調的名字。

如果大家想在模板掃描後，隱藏loading什麼的，可以使用data-include-rendered來指定回調的名字。

由於ms-include綁定需要定義在一個元素節點上，它的作用僅僅是一個佔位符，提供一個插入位置的容器。如果用戶想在插入內容後，去掉這容器，可以使用data-include-replace="true"。

下面是它們的實現

var vmodels = data.vmodels

var rendered = getBindingCallback(elem.getAttribute("data-include-rendered"), vmodels)

var loaded = getBindingCallback(elem.getAttribute("data-include-loaded"), vmodels)

function scanTemplate(text) {

    if (loaded) {

        text = loaded.apply(elem, [text].concat(vmodels))

    }

    avalon.innerHTML(elem, text)

    scanNodes(elem, vmodels)

    rendered && checkScan(elem, function() {

        rendered.call(elem)

    })

}

外部模板，通常用於多個頁面的複用，因此需要整成一個獨立的文件。這時我們就需要通過ms-include-src="src"進行加載。

比如有一個HTML文件tmpl.html，它的內容爲：

<div>這是一個獨立的頁面</div>

<div>它是通過AJAX的GET請求加載下來的</div>

然後我們這樣引入它

<div 
ms-include-src="'tmpl.html'"></div>

有關它的高級應用的例子可見這裏利用ms-include與監控數組實現一個樹

注意，ms-include-src需要後端服務器支持，因爲用到同域的AJAX請求。

數據填充(ms-text, ms-html)

這分兩種：文本綁定與HTML綁定，每種都有兩個實現方式

<script>

 avalon.define({

     $id: "test",

      text: "<b> 1111  </b>"

 })

</script>

<div 
ms-controller="test">

    <div><em>用於測試是否被測除</em>xxxx{{text}}yyyy</div>

    <div><em>用於測試是否被測除</em>xxxx{{text|html}}yyyy</div>

    <div
ms-text="text"><em>用於測試是否被測除</em>xxxx yyyy</div>

    <div
ms-html="text"><em>用於測試是否被測除</em>xxxx yyyy</div>

</div>

默認情況下，我們是使用{{ }} 進行插值，如果有特殊需求，我們還可以配置它們：

avalon.config({

   interpolate:["<%","%>"]

})

注意，大家不要用<, > 作爲插值表達式的界定符，因爲在IE6-9裏可能轉換爲註釋節點，詳見這裏

插值表達式{{}}在綁定屬性的使用，只限那些能返回字符串的綁定屬性，如ms-attr、ms-css、ms-include、ms-class、 ms-href、 ms-title、ms-src等。一旦出現插值表達式，說明這個整個東西分成可變的部分與不可變的部分，{{}}內爲可變的，反之亦然。如果沒有{{}}說明整個東西都要求值，又如ms-include="'id'"，要用兩種引號強制讓它的內部不是一個變量。

類名切換(ms-class, ms-hover, ms-active)

avalon提供了多種方式來綁定類名，有ms-class, ms-hover, ms-active, 具體可看這裏

事件綁定(ms-on)

avalon通過ms-on-click或ms-click進行事件綁定，並在IE對事件對象進行修復，具體可看這裏

avalon並沒有像jQuery設計一個近九百行的事件系統，連事件回調的執行順序都進行修復（IE6-8，attachEvent添加的回調在執行時並沒有按先入先出的順序執行），只是很薄的一層封裝，因此性能很強。

ms-click
ms-dblclick
ms-mouseout
ms-mouseover
ms-mousemove
ms-mouseenter
ms-mouseleave
ms-mouseup
ms-mousedown
ms-keypress
ms-keyup
ms-keydown
ms-focus
ms-blur
ms-change
ms-scroll
ms-animation
ms-on-*

<!DOCTYPE HTML>

<html>

    <head>

        <meta
charset="UTF-8">

        <title>有關事件回調傳參</title>

        <script
src="avalon.js"
type="text/javascript"></script>

        <script>

          avalon.ready(function() {

              avalon.define({

                    $id: "simple",

                    firstName: "司徒",

                    lastName: "正美",

                    array: ["aaa", "bbb", "ccc"],

                    argsClick: function(e, a, b) {

                        alert(a+ "  "+b)

                    },

                    loopClick: function(a) {

                        alert(a)

                    }

                });

                avalon.scan();

            })

        </script>

    </head>

    <body>

        <fieldset
ms-controller="simple">

            <legend>例子</legend>

            <div
ms-click="argsClick($event, 100, firstName)">點我</div>

            <div
ms-each-el="array"
>

                <p
ms-click="loopClick(el)">{{el}}</p>

            </div>

        </fieldset>

    </body>

</html>

另外，這裏有一些結合ms-data實現事件代理的技巧，建議事件綁定接口支持事件代理，最簡單就是table上可以綁定td的點擊事件

顯示綁定(ms-visible)

avalon通過ms-visible="bool"實現對某個元素顯示隱藏控制，它用是style.display="none"進行隱藏。

插入綁定(ms-if)

這個功能是抄自knockout的，ms-if="bool",同樣隱藏，但它是將元素移出DOM。這個功能直接影響到CSS :empty僞類的渲染結果，因此比較有用。

<!DOCTYPE html>

   <html>

    <head>

        <meta
http-equiv="Content-Type"
content="text/html; charset=utf-8"
/>

        <title>ms-if</title>

        <script
t src="avalon.js"></script>

    </head>

    <body
ms-controller="test">

        <ul
ms-each-item="array">

            <li
ms-click="$remove"
ms-if="$index % 2 == 0">{{ item }} --- {{$index}}</li>

        </ul>

        <script
type="text/javascript">

         avalon.define({

           $id: "test",

           array: "a,b,c,d,e,f,g".split(",")

        });

        </script>

    </body>

    </html>

這裏得介紹一下avalon的掃描順序，因爲一個元素可能會存在多個屬性。總的流程是這樣的：

ms-skip --> ms-important --> ms-controller --> ms-if --> ms-repeat --> ms-if-loop --> ...-->ms-each --> ms-with --> ms-duplex

首先跑在最前面的是 ms-skip，只要元素定義了這個屬性，無論它的值是什麼，它都不會掃描其他屬性及它的子孫節點了。然後是 ms-important， ms-controller這兩個用於圈定VM的作用域的綁定屬性，它們的值爲VM的$id，它們不會影響avalon繼續掃描。接着是ms-if，由於一個頁面可能被當成子模塊，被不同的VM所作用，那麼就會出現有的VM沒有某個屬性的情況。比如下面的情況：

<!DOCTYPE html>

<html>

    <head>

        <meta
http-equiv="Content-Type"
content="text/html; charset=utf-8"
/>

        <title>ms-if</title>

        <script 
src="avalon.js"></script>

    </head>

    <body
ms-controller="Test">

        <h1>{{aaa}}</h1>

        <ul
ms-if="array"
ms-each-item="array">

            <li
ms-click="$remove"
ms-if="$index % 2 == 0">{{ item }} --- {{$index}}</li>

        </ul>

        <script
type="text/javascript">

            avalon.define('Test', function(vm) {

                vm.aaa = "array不存在啊"

            });

        </script>

    </body>

</html>

如果沒有ms-if做代碼防禦，肯定報一大堆錯。

接着是 ms-repeat綁定。出於某些原因，我們不想顯示數組中的某些元素，就需要讓ms-if拖延到它們之後才起作用，這時就要用到ms-if-loop。

<!DOCTYPE html>

<html>

    <head>

        <meta
http-equiv="Content-Type"
content="text/html; charset=utf-8"
/>

        <title>ms-if</title>

        <script 
src="avalon.js"></script>

    </head>

    <body
ms-controller="test">

        <h1>{{aaa}}</h1>

        <ul>

            <li
ms-repeat="array"
ms-if-loop="el">{{ el }}</li>

            <li>它總在最後</li>

        </ul>

        <script
type="text/javascript">

            avalon.define({

                $id: "test",

                array: ["aaa", "bbb", null, "ccc"]

            });

        </script>

    </body>

</html>

之後就是其他綁定，但殿後的總是ms-duplex。從ms-if-loop到ms-duplex之間的執行順序是按這些綁定屬性的首字母的小寫的ASCII碼進行排序，比如同時存在ms-attr與ms-visible綁定，那麼先執行ms-attr綁定。如果我們想綁定多個類名，用到ms-class, ms-class-2, ms-class-3, ms-class-1，那麼執行順序爲ms-class, ms-class-1, ms-class-2, ms-class-3。如果我們要用到綁定多個點擊事件，需要這樣綁定：ms-click, ms-click-1, ms-click-2……更具體可以查看源碼中的scanTag, scanAttr方法。

雙工綁定(ms-duplex)

這功能抄自angular，原名ms-model起不得太好，姑且認爲利用VM中的某些屬性對錶單元素進行雙向綁定。

這個綁定，它除了負責將VM中對應的值放到表單元素的value中，還對元素偷偷綁定一些事件，用於監聽用戶的輸入從而自動刷新VM。

對於select type=multiple與checkbox等表示一組的元素，需要對應一個數組；其他表單元素則需要對應一個簡單的數據類型；如果你就是想表示一個開關，那你們可以在radio, checkbox上使用ms-duplex-checked，需要對應一個布爾（在1.3.6之前的版本，radio則需要使用ms-duplex, checkbox使用ms-duplex-radio來對應一個布爾）。

新	舊(1.3.6之前)	功能
`ms-duplex-checked` 只能應用於radio、 checkbox	`ms-duplex` 只能應用於radio `ms-duplex-radio` checkbox 多用於實現GRID中的全選/全不選功能	通過checked屬性同步VM
`ms-duplex-string` 應用於所有表單元素	`ms-duplex-text` 只能應用於radio	通過value屬性同步VM
`ms-duplex-boolean` 應用於所有表單元素	`ms-duplex-bool` 只能應用於radio	value爲”true”時轉爲true，其他值轉爲false同步VM
`ms-duplex-number` 應用於表單元素	沒有對應項	如果value是數字格式就轉換爲數值，否則不做轉換，然後再同步VM
`ms-duplex` 相當於ms-duplex-string	`ms-duplex` 在radio相當於ms-duplex-checked 在其他上相當於ms-duplex-string	見上

注意：ms-duplex與ms-checked不能在同時使用於一個元素節點上。

注意：如果表單元素同時綁定了ms-duplex=xxx與ms-click或ms-change，而事件回調要立即得到這個vm.xxx的值，input[type=radio]是存在問題，它不能立即得到當前值，而是之前的值，需要在回調裏面加個setTimeout。

有關ms-duplex的詳細用法，大家可以通過這個頁面進行學習。

<!DOCTYPE html>

<html>

    <head>

        <title>ms-duplex</title>

        <meta http-equiv="Content-Type"
content="text/html; charset=UTF-8">

    </head>

    <body>

        <div ms-controller="box">

            <ul>

                <li><input type="checkbox"
ms-click="checkAll" 
ms-checked="checkAllbool"/>全選</li>

                <li ms-repeat="arr"
><input type="checkbox" 
ms-value="el" ms-duplex="selected"/>{{el}}</li>

            </ul>

        </div>

        <script src="avalon.js"
></script>

        <script>

            var
vm = avalon.define({

                $id:
"box",

                arr : ["1",
'2', "3",
"4"],

                selected : ["2",
"3"],

                checkAllbool :
false,

                checkAll :
function() {

                    if
(this.checked) {

                        vm.selected = vm.arr

                    }
else {

                        vm.selected.clear()

                    }

                }

            })

            vm.checkAllbool = vm.arr.length === vm.selected.length

            vm.selected.$watch("length",
function(n) {

                vm.checkAllbool = n === model.arr.size()

            })

        </script>

    </body>

</html>

對於非radio, checkbox, select的控件，我們可以通過data-duplex-changed來指定一個回調，傳參爲元素的value值，this指向元素本身，要求必須有返回值。

<!DOCTYPE html>

<html>

    <head>

        <meta
http-equiv="Content-Type"
content="text/html; charset=utf-8"
/>

        <title>data-duplex-changed</title>

        <script
src="avalon.js"></script>

    </head>

    <body
ms-controller="duplex">

        <input
ms-duplex="username"
data-duplex-changed="callback">

        <script
type="text/javascript">

            avalon.define({

                $id: "duplex",

                username : "司徒正美",

                callback : function(val){

                    avalon.log(val)

                    avalon.log(this)

                    return this.value = val.slice(0, 10)//不能超過10個字符串

                }

            });

        </script>

    </body>

</html>

樣式綁定(ms-css)

用法爲ms-css-name="value"

注意：屬性值不能加入CSS hack與important!

<!DOCTYPE html>

<html>

    <head>

        <title>by 司徒正美</title>

        <meta
http-equiv="Content-Type"
content="text/html; charset=UTF-8">

        <script
src="../avalon.js"></script>

        <script>

            avalon.define({

               $id: "test",

               o: 0.5, 

               bg: "#F3F"// 不能使用CSS hack，如 bg : "#F3F\9\0"

            })

        </script>

        <style>

            .outer{

                width:200px;

                height: 200px;

                position: absolute;

                top:1px;

                left:1px;

                background: red;

                z-index:1;

            }

            .inner{

                width:100px;

                height: 100px;

                position: relative;

                top:20px;

                left:20px;

                background: green;

            }

        </style>

    </head>

    <body
ms-controller="test"
>

        <h3>在舊式IE下，如果父元素是定位元素,但沒有設置它的top, left, z-index，那麼爲它設置透明時,

            它的所有被定位的後代都沒有透明</h3>

        <div
class="outer"
ms-css-opacity="o"
ms-css-background-color="bg"
>

            <div
class="inner"></div>

        </div>

    </body>

</html>

數據綁定(ms-data)

用法爲ms-data-name="value", 用於爲元素節點綁定HTML5 data-*屬性。

布爾屬性綁定1.3.5後，它們都吞入ms-attr-*

這主要涉及到表單元素幾個非常重要的布爾屬性，即disabed, readyOnly, selected , checked，分別使用ms-disabled, ms-enabled, ms-readonly, ms-checked, ms-selected。ms-disabled與ms-enabled是對立的，一個true爲添加屬性，另一個true爲移除屬性。

字符串屬性綁定1.3.5後，除了ms-src, ms-href，其他都吞入ms-attr-*

這主要涉及到幾個非常常用的字符串屬性，即href, src, alt, title, value, 分別使用ms-href, ms-src, ms-alt, ms-title, ms-value。它們的值的解析情況與其他綁定不一樣，如果值沒有{{}}插值表達式，那麼就當成VM中的一個屬性，並且可以與加號，減號混用，組成表達式，如果裏面有表達式，整個當成一個字符串。

<a 
ms-href="aaa + '.html'">xxxx</a>

<a 
ms-href="{{aaa}}.html">xxxx</a>

屬性綁定(ms-attr)

ms-attr-name="value"，這個允許我們在元素上綁定更多種類的屬性，如className, tabIndex, name, colSpan什麼的。

循環綁定(ms-repeat)

用法爲ms-repeat-xxx="array", 其中xxx可以隨意命名（注意，不能出現大寫，因爲屬性名在HTML規範中，會全部轉換爲小寫，詳見這裏），如item, el。 array對應VM中的一個普通數組或一個監控數組。監控數組擁有原生數組的所有方法，並且比它還多了set, remove, removeAt, removeAll, ensure, pushArray與 clear方法。詳見這裏。

在早期，avalon提供了一個功能相似的ms-each綁定。ms-each與ms-repeat的不同之處在於，前者循環它的孩子(以下圖爲例，可能包含LI元素兩邊的空白)，後者循環它自身。

注意，ms-each, ms-repeat會生成一個新的代理VM對象放進當前的vmodels的前面，這個代理對象擁有el， $index, $first, $last, $remove, $outer等屬性。另一個會產生VM對象的綁定是ms-widget。

el: 不一定叫這個名字，比如說ms-each-item，它就變成item了。默認爲el。指向當前元素。
$first: 判定是否爲監控數組的第一個元素
$last: 判定是否爲監控數組的最後一個元素
$index: 得到當前元素的索引值
$outer: 得到外圍循環的那個元素。
$remove：這是一個方法，用於移除此元素

我們還可以通過data-repeat-rendered, data-each-rendered來指定這些元素都插入DOM被渲染了後執行的回調，this指向元素節點，有一個參數表示爲當前的操作，是add, del, move, index還是clear

vm.array = [1,2,3]

 vm.rendered = function(action){

    if(action === "add"){

        avalon.log("渲染完畢")//注意，我們通過vm.array.push(4,5)添加元素，會連續兩次觸發rendered，第一次add，第二次爲index

    }

}

<li 
data-repeat-rendered="rendered"
ms-repeat="array">{{el}}</li>

<!DOCTYPE html>

<html>

    <head>

        <title></title>

        <meta
http-equiv="Content-Type"
content="text/html; charset=UTF-8">

        <script
src="avalon.js"></script>

        <style>

            .id2013716 {

                width: 200px;

                float:left;

            }

        </style>

        <script>

            var a = avalon.define({

               $id: "array",

                array: ["1", "2", "3", "4"]

            })

            setTimeout(function() {

                a.array.set(0, 7)

            }, 1000);

            var b = avalon.define({

                $id: "complex",

                array: [{name: "xxx", sex: "aaa", c: {number: 2}}, {name: "yyy", sex: "bbb", c: {number: 4}}]//

            });

            setTimeout(function() {

                b.array[0].c.number = 9

                b.array[0].name = "1000"

            }, 1000)

            setTimeout(function() {

                a.array.push(5, 6, 7, 8, 9)

            }, 1000)

            setTimeout(function() {

                a.array.unshift("a", "b", "c", "d")

            }, 2000)

            setTimeout(function() {

                a.array.shift()

                b.array[1].name = 7

            }, 3000)

            setTimeout(function() {

                a.array.pop()

            }, 4000)

            setTimeout(function() {

                a.array.splice(1, 3, "x", "y", "z")

                b.array[1].name = "5000"

            }, 5000)

        </script>

    </head>

    <body>

        <fieldset
class="id2013716"
ms-controller="array">

            <legend>例子</legend>

            <ul
ms-each="array">

                <li
>數組的第{{$index+1}}個元素爲{{el}}</li>

            </ul>

            <p>size: <b
style="color:red">{{array.size()}}</b></p>

        </fieldset>

        <fieldset 
class="id2013716"
ms-controller="complex">

            <legend>例子</legend>

            <ul
>

                <li
ms-repeat-el="array">{{el.name+" "+el.sex}}它的內容爲 number:{{el.c.number}}</li>

            </ul>

        </fieldset>

    </body>

</html>

<!DOCTYPE HTML>

<html>

    <head>

        <meta
charset="utf-8">

        <title></title>

    </head>

    <body
ms-controller="page">

        <h3>ms-each實現數組循環</h3>

        <div
ms-each="arr">

            {{$index}} <button
ms-click="$remove">{{el}} 點我刪除</button>

        </div>

        <h3>ms-repeat實現數組循環</h3>

        <table
border="1"
width="800px"
style="background:blueviolet">

            <tr>

                <td
ms-repeat="arr">

                    {{el}}  {{$first}} {{$last}}

                </td>

            </tr>

        </table>

        <h3>ms-repeat實現數組循環</h3>

        <ul>

            <li
ms-repeat="arr"><button
ms-click="$remove">測試{{$index}}</button>{{el}}</li>

        </ul>

        <h3>ms-repeat實現對象循環</h3>

        <ol
>

            <li
ms-repeat="object">{{$key}}:{{$val}}</li>

        </ol>

        <h3>ms-with實現對象循環</h3>

        <ol
ms-with="object">

            <li>{{$key}}:{{$val}}</li>

        </ol>

        <h3>通過指定data-with-sorted規定只輸出某一部分建值及它們的順序，只能循環對象時有效</h3>

        <ol
ms-with="bigobject"
data-with-sorted="order"
title='with'>

            <li>{{$key}}:{{$val}}</li>

        </ol>

        <ol
title='repeat'>

            <li
ms-repeat="bigobject"
data-with-sorted="order">{{$key}}:{{$val}}</li>

        </ol>

        <h3>ms-repeat實現數組雙重循環</h3>

        <table
border="1"
style="background:yellow"
width="400px">

            <tr
ms-repeat="dbarray"><td
ms-repeat-elem="el.array">{{elem}}</td></tr>

        </table>

        <h3>ms-each實現數組雙重循環</h3>

        <table
border="1"
style="background:green"
width="400px">

            <tbody 
ms-each="dbarray">

                <tr
ms-each-elem="el.array"><td>{{elem}}</td></tr>

            </tbody>

        </table>

        <h3>ms-with實現對象雙重循環，並通過$outer訪問外面的鍵名</h3>

        <div
ms-repeat="dbobjec">{{$key}}:<strong
ms-repeat="$val">{{$key}} {{$val}} <span
style="font-weight: normal">{{$outer.$key}}</span>| </strong></div>

        <script
src="avalon.js"></script>

        <script>

            var model = avalon.define({

                $id: "page",

                arr : ["a", "b", "c", "d", "e", "f", "g", "h"]

                object : {

                    "kkk": "vvv", "kkk2": "vvv2", "kkk3": "vvv3"

                },

                aaa : {

                    aaa2: "vvv2",

                    aaa21: "vvv21",

                    aaa22: "vvv22"

                },

                bigobject : {

                    title: 'xxx',

                    name: '777',

                    width: 30,

                    align: 'center',

                    sortable: true,

                    cols: "cols3",

                    url: 'data/stockQuote.json',

                    method: 'get',

                    remoteSort: true,

                    sortName: 'SECUCODE',

                    sortStatus: 'asc'

                },

                order : function() {

                    return ["name", "sortStatus", "sortName", "method", "align"]

                },

                dbobjec : {

                    aaa: {

                        aaa2: "vvv2",

                        aaa21: "vvv21",

                        aaa22: "vvv22"

                    },

                    bbb: {

                        bbb2: "ccc2",

                        bbb21: "ccc21",

                        bbb22: "ccc22"

                    }

                },

                dbarray : [

                    {

                        array: ["a", "b", "c"]

                    },

                    {

                        array: ["e", "f", "d"]

                    }

                ]

            });

            setTimeout(function() {

                model.object = {

                    a1: 4444,

                    a2: 5555

                }

                model.bigobject = {

                    title: 'yyy',

                    method: 'post',

                    name: '999',

                    width: 78,

                    align: 'left',

                    sortable: false,

                    cols: "cols5",

                    url: 'data/xxx.json',

                    remoteSort: false,

                    sortName: 'FAILURE',

                    sortStatus: 'bbb'

                }

            }, 3000)

        </script>

    </body>

</html>

數組循環綁定(ms-each)

語法與ms-repeat幾乎一致，建議用ms-repeat代替。

對象循環綁定(ms-with)

語法爲 ms-with="obj" 子元素裏面用$key, $val分別引用鍵名，鍵值。另我們可以通過指定data-with-sorted回調，規定只輸出某一部分建值及它們的順序。注意，此綁定已經不建議使用，它將被ms-repeat代替，ms-repeat裏面也可以使用data-with-sorted回調。

<!DOCTYPE html>

<html>

    <head>

        <title></title>

        <meta
http-equiv="Content-Type"
content="text/html; charset=UTF-8">

        <script
type='text/javascript'
src="avalon.js"></script>

        <script>

            var a = avalon.define({

                $id: "xxx",

                obj: {

                    aaa: "xxx",

                    bbb: "yyy",

                    ccc: "zzz"

                },

                first: "司徒正美"

            })

            setTimeout(function() {

                a.obj.aaa = "7777777777"

                a.first = "清風火忌"

            }, 1000)

            setTimeout(function() {

                a.obj.bbb = "8888888"

            }, 3000)

        </script>

    </head>

    <body
ms-controller="xxx">

        <div
ms-with="obj">

            <div>{{$key}} {{$val}}</div>

        </div>

        <hr/>

        <div
ms-with="obj">

            <div>{{$key}} {{$val}}</div>

        </div>

        <hr/>

        <div
ms-with="obj">

            <div>{{$key}} {{$val}}</div>

        </div>

    </body>

</html>

有關ms-each, ms-repeat, ms-with更高的用法，如雙重循環什麼的，可以看這裏

UI綁定(ms-widget)

它的格式爲ms-widget="uiName, id?, optsName?"

uiName，必選，一定要全部字母小寫，表示組件的類型
id 可選這表示新生成的VM的$id，方便我們從avalon.vmodels[id]中獲取它操作它，如果它等於$，那麼表示它是隨機生成，與不寫這個效果一樣，框架會在uiName加上時間截，生成隨機ID
optName 可選，配置對象的名字。指在已有的VM中定義一個對象（最好指定它爲不可監控的外），作爲配置的一部分（因爲每個UI都有它的默認配置對象，並且我們也可以用data- uiName? -xxx來做更個性化的處理）。如果不指optName默認與uiName同名。框架總是找離它(定義ms-widget的那個元素節點)最近的那個VM來取這個配置項。如果這個配置項裏面有widget+"Id"這個屬性，那麼新生成的VM就是用它作爲它的$id

下面是一個完整的實例用於教導你如何定義使用一個UI。

例子

首先，以AMD規範定義一個模塊，文件名爲avalon.testui.js，把它放到與avalon.js同一目錄下。內容爲：

define(["avalon"],
function(avalon) {

    //    必須 在avalon.ui上註冊一個函數，它有三個參數，分別爲容器元素，data， vmodels

    avalon.ui["testui"] =
function(element, data, vmodels) {

      //將它內部作爲模板，或者使用文檔碎片進行處理，那麼你就需要用appendChild方法添加回去

        var
innerHTML = element.innerHTML

        //由於innerHTML要依賴許多widget後來添加的新屬性，這時如果被掃描肯定報“不存在”錯誤

        //因此先將它清空

        avalon.clearHTML(element)

        var
model = avalon.define(data.testuiId, function(vm) {

            avalon.mix(vm, data.testuiOptions)//優先添加用戶的配置，防止它覆蓋掉widget的一些方法與屬性

            vm.value = 0;
// 給input一個個默認的數值

            vm.plus =
function(e) { // 只添加了這個plus

                model.value++;

            }

        })

        avalon.nextTick(function() {

            //widget的VM已經生成，可以添加回去讓它被掃描

            element.innerHTML = innerHTML

            avalon.scan(element, [model].concat(vmodels))

        })

        return
model//必須返回新VM

    }

    avalon.ui["testui"].defaults = {

        aaa: 
"aaa",

        bbb: 
"bbb",

        ccc: 
"ccc"

    }

    return
avalon//必須返回avalon

})

然後頁面這樣使用它

<!DOCTYPE html>

<html>

    <head>

        <meta
charset="utf-8"/>

        <script
src="avalon.js"></script>

    </head>

    <body>

        <script>

            require("avalon.testui", function() {

                avalon.define({

                    $id: "test",

                    $opts: {

                        name: "這是控件的內容"

                    }

                })

                avalon.scan()

            })

        </script>

        <div
ms-controller="test"
ms-widget="testui,ddd,$opts"
>

            <input
ms-duplex="value"
/>

            <button
type="button"
ms-click="plus">ClickMe</button>

        </div>

    </body>

</html>

模塊間通信及屬性監控 $watch，$fire, $unwatch

avalon內置了一個強大的自定義事件系統，它在綁定在每一個VM上。每一個VM都擁有$watch, $unwatch, $fire這三個方法，及一個$events對象。$events是用於儲存各種回調。先從單個VM說起，如果一個VM擁有aaa這個屬性，如果我們在VM通過$watch對它監控，那麼當aaa改變值時，它對應的回調就會被觸發！

var vmodel = avalon.define({

     $id: 
"test", 

     aaa: 111

 })

  vmodel.$watch("aaa",
function(newValue, oldValue){

       avalon.log(newValue)
//222

       avalon.log(oldValue)
//111

   })

 setTimeout(function(){

     vmodel.aaa = 222

 }, 1000)

注意，它只能監聽當前屬性的變動。

我們還可以通過$unwatch方法，移除對應的回調。如果傳入兩個參數，第一個是屬性名，第二個是回調，那麼只移除此回調；如果只傳入一個屬性名，那麼此屬性關聯的所有回調都會被移除掉。

有時，我們還綁定了一些與屬性名無關的事件回調，想觸發它，那隻能使用$fire方法了。$fire方法第一個參數爲屬性名（自定義事件名），其他參數隨意。

var vmodel = avalon.define({

     $id: 
"test", 

     aaa: 111

 })

 vmodel.$watch("cat",
function(){

     avalon.log(avalon.slice(arguments))
//[1,2,3]

  })

 setTimeout(function(){

     vmodel.$fire("cat",1,2,3)

 }, 1000)

更高級的玩法，有時我們想在任何屬性變化時都觸發某一個回調，這時我們就需要$watch一個特殊的屬性了——“$all”。不同的是，$watch回調的參數多了一個屬性名，排在最前面。

var vmodel = avalon.define({

     $id: 
"test",

     aaa: 111,

     bbb: 222,

 })

 vmodel.$watch("$all",
function(){

     avalon.log(avalon.slice(arguments))

         // ["aaa", 2, 111]

         // ["bbb", 3, 222]

 })

 setTimeout(function(){

     vmodel.aaa = 2

     vmodel.bbb = 3

 }, 1000)

手動觸發$fire是位隨着高風險的，框架內部是做了處理（只有前後值發生變化纔會觸發），因此萬不得已使用它，但又爆發死循環怎麼辦？這樣就需要暫時中斷VM的屬性監控機制。使用$unwatch()，它裏面什麼也不傳，就暫時將監控凍結了。恢復它也很簡單，使用$watch()，裏面也什麼也不傳！

不過最強大的用法是實現模塊間的通信（因爲在實際項目中，一個頁面可能非常大，有多少人分塊製作，每個人自己寫自己的VM，這時就需要通過某種機制來進行數據與方法的聯動了），這是使用$fire方法達成的。只要在$fire的自定義事件名前添加"up!", "down!", "all!"前綴,它就能實現angular相似的$emit,$broadcast功能。

<!DOCTYPE html>

<html>

    <head>

        <title>by 司徒正美</title>

        <meta
http-equiv="Content-Type"
content="text/html; charset=UTF-8">

        <script
src="avalon.js"></script>

        <script>

          var vm1 = avalon.define({

                $id: "ancestor",

                aaa : '1111111111',

                click : function() {

                    avalon.log("向下廣播")

                    vm1.$fire("down!aaa", "capture")

                }

            })

            vm1.$watch("aaa", function(v) {

                    avalon.log(v)

                    avalon.log("ancestor.aaa事件被觸發了")

            })

            var vm2 = avalon.define({

                $id: "parent",

                text : "222222222"

                aaa : '3333333333',

                click : function() {

                    console.log("全局擴播")

                    vm2.$fire("all!aaa", "broadcast")

                }

            })

            vm2.$watch("aaa", function(v) {

                   avalon.log(v)

                   avalon.log("parent.aaa事件被觸發了")

             })

            var vm3 = avalon.define(

                $id: "son",

                click : function() {

                    console.log("向上冒泡")

                    vm3.$fire("up!aaa", "bubble")

                }

            })

            vm3.$watch("aaa", function(v) {

                    avalon.log(v)

                    avalon.log("son.aaa事件被觸發了")

              })

        </script>

        <style>

        </style>

    </head>

    <body
class="ms-controller"  
ms-controller="ancestor">

        <h3>avalon vm.$fire的升級版 </h3>

        <button
type="button"
ms-click="click">

            capture

        </button>

        <div
ms-controller="parent">

            <button
type="button"
ms-click="click">broadcast</button>

            <div
ms-controller="son">

                <button
type="button"
ms-click="click">

                    bubble

                </button>

            </div>

        </div>

    </body>

</html>

過濾器

avalon從angular中抄來管道符風格的過濾器，但有點不一樣。它只能用於{{}}插值表達式。如果不存在參數，要求直接跟|filter，如果存在參傳，則要用小括號括起，參數要有逗號，這與一般的函數調用差不多，如|truncate(20,"……")

avalon自帶以下幾個過濾器

html

沒有傳參，用於將文本綁定轉換爲HTML綁定

sanitize

去掉onclick, javascript:alert等可能引起注入攻擊的代碼。

uppercase

大寫化

lowercase

小寫化

truncate

對長字符串進行截短，truncate(number, truncation), number默認爲30，truncation爲“...”

camelize

駝峯化處理

escape

對類似於HTML格式的字符串進行轉義，把尖括號轉換爲> <

currency

對數字添加貨幣符號，以及千位符， currency(symbol)

number

對數字進行各種格式化，這與與PHP的number_format完全兼容， number(decimals, dec_point, thousands_sep),

              decimals	可選，規定多少個小數位。
              dec_point	可選，規定用作小數點的字符串（默認爲 . ）。
             thousands_sep	可選，規定用作千位分隔符的字符串（默認爲 , ），如果設置了該參數，那麼所有其他參數都是必需的。

date

對日期進行格式化，date(formats)

'yyyy': 4 digit representation of year (e.g. AD 1 => 0001, AD 2010 => 2010)

'yy': 2 digit representation of year, padded (00-99). (e.g. AD 2001 => 01, AD 2010 => 10)

'y': 1 digit representation of year, e.g. (AD 1 => 1, AD 199 => 199)

'MMMM': Month in year (January-December)

'MMM': Month in year (Jan-Dec)

'MM': Month in year, padded (01-12)

'M': Month in year (1-12)

'dd': Day in month, padded (01-31)

'd': Day in month (1-31)

'EEEE': Day in Week,(Sunday-Saturday)

'EEE': Day in Week, (Sun-Sat)

'HH': Hour in day, padded (00-23)

'H': Hour in day (0-23)

'hh': Hour in am/pm, padded (01-12)

'h': Hour in am/pm, (1-12)

'mm': Minute in hour, padded (00-59)

'm': Minute in hour (0-59)

'ss': Second in minute, padded (00-59)

's': Second in minute (0-59)

'a': am/pm marker

'Z': 4 digit (+sign) representation of the timezone offset (-1200-+1200)

format string can also be one of the following predefined localizable formats:

'medium': equivalent to 'MMM d, y h:mm:ss a' for en_US locale (e.g. Sep 3, 2010 12:05:08 pm)

'short': equivalent to 'M/d/yy h:mm a' for en_US locale (e.g. 9/3/10 12:05 pm)

'fullDate': equivalent to 'EEEE, MMMM d,y' for en_US locale (e.g. Friday, September 3, 2010)

'longDate': equivalent to 'MMMM d, y' for en_US locale (e.g. September 3, 2010

'mediumDate': equivalent to 'MMM d, y' for en_US locale (e.g. Sep 3, 2010)

'shortDate': equivalent to 'M/d/yy' for en_US locale (e.g. 9/3/10)

'mediumTime': equivalent to 'h:mm:ss a' for en_US locale (e.g. 12:05:08 pm)

'shortTime': equivalent to 'h:mm a' for en_US locale (e.g. 12:05 pm)

例子：

生成於{{ new Date | date("yyyy MM dd:HH:mm:ss")}}

生成於{{ "2011/07/08" | date("yyyy MM dd:HH:mm:ss")}}

生成於{{ "2011-07-08" | date("yyyy MM dd:HH:mm:ss")}}

生成於{{ "01-01-2000" | date("yyyy MM dd:HH:mm:ss")}}

生成於{{ "03 04,2000" | date("yyyy MM dd:HH:mm:ss")}}

生成於{{ "3 4,2000" | date("yyyy MM dd:HH:mm:ss")}}

生成於{{ 1373021259229 | date("yyyy MM dd:HH:mm:ss")}}

生成於{{ "1373021259229" | date("yyyy MM dd:HH:mm:ss")}}

值得注意的是，new Date可傳的格式類型非常多，但不是所有瀏覽器都支持這麼多，詳看這裏

多個過濾器一起工作

<div>{{ prop | filter1 | filter2 | filter3(args, args2) | filter4(args)}}</div>

如果想自定義過濾器，可以這樣做

avalon.filters.myfilter = function(str, args, args2){//str爲管道符之前計算得到的結果，默認框架會幫你傳入，此方法必須返回一個值

   /* 具體邏輯 */

   return
ret;

}

AMD 加載器

avalon裝備了AMD模範的加載器，這涉及到兩個全局方法 require與define

require(deps, callback)

deps 必需。String|Array。依賴列表，可以是具體路徑或模塊標識，如果想用字符串表示多個模塊，則請用“,”隔開它們。

callback 必需。Function。回調，當用戶指定的依賴以及這些依賴的依賴樹都加載執行完畢後，纔會安全執行它。

模塊標識

一個模塊標識就是一個字符串，通過它們來轉換成到對應JS文件或CSS文件的路徑。

有關模塊標識的CommonJS規範，可以見這裏

具體約定如下：

每個模塊標識的字符串組成只能是合法URL路徑，因此只能是英文字母，數字，點號，斜扛，#號。
如果模塊標識是以"./"開頭，則表示相對於它的父模塊的目錄中找。
如果模塊標識是以"../"開頭，則表示相對於它的父模塊的父目錄中找。
如果模塊標識不以點號或斜扛開始，則有以下三種情況
1. 如果此模塊標識在 $.config.alias存在對應值，換言之某一模塊定義了一個別名，則用此模塊的具體路徑加載文件。
2. 如果此模塊標識以http://、https://、file:/// 等協議開頭的絕對路徑，直接用它加載文件。
3. 否則我們將在引入框架種子模塊（avalon.js）的目錄下尋找是否有同名JS文件，然後指向它。
對於JS模塊，它可以省略後綴名，即“.js”可有可無；但對於CSS需要使用css!插件機制。
框架種子模塊的目錄保存於 $.config.base屬性中。
ready!是系統佔位符，用於表示DOM樹是否加載完畢，不會進行路徑轉換。

如果想禁止使用avalon自帶的加載器，可以在第一次調用require方法之前，執行如下代碼：

<!DOCTYPE html>

<html>

    <head>

        <meta http-equiv="Content-Type"
content="text/html; charset=UTF-8">

        <script src="require.js"></script>

        <script src="avalon.modern.js"></script>

        <script>

            avalon.config({loader:
false})

            alert(require)

            avalon.define("xxx",
function(vm){

                vm.aaa =
"司徒正美"

            })

        </script>

    </head>

    <body ms-controller="xxx"
>

        <div>{{aaa}}</div>

    </body>

</html>

與jquery更好的集成，比如一些舊系統，直接在頁面引入jquery庫與其大量jquery插件，改成動態加載方式成本非常大。怎麼樣才能與jquery和平共存，亦能讓AMD加載發揮作呢？先引入jquery庫，然後將avalon.modules.jquery 加個預設值（exports: jquery用於shim機制， state: 2 表明它已經加載完畢）就行了。

例子

<!DOCTYPE html>

<html>

    <head>

        <title></title>

        <meta http-equiv="Content-Type"
content="text/html; charset=UTF-8">

        <script src="jquery.js"
type="text/javascript"></script>

        <script src="avalon.js"
type="text/javascript"></script>

    </head>

    <body>

        <div ms-controller="main"
ms-click="click">

            <p>

                <a href="#"
>點擊我</a>

            </p>

        </div>

        <script type="text/javascript">

            avalon.modules.jquery = {

                exports: jQuery,

                state: 2

            }

            require('jquery,ready!',
function($) {

                avalon.log('加載jq了啊……')

                $.ajaxSetup({

                    headers: {ajaxRequest:
true},

                    beforeSend:
function(o) {

                        avalon.log(typeof
o)

                        avalon.log(typeof
o.id)

                    },

                    complete:
function(data) {

                        avalon.log('ajax 成功執行啦，阿門！')

                    }

                })

                $('body').bind("click",
function(e) {

                    alert("document");

                    avalon.log(typeof
e.target.$vmodel)

                    $.post('./h.js', {},
function(res) {

                        avalon.log(typeof
res)

                    })

                });

            })

        </script>

    </body>

</html>

<!DOCTYPE html>

<html>

    <head>

        <title></title>

        <meta http-equiv="Content-Type"
content="text/html; charset=UTF-8">

        <!-->這裏沒有東西</-->

        <script src="avalon.js"
type="text/javascript"></script>

    </head>

    <body>

        <div ms-controller="main"
ms-click="click">

            <p>

                <a href="#"
>點擊我</a>

            </p>

        </div>

        <script type="text/javascript">

/* 0.982之前可以

            avalon.config({

                alias: {

                    jquery: {

                        exports: "jQuery",//這是原來jQuery庫的命名空間，必須寫上

                        src: "jquery.js"

                    }

                }

            })

*/

//下面是兼容requirejs的方法，推薦使用這個

           avalon.config({

                paths: {

                    jquery:
"http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"

                },

                shim: {

                    jquery: {

                        exports:
"jQuery"//這是原來jQuery庫的命名空間，必須寫上

                    }

                }

            })

            require('jquery,ready!',
function($) {

                avalon.log('加載jq了啊……')

                $.ajaxSetup({

                    headers: {ajaxRequest:
true},

                    beforeSend:
function(o) {

                        avalon.log(typeof
o)

                        avalon.log(typeof
o.id)

                    },

                    complete:
function(data) {

                        avalon.log('ajax 成功執行啦，阿門！')

                    }

                })

                $('body').bind("click",
function(e) {

                    alert("document");

                    avalon.log(typeof
e.target.$vmodel)

                    $.post('./h.js', {},
function(res) {

                        avalon.log(typeof
res)

                    })

                });

            })

        </script>

    </body>

</html>

例子

加載單個模塊。

// 由於lang.js與mass.js是位於同一目錄下，可以省略./

require("lang",
function(lang) {

    alert(lang.String.toUpperCase("aa"))

});

例子

加載多個模塊。需要注意的是，涉及DOM操作時必須要待到DOM樹建完才能進入，因此我們在這裏指定了一個標識，叫"ready!"，它並不一個模塊，用戶自定義模塊，也不要起名叫"ready!"。

require("jquery,node,attr,ready!",
function($) {

    alert($.fn.attr +
""); 

    alert($.fn.prop +
"");

});

例子

加載多個模塊，使用字符串數組形式的依賴列表。

require(["jquery",
"css", "ready!"],
function($, css) {

    $("#js_require_ex3").toggle();

});

例子

加載CSS文件。

require(["jquery",
"ready!", "css!http//sdfds.xdfs.css"],
function($) {

    $("#js_require_ex3").toggle();

});

例子

使用別名機制管理模塊的鏈接。

             var
path = location.protocol + "//"
+ location.host + "/doc/scripts/loadtest/"

/* 0.982之前可以

             require.config({

                 alias: {

                     "aaa": path + "aaa.js",

                     "bbb": path + "bbb.js",

                     "ccc": path + "ccc.js",

                     "ddd": path + "ddd.js"

                 }

             })

*/

//下面是兼容requirejs的方法，推薦使用這個

             require.config({

                paths: {

                     "aaa": path +
"aaa.js",

                     "bbb": path +
"bbb.js",

                     "ccc": path +
"ccc.js",

                     "ddd": path +
"ddd.js"

                 }

             })

             require("aaa,bbb,ready",
function(a, b, $) {

                 var
parent = $("#loadasync2")

                 parent.append(a);

                 parent.append(b);

                 $("#asynctest2").click(function() {

                     require("ccc,ddd",
function(c, d) {

                         parent.append(c);

                         parent.append(d);

                     })

                 })

             });

例子

加載不按規範編寫的JS文件，可以讓你不用改jQuery的源碼就加載它。相當於其他加載器的shim插件。與別名機制不同的是，現在它對應一個對象，src爲完整路徑，deps爲依賴列表，exports爲其他模塊引用它時，傳送給它們的參數

!function() {

               var
path = "http://files.cnblogs.com/shuicaituya/"

               require.config({

                   pashs: {

                       "jquery":  path +
"jquery.js"

                   },

                   shim:{

                       jquery:   {

                           deps: [],
//沒有依賴可以不寫

                           exports:
"jQuery"

                       }

                  }

               });

               require("jquery",
function($) {

                   alert($)

                   alert("回調調起成功");

               })

           }()

如果你想用其他AMD加載器，最好的辦法還是建議直接打開源碼，拉到最底幾行，把加載器禁用了！

avalon.config({

    loader: 
false//原來是true!!!!!!!!!!1

})

define方法用於定義一個模塊，格式爲：

define( id?, deps?, factory )

 id
 可選。String。模塊ID。它最終會轉換一個URL，放於 $.modules中。
 deps
 可選。String|Array。依賴列表。
 factory
 必需。Function|Object。模塊工廠。它的參數列參爲其依賴模塊所有返回的值，如果某個模塊沒有返回值，則對應位置爲undefined

注意， define方法不能寫在script標籤的innerHTML中，只能寫在JS文件裏。

例子

//aaa.js 沒有依賴不用改

define("aaa",
function() {

    return
1

})

//bbb.js  沒有依賴不用改

define("bbb",
function() {

    return
2

});

//ccc.js

define("ccc", ["$aaa"],
function(a) {

    return
10 + a

})

//ddd/ddd.js

define("ddd", ["$ddd"],
function(c) {

    return
c + 100

});

avalon與seajs， https://github.com/RubyLouvre/avalon/issues/313

我們也可以在源碼裏面直接移除AMD加載器模塊。

路由系統

它需要依賴於另一個獨立的組件mmRouter，用法請見這裏

AJAX

AJAX可以使用jQuery或mmRequest, mmRequest體積更少，覆蓋jQuery ajax模塊的90%功能，並且在現代瀏覽器中使用了XMLHttpRequest2實現，性能更佳。

通過AJAX加載新數據到已存在的VM中

$.ajax({

     url: url,

     data: JSON.parse(JSON.stringify(vm.$model)),
//去掉數據模型中的所有函數

     success:
function(ajaxData) {

         //需要自己在這裏定義一個函數,將缺少的屬性補上,無用的數據去掉，

         //格式不正確的數據轉換好 ajaxData最後必須爲一個對象

         ajaxData = filterData(ajaxData)

         //先已有的數據，新的數據，全部拷貝到一個全新的空對象中，再賦值，防止影響原來的$model

         var
newData = avalon.mix(true, {}, vm.$model, ajaxData)

         for
(var 
i in newData) {

             if
(vm.hasOwnProperty(i) && i !== "hasOwnProperty"){//安全更新數據

                 vm[i] = newData[i]

             }

         } 

     }

 })

提交VM中的數據到後臺，要小心死循環，詳見這裏

文件上傳要用mmRequest的upload方法

擴展功能

avalon現在有三個擴展點，一是在avalon.fn上添加新的原型方法，這是用於處理DOM的，二是在avalon.bindingHandlers與 avalon.bindingExecutors上添加新的綁定（ms-xxx）,三是在avalon.filters添加新的過濾器。

添加原型方法就不用多說，建議儘可能返回this，實現鏈式操作，this[0]爲它包含的元素節點。

添加過濾器也很簡，翻看源碼看看lowercase如何實現就行了。

添加新綁定難一點，框架bindingHandlers要求對應的處理函數有兩個參數，data與vmodels， data擁有如下幾個屬性：

element: 綁定了ms-xxx的元素，如<div ms-xxx-yyy='zzz'>innerHTML</div>,ms-xxx綁定所在的DIV元素。
value:是指mx-xxx綁定的這個特性節點的值，即上面的zzz。
param:是指mx-xxx綁定名以“-”分開幾截，除了最前面的兩部分外的東西，如這裏的“yyy”。

vmodels是指，從DOM樹最頂點到添加此綁定的元素所路過的ms-controller的值（它們都對應一個VM）。注意，ms-each, ms-with也產生VM。

bindingHandlers裏的函數用於初始化綁定，它會對綁定屬性做一些分解，放進parseExprProxy中，parseExprProxy會再調用parseExpr，將它轉換爲求值函數，放進行對應VM屬性的subscribers數組內（操作方爲registerSubscriber）。

bindingExecutors裏的的函數爲真正的視圖刷新函數，每當VM發生改變後，都會被執行（操作方爲notifySubscribers）。

可看這裏

現在avalon擁有如此多綁定：

在IE6下調試avalon

由於IE6下沒有console.log，如果又不想用VS等巨無霸IDE，可以自己定義以下方法

if(!window.console){

       window.console = {}

       console.log =
function(str){

            avalon.ready(function() {

                var
div = document.createElement("pre");

                div.className =
"mass_sys_log";

                div.innerHTML = str +
""; //確保爲字符串

                document.body.appendChild(div);

            });

       }

}

上線後，將.mass_sys_log{ display: none; }

如果是高級瀏覽器，avalon會在控制檯上打印許多調試消息，如果不想看到它們，可以這樣屏蔽它們：avalon.config({debug: false})

權限控制

將頁面模塊化，大量使用ms-include-src，沒有權限就返回空頁面，權限夠了，但不是最高級，那它返回的模板文件也不一樣/p>

如果您覺得此文有幫助，可以打賞點錢給我支付寶[email protected] ，或掃描二維碼

ijustcalledtosay

發佈了5 篇原創文章 · 獲贊 2 · 訪問量 5萬+

私信關注

迷你MVVM框架 avalonjs 入門教程