avalon学习笔记

背景：

刚刚到一家新的公司，我新接手的项目采用的mvvm框架是avalon，当然我以前没有学过angular，但是用过react，所以对于这类框架应该不算陌生。但毕竟是一个新的框架，所以还是先学起来，俗话说得好，技多不压身嘛。据说avalon兼容性非常好，支持IE6+，无依赖，体积小，小伙伴们是不是对它更加有兴趣了呢？

笔记：

作用域绑定：ms-controller(下级未定义的属性会向上级作用域从查找),ms-important(未定义的属性不会向上级作用域查找),ms-skip(作用域里的所有指令都失效)

插值表达式：{{prop}},{{prop | html}}(转换成html节点再插入当前位置)

绑定属性：ms-text,ms-html,ms-value

ms-value数据能通过表单元素的value值显示出来，也支持插值表达式，但不能使用过滤器

过滤器: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进该属性；

当表单元素是select时，要求属性是一个字符串或数组，当我们选中它的某一项时，avalon就会将此option元素的value值或text值push进该属性。

禁止双向绑定：ms-data-duplex-observe

显示隐藏处理：ms-visible(根据表达式或布尔值的真假显示隐藏)

这种方式是通过display属性来控制显示与隐藏的。

插入移除处理：ms-if(表达式的值为真，输出当前html元素，反之移除)

这种方式会从dom树中移除对应的节点，隐藏后原节点变为注释节点。

数据缓存：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>