經過難苦奮戰，avalon2終於面世了。這花了大半年時間，其中1.6還胎死腹中。長達半年沒有產出，我都擔心自己會被裁掉……
avalon2許多API與1.4.×保持一致，當然也添加了一些1.5的功能，此外隨着react的紅紅火火，對它的研究，也集成到此框架中。
我們先來一個簡單的例子
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>TODO supply a title</title> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <script src="./dist/avalon.js"></script> 8 <script> 9 var vm = avalon.define({ 10 $id: "test", 11 a: 111 12 }) 13 </script> 14 <style> 15 .ms-controller{ 16 display:none; 17 } 18 </style> 19 </head> 20 <body> 21 <div ms-controller="test"> 22 <input ms-duplex="@a" /> 23 <p>{{@a}}</p> 24 </div> 25 </body> 26 </html>
如果大家學過avalon1.*就好辦，沒學也沒關系。作為時下兼容性最好的MVVM框架，avalon絕對是值得你進行智力投智的。
avalon.define要求入傳一個帶$id屬性的對象，它會返回一個vm的特殊對象，以后我們對它進行賦值就會自動同步頁面。這比jQuery每次都取CSS選擇器來找元素進行操作方便多。
這也就是為什么MVVM框架一下子鋪天蓋地的火起來的原因。
這是JS部分，在頁面部分，或者叫HTML部分，我們需要一些特殊標記來圈定這個vm的作用范圍，這就是ms-controller的出場。$id也是在這里用到的。
在這作用范圍內，我們還有另外兩個指令，一個是ms-duplex指令，相當於ng-model(如果大家學過angular的話)，另一個是插值表達式{{}}，這是位於元素內部的innerText中的。ms-duplex是雙向指令，它既能將vm中對應的屬性顯示在頁面上，為了標識這是vm上的屬性， 我們要求用@符號帶頭。這可能與.NET的一些模板引擎相沖突，但據我所知，這些在.NET 中都是可以配置的。{{}}是純粹的文本指令，它與ms-text很像，但更方便，用於單向將數據拍到頁面上。
當我們改動文本域的內容時，ms-duplex會通過一些事件將元素的value值取出來同步到vm上。vm再比較 下它的這個屬性值與之前是否一樣，不一樣就再次同步到視圖。這期間涉及到虛擬DOM 復雜處理，但虛擬DOM遠遠比真實DOM輕量，因此有了這緩存層，我們的性能就大大提高。並且更新是最小化刷新的，不會將ms-controller圈定的所有元素都替換掉（如backbone自帶的模板引擎）。它只是將{{}}那個區域的文本節點的nodeValue改一下（因為input.value是一樣的，這次刷新只改一個地方）。
我們也可以看到ms-duplex其實也做了光標處理。當然ms-duplex的威力遠遠不止這些，以后我們再分說。
總而言之，MVVM其實將我們的程序划分兩部分，讓專業的語言做它們的擅長的事。JS用於處理業務邏輯，但類啊，模塊啊，太復雜，那只給你一個類似普通對象的vm你們操作就好了。在視圖部分，如何顯示，如何變動，如何交互，就交給HTML，我們只要給它添加一些指令與綁定屬性，它就像活着一樣，替我們干活了。
總結一下本節課的內容。
- MVVM將程序分為兩大塊，我們需要用avalon.define創建vm，用指令預先指定會變動的部分
- ms-controller是圈定vm的作用域。ms-controller其實是可以套嵌的。
- ms-duplex是雙向指令，通過一些事件監聽我們的輸入操作，從而同步vm。
- {{}}是用於輸出數據。
大家可以到這里下載avalon.js，最好為本項目打一下星，支持國內開源項目，然后下回來自己照例子敲一遍。