迷你简单易用的MVVM框架
前端做久了就会发现HTML(DOM)才是所有前端的真正精髓汇聚地。不管JS和CSS都是为DOM服务的。但是DOM遍布荆棘与陷阱，因此才出现像jQuery那样专门为它填坑的库， 当下的前端开发就是一边填坑一边写业务中进行。avalon的诞生改变了这一切，让我们摆脱DOM的掣肘，专注于需求本身，将可变的数据与操作数据的方法封装成模型。 在更高的层次上组织代码，提高软件的可维护性，可扩展性和可重用性。
- avalon.js 兼容IE6，及标准浏览器
- avalon.modern.js 则只支持IE10及其以上版本，及标准浏览器,主流山寨浏览器(QQ, 猎豹, 搜狗, 360, 傲游)
- 如果想支持触摸屏，请把mobile.js的源码拷贝到avalon.modern.js最后一个})之前，要不会报"Uncaught ReferenceError: W3CFire is not defined mobile.js:313"错误
- 想使用路由器，可以用mmRouter，
想使用动画，可以用mmAnimate，
想使用AJAX，可以用mmRequest，
想使用各种控件库，可以用去哪儿网前端架构组搞的OniUI库
</li> <li>avalon的测试比较庞大，放在独立的仓库中——<a href="https://github.com/RubyLouvre/avalon.test">avalon.test</a> </li>
- 使用简单，在HTML中添加绑定，在JS中用avalon.define定义ViewModel，再调用avalon.scan方法，它就能动了！
- 兼容到IE6(其他MVVM框架，KnockoutJS(IE6), AngularJS(IE9), EmberJS(IE8), WinJS(IE9) )，另有avalon.mobile，它可以更高效地运行于IE10等新版本浏览器中
- 没有任何依赖，不到4000行，压缩后不到50KiB
- 支持管道符风格的过滤函数，方便格式化输出
- 局部刷新的颗粒度已细化到一个文本节点，特性节点
- 要操作的节点，在第一次扫描就与视图刷新函数相绑定，并缓存起来，因此没有选择器出场的余地。
- 让DOM操作的代码近乎绝迹
- 使用类似CSS的重叠覆盖机制，让各个ViewModel分区交替地渲染页面
- 节点移除时，智能卸载对应的视图刷新函数，节约内存
- 操作数据即操作DOM，对ViewModel的操作都会同步到View与Model去。
- 自带AMD模块加载器，省得与其他加载器进行整合。
其他教程: 《avalon-learning 教程》→《入门教程》→ HTML5交流会有关avalon的PPT→《avalon最佳实践》
将项目下载到本地，里面有一个叫server.exe的.Net小型服务器（可以需要安装.Net4.0才能运行）， 点击它然后打开里面与index开头的HTML文件，一边看运行效果，一边看源码进行学习。
大家也可以在新浪微博第一时间了解它的变更或各种秘笈分享！
<!DOCTYPE html>
<html>
<head>
<title>avalon入门</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="avalon.js" ></script>
<script>
var first = 0;
var model = avalon.define("test", function(vm) {
vm.firstName = "司徒"
vm.lastName = "正美"
vm.fullName = {//一个包含set或get的对象会被当成PropertyDescriptor，
set: function(val) {//里面必须用this指向scope，不能使用scope
var array = (val || "").split(" ");
this.firstName = array[0] || "";
this.lastName = array[1] || "";
},
get: function() {
return this.firstName + " " + this.lastName;
}
}
vm.arr = ["aaa", 'bbb', "ccc", "ddd"]
vm.selected = ["bbb", "ccc"]
vm.checkAllbool = false
vm.checkAll = function() {
if (!first) {
first++
return
}
if (this.checked) {
vm.selected = vm.arr
} else {
vm.selected.clear()
}
}
vm.checkOne = function() {
var bool = this.checked
if (!bool) {
vm.checkAllbool = false
} else {
vm.checkAllbool = vm.selected.size() === vm.arr.length
}
}
})
</script>
</head>
<body>
<div ms-controller="test">
<p>First name: <input ms-duplex="firstName" /></p>
<p>Last name: <input ms-duplex="lastName" /></p>
<p>Hello, <input ms-duplex="fullName"></p>
<div>{{firstName +" | "+ lastName }}</div>
<ul>
<li><input type="checkbox" ms-duplex-radio="checkAllbool" data-duplex-changed="checkAll"/>全选</li>
<li ms-repeat="arr" ><input type="checkbox" ms-value="el" ms-duplex="selected" data-duplex-changed="checkOne"/>{{el}}</li>
</ul>
</div>
</body>
</html>从上至下，依次是
- 全局变量及方法 - avalon的静态方法定义区 - modelFactory - JavaScript 底层补丁 - DOM 底层补丁 - 配置系统 - avalon的原型方法定义区 - HTML处理(parseHTML, innerHTML, clearHTML) - 自定义事件系统 - 依赖调度系统 - 扫描系统 - 编译系统 - 绑定处理系统 - 监控数组 - 自带过滤器 - AMD加载器 - DOMReady