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个是新值）

绑定

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，不再往上查找同名属性或方法！

    
{{name}} :  {{color}}
    

        
{{name}} :  {{color}}
        

            
{{name}} :  {{color}}
        
        

            
{{name}} :  {{color}}
        
    

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-*属性。

转载于:https://www.cnblogs.com/lknny/p/5633919.html