背景：
刚刚到一家新的公司，我新接手的项目采用的mvvm框架是avalon，当然我以前没有学过angular，但是用过react，所以对于这类框架应该不算陌生。但毕竟是一个新的框架，所以还是先学起来，俗话说得好，技多不压身嘛。据说avalon兼容性非常好，支持IE6+，无依赖，体积小，小伙伴们是不是对它更加有兴趣了呢？
目录：
- 关于AvalonJs
- 开始的例子
- 扫描
- 视图模型
- 数据模型
- 绑定
- 作用域绑定(ms-controller, ms-important)
- 忽略扫描绑定(ms-skip)
- 模板绑定(ms-include)
- 数据填充(ms-text, ms-html)
- 类名切换(ms-class, ms-hover, ms-active)
- 事件绑定(ms-on，……)
- 显示绑定(ms-visible)
- 插入绑定(ms-if)
- 双工绑定(ms-duplex)
- 样式绑定(ms-css)
- 数据绑定(ms-data)
- 属性绑定(ms-attr)
- 循环绑定(ms-repeat)
- 数组循环绑定(ms-each废弃)
- 对象循环绑定(ms-with废弃)
- UI绑定(ms-widget)
- 模块间通信及属性监控 $watch，$fire, $unwatch
- 过滤器
- AMD加载器
- 路由系统
- AJAX
- 功能扩展
- 在IE6下调试avalon
- 权限控制
这些内容看起来一点也没有react复杂，看到这里拿下它的信心增加了不少啊~下面开始边学习边记录咯。
笔记：
作用域绑定：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>