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>