avalon2是一款基于虚拟DOM与属性劫持的 迷你、 易用、 高性能 的 前端MVVM框架， 拥有超优秀的兼容性, 支持移动开发, 后端渲染, WEB Component式组件开发, 无需编译, 开箱即用。上一个简单的入门例子：
<!DOCTYPE html><html> ???<head> ???????<title>first example</title> ???????<meta charset="UTF-8"> ???????<meta name="viewport" content="width=device-width, initial-scale=1.0"> ???????<script src="./dist/avalon.js"></script> ???????<script> ???????????var vm = avalon.define({ ???????????????$id: "test", ???????????????name: "测试", ???????????????array: [11,22,33] ???????????}) ???????????setTimeout(function(){ ??????????????vm.array.set(0, 444) ???????????}, 3000) ???????</script> ???</head> ???<body ms-controller="test"> ???????<input ms-duplex="@name"> ???????<p>Hello,{{@name}}!</p> ???????<ul> ??????????<li ms-for="($index,el) in @array">{{$index}}--{{el}}</li> ???????</ul> ???</body></html>这里面涉及一些知识点
- vm,使用avalon.define方法生成,必须带$id属性
- 指令,以ms-开头的属性及双花括号的插值表达式
- 圈定作用域,使用ms-controller告诉框架,只处理这个范围内的标签
- 引导符,使用
@或##来告诉框架这些变量是来自vm的 - 自动扫描机制
define
创建一个vm对象,必须指定$id
avalon.define({ ?$id: ‘aaa‘, ?bbb: 1})插值表达式
位于文本节点中的双重花括号,当然这个可以配置.此指令其中文本ms-text指令的简单形式.
<body ms-controller="test"> ???<script> ???????avalon.define({ ???????????$id: ‘test‘, ???????????aaa: ‘aaa‘, ???????????bbb: ‘bbb‘ ???????}) ???</script> ???<p>{{@aaa}}{{@bbb}} 这个性能差些</p> ???<p>{{@aaa+@bbb}} 这个性能好些</p> ???<p>{{@aaa+@bbb ?| uppercase}} 选择器必须放在表达值的后端</p></body>一款轻量级前端框架Avalon.Js
原文地址：http://www.cnblogs.com/benpao/p/7425841.html