JavaScript avalon初探 Tab切换经典效果制作实例。
avalon MVVM框架
好久没敲日志了，十一之前事情忙的要命，十一的时候本来打算猛些一番，结果却天不遂人愿，旅途奔波加上事情繁多，本身就没有太长时间去写博客，结果还感冒发烧，直接到了假期结束后的今天才刚刚好了。所以，抓紧时间来一篇吧！
记得大概是今年7月底的时候，自己去听了在新浪那边举办的沙龙活动，司徒正美当时讲解了avalon这个东西，是MVVM的一个迷你框架。当时并没有太大的感受，虽然知道在数据处理方面有一定的优势，但是毕竟没有自己去敲个例子，仅仅是听（而且去的晚了，实在是听不清楚），感觉“和jQuery框架没什么区别啊！”
最近好朋友研究了研究avalon，分享了一下，顿时感觉明白了很多，于是动手写了个例子，tab切换，很经典的范例。也很佩服avalon的开发者司徒正美的技术。
关于avalon的基本知识
兼容IE6;
没有AJAX与动画模块，需要配合jQuery等库使用
avalon会自动同步视图，因此不要在VM中进行DOM操作
下载地址：https://github.com/RubyLouvre/avalon
注意：如果你要兼容IE6，那么下其中的avalon.js, 如果你只打算兼容IE10与标准浏览器，那么下avalon.mobile.js。
Tab切换的实例
ms-controller:告知某一段代码，此处使用avalon进行处理。在相应代码中放置ms-controller=’变量名’。该变量在下面的define方法当中将会被使用到
ms-each-num=’arr’要放置在父级上。num代表着arr数组的第几项，运用变量num代表那个数字而已。arr这个数组是定义在avalon当中的。获取arr数组中的内容的方法为{{变量名}}（此处为num），如果这个数组当中每个元素并不是一个简单的数字，而是对象、数组组成的，那么可以通过“.”和“[]”的形式进行访问，与访问JSON数据的方式相同。
avalon.scan()表示的是扫描，用于进行页面的初始化，在js当中存在着自动扫描的控制方法
具体解释已经写到了代码当中
<!doctype html>
<html>
<head>
<meta charset=”UTF-8″>
<title>test-tab 网易博客-独行冰海</title>
<style>
*{margin: 0;padding: 0;}
.tits li{
width: 98px;
height: 48px;
border: 1px solid #f00;
list-style: none;
float: left;
}
.con div{
width: 298px;
height: 498px;
border: 1px solid #f00;
display: none;
}
.con .show{
display: block;
}
</style>
</head>
<body>
<div ms-controller=’tab’> //从此处开始使用avalon进行代码的解析
<ul class=’tits’ id=”tits” ms-each-num=’arr’> //进行遍历操作，完成所有数组元素的查找，打印出和数组长度相等的li
<li ms-click=’ch($index)’>{{num.name}}</li> //为li绑定单击事件，事件名称为ch，每一个ch传递一个参数
</ul> //$(index)这个参数主要是为了控制哪个div处于显示状态
<div class=’con’ id=”con” ms-each-num=’arr’>
<div ms-class=’show:showIndex===$index’>{{num.con}}</div> //show：showIndex===$index表示如果当前的showIndex变量值等于该div的索引值，那么为它添加show这个类名
</div>
</div>
</body>
<script src=’avalon.js’></script> //一定要引入avalon.js文件，下载地址在上面文章中已经写到了
<script>
var vmodel = avalon.define(‘tab’, function(vm){ //定义了一个avalon的方法，这个方法是avalon内置的，就如同jq中的bind一样
vm.arr = [{ //此处是定义了一个数组，原则上，数据是从后台传递过来的，在上面当中出现的{{num.name}}既是对数据进行获取
"name" : "标题1",
"con" : "此处为内容1"
},{
"name" : "标题2",
"con" : "此处为内容2"
},{
"name" : "标题3",
"con" : "此处为内容3"
}];
vm.showIndex = 0; //设置变量，用于控制哪个div是显示状态
vm.ch = function(n){
vmodel.showIndex = n; //ch函数的功能主要是在点击li之后进行相应索引值的获取，并根据该值设置div的样式
}
});
avalon.scan(); //进行扫描（即页面初始化）
</script>
</html>
应该说，在数据处理方面，avalon非常好用，能够很好的进行代码的处理，大大降低了不同“部门”之间的耦合程度。对于avalon的知识还在学习中，也希望大家互相交流。-独行冰海