avalon學習筆記

時間 2019-11-09

標籤 avalon 學習筆記简体版

原文原文鏈接

背景：

剛剛到一家新的公司，我新接手的項目採用的mvvm框架是avalon，固然我之前沒有學過angular，可是用過react，因此對於這類框架應該不算陌生。但畢竟是一個新的框架，因此仍是先學起來，俗話說得好，技多不壓身嘛。聽說avalon兼容性很是好，支持IE6+，無依賴，體積小，小夥伴們是否是對它更加有興趣了呢？css

筆記：

做用域綁定：ms-controller(下級未定義的屬性會向上級做用域從查找),ms-important(未定義的屬性不會向上級做用域查找),ms-skip(做用域裏的全部指令都失效)

插值表達式：{{prop}},{{prop | html}}(轉換成html節點再插入當前位置)

綁定屬性：ms-text,ms-html,ms-value

ms-value數據能經過表單元素的value值顯示出來，也支持插值表達式，但不能使用過濾器react

過濾器:html,uppercase,lowercase,truncate(字符串截斷),camelize,escape(轉義),currency(對數字添加貨幣符號，以及千位符),number(格式化數字),date(格式化日期)

雙向綁定：ms-duplex

當表單元素是radio時，要求屬性是一個布爾值，當它的內容改動時，avalon會將此元素的checked值賦值給該屬性；數組

須要對radio多選一的時候用ms-duplex-text屬性進行雙向綁定(文本值)，若是是布爾值就用ms-duplex-boolean；緩存

當表單元素是checkbox時，要求屬性是一個數組，當咱們改動它的內容時，avalon就會將此元素的value值push進該屬性；ruby

當表單元素是select時，要求屬性是一個字符串或數組，當咱們選中它的某一項時，avalon就會將此option元素的value值或text值push進該屬性。框架

禁止雙向綁定：ms-data-duplex-observe

顯示隱藏處理：ms-visible(根據表達式或布爾值的真假顯示隱藏)

這種方式是經過display屬性來控制顯示與隱藏的。dom

插入移除處理：ms-if(表達式的值爲真，輸出當前html元素，反之移除)

這種方式會從dom樹中移除對應的節點，隱藏後原節點變爲註釋節點。mvvm

數據緩存：ms-data-*

對象、數組、日期類型的數據綁定後不能顯示獲取，可經過this['data-array']這樣的方式獲取。學習

屬性操做：ms-class,ms-duplex,ms-attr-*,ms-href,ms-src

類名操做：

ms-class="aaa:isOk"//當isOK爲true時，添加類名aaa

ms-class="aaa" ms-class-1="bbb" ms-class-2="ccc"//類名爲aaa bbb ccc

ms-class="aaa bbb ccc:isShow"//若是isShow爲true，三個類名均添加，不然均不添加

ms-active、ms-hover分別用來模擬:active，:hover效果，用法與ms-class同樣，ms-active只在點擊那一瞬有效，ms-hover只有掠過期有效

avalon2.0裏的ms-duplex-*功能

ms-duplex-string/ms-duplex:應用於表單元素，經過value屬性同步vm

ms-duplex-number：應用於變單元素，若是value是數字格式就轉換爲數值，不然不作轉換，而後再同步vm

ms-duplex-boolean：應用於全部變單元素，value爲「true」時轉換爲true，其餘值轉爲false，同步vm

ms-duplex-checked:只應用於radio，checkbox，經過checked屬性同步vm

ms-data-duplex-observe:能夠暫停數據的同步

data-duplex-changed:當監聽的值發生變化時觸發一個回調

data-duplex-focus:設置焦點，讓光標位於value的最後

data-duplex-event:爲元素綁定事件，支持blur,keyuo

avalon.duplexHooks鉤子對象

實現數據驗證、類型轉換、格式化的功能，下面的例子完成了限制表單長度的功能：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>duplexHooks</title>
    <script src="avalon.js"></script>
    <script>
        avalon.ready(function(){
            var vm = avalon.define({
                $id: "test",
                aaa: "aaa"
            });
            avalon.scan();
        });
        avalon.duplexHooks.limit = {
            get: function(str, data){
                var limit = parseFloat(data.element.getAttribute("data-duplex-limit"));
                if(str.length > limit) {
                    return data.element.value = str.slice(0, limit);
                }
                return str;
            }
        }
    </script>
</head>
<body>
    <div ms-controller="test">
        <input type="text" ms-duplex-limit="aaa" data-duplex-limit="8">{{aaa}}
    </div>
</body>
</html>