返回 导航

其他

hangge.com

AvalonJs - 使用avalon.scan方法扫描指定区域

作者：hangge | 2018-05-10 08:10

一、Avalon 介绍

1，基本介绍

avalon 是一款基于虚拟 DOM 与属性劫持的迷你、易用、高性能的前端 MVVM 框架，拥有超优秀的兼容性，支持移动开发，后端渲染，WEB Component 式组件开发，无需编译，开箱即用。

2，使用样例

（1）样例代码
<!DOCTYPE html>
<html>
    <head>
        <title>航歌</title>
        <meta charset="UTF-8">
        <script src="./js/avalon.js"></script>
        <script>
            var vm = avalon.define({
                $id: "test",
                name: "hangge.com",
                array: [11,22,33]
            })
            setTimeout(function(){
               vm.array.set(0, 444)
            }, 3000)
        </script>
    </head>

    <body ms-controller="test">
        <input ms-duplex="@name">
        <p>Welcome to {{@name}}</p>
        <ul>
           <li ms-for="($index,el) in @array">{{$index}}--{{el}}</li>
        </ul>
    </body>
</html>

（2）运行结果如下：

二、avalon.scan 方法

1，方法介绍

（1）avalon.scan 是一个非常重要的方法，它的作用是对 DOM 树进行扫描，将视图中的绑定属性与 {{}} 插值表达式抽取出来，转换为求值函数与视图刷新函数。

（2）avalon.scan 有两个可选参数：
  • 第 1 个参数是扫描的起点元素（默认是整个文档）
  • 第 2 个参数是 VM 对象。

（3）上面的样例中我们不需要手动调用 avalon.scan 方法是因为 avalon 的 DOMReady 模块里带了自扫描机制，它能在 DOMReady 后自动执行 avalon.scan() 来扫描和执行文档中的 avalon 功能属性。下面是其源码里的相关代码片断：
avalon.ready(function () {
    avalon.scan && avalon.scan(document$1.body);
});

（4）但有的时候光自动扫描并不能满足我们的需求，可能我们在定义 VM 并自动 avalon.scan() 后，又会通过 load 加载新元素进来，或是通过 append 方法新增了 html 元素，avalon 对这些新元素是不起作用的。这时就需要我们手动调用 avalon.scan 方法去扫描下。

2，使用样例

（1）我们可以重新扫描整个页面：
avalon.scan(document.body);

（2）不过为了提高效率，最好只扫描指定的 DOM 区域： 
avalon.scan(document.getElementById("xxx"));

注意：如果使用了 jQuery，扫描时要将 jQuery 对象转成 DOM 对象： 
//正确写法
avalon.scan($("#xxx").get(0));

//错误写法
avalon.scan($("#xxx"));
评论

全部评论（0）

回到顶部