AvalonJS

目錄

AvalonJS

學習地址
迷你MVVM框架，解決雙向綁定，減小DOM操做（各類選擇器），下降開發代碼量。以ms-進行屬性標記，事件綁定，是avalon綁定系統的一部分。隱形JQuery，有了綁定，咱們能夠更專一於業務邏輯自己，而不是技術。

工做原理：
框架在DOMReady時掃描DOM樹，將視圖中的綁定屬性與{{}}插值表達式抽取出來，轉換爲求值函數與視圖刷新函數。

方式：
經過avalon.define定義ViewModel，必須指定$id,不想監聽的屬性經過$skipArray:["name"]進行過濾。

注意：

1. avalon不容許在VM定義以後，再追加新屬性與方法
2. 不容許在define裏面直接調用方法或ajax

視圖模型

更新vm中的屬性，普通屬性直接賦值，數組中類型必須一致，對象用model中用set方法賦值（它有兩個參數，第一個是index，第2個是新值）

<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>

綁定

1. {{}}插值表達式，{{}}裏面能夠添加各類過濾器（以|進行標識）。插值表達式{{}}在綁定屬性的使用，只限那些能返回字符串的綁定屬性，如ms-attr、ms-css、ms-include、ms-class、 ms-href、 ms-title、ms-src等。一旦出現插值表達式，說明這個整個東西分紅可變的部分與不可變的部分，{{}}內爲可變的，反之亦然。 若是沒有{{}}說明整個東西都要求值，又如ms-include="'id'"，要用兩種引號強制讓它的內部不是一個變量。

2. 做用域綁定，就近原則。在選擇是繼承仍是組合的問題上，avalon傾向組合。組合的使用範例就是CSS，所以也有了ms-important的誕生。而ms-important就至關於CSS的important語句，強制這個區域使用此ViewModel，再也不往上查找同名屬性或方法！

<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>

1. 忽略掃描綁定(ms-skip)
   4。模板綁定(ms-include)
2. 數據填充(ms-text, ms-html)、
3. 事件綁定(ms-on)

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-*

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的做用域的綁定屬性
ms-if="bool",一樣隱藏，但它是將元素移出DOM。這個功能直接影響到CSS :empty僞類的渲染結果，所以比較有用。
ms-duplex除了負責將VM中對應的值放到表單元素的value中，還對元素偷偷綁定一些事件，用於監聽用戶的輸入從而自動刷新VM。

樣式綁定(ms-css)

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

數據綁定(ms-data)

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