AvalonJs - 使用avalon.scan方法扫描指定区域
一、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"));
