本博客日IP超过2000，PV 3000 左右，急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包，请加博主新的微信号：xttblog2，之前的微信号好友位已满，备注：返现
受密码保护的文章请关注“业余草”公众号，回复关键字“0”获得密码
所有面试题(java、前端、数据库、springboot等)一网打尽，请关注文末小程序
腾讯云】1核2G5M轻量应用服务器50元首年，高性价比，助您轻松上云
现在的程序都离不开框架，而且程序员面试时首先被问到的就是你了解哪些框架，学习过哪些源码？各种框架犹如雨后春笋般的涌现出来，大的小的，前端的后端的，MVC的，MVP的，MVVM的，太多太多了，以至于很多网友在论坛里提问我读无法回答。深感歉意！
随着前端MVVM的流行，小型框架现在越来越难存活了！一个框架的好坏很多时候都是取决于她的社区，她背后的站台公司。像react, angular等这样拥有大公司背景的框架占了半壁江山，而avalon以其良好兼容性在国内份额不断上升。最后剩下的框架只有两种：有后台的和没后台的。
avalonJS是司徒正美开发和维护的前端mvvm框架，最早发布于2012.09.15，它可以轻松实现数据的隔离和双向绑定，相比angularJS等前端框架它有如下优势：
1.压缩后仅有60多kb，而angular的min版是2MB左右（无视其gzip版）；
2.兼容IE6+，符合天朝市场需求；
3.效率更高，跑起来比angular和knockout都要更快，在移动端上该优势会更大（avalon有移动端专版的avalon.modern.js）。关于其性能更详细的介绍可以看 这里 ；
4.涵盖了angular的大部分功能，且实现方式更为便捷、上手更容易;
5.有配套的UI库（当然这个按需选择即可），由司徒正美及其“去哪儿”团队维护，有相关的中文文档（下方会提到），除了在github提交issue，你也可以加入正美的Q群79641290 来交流问题或提交bug。
现在的avalon是我在完全消化了knockout发展起来的，通过Object.defineProperties与VBScript实现了与普通对象看起来没什么两样的VM，VM里面充满了访问器属性，而访问器属性肯定对应一个setter,一个getter， 我们就在setter, getter中走knockout的老路，实现自动收集依赖，然后放进一个简单的观察者模式中，从而实现双向绑定。将绑定属性分解为求值函数与视图刷新函数，早前，avalon也与knockout一样使用一个简单的parser，然后通过with实现， 0.82一个新的parser 上马，同样的迷你，但生成的求值函数，更方便依赖收集，并且没有with语句，性能更佳。angular也不是一无是处，我也从它那里抄来了{{}}插值表达式，过滤器机制，控制器绑定什么的。
官方入门demo：
<!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="avalon.js"></script>
<script>
// 业余草：www.xttblog.com
var vm = avalon.define({
$id: "test",
name: "司徒正美"
});
</script>
</head>
<body ms-controller="test">
<input ms-duplex="name">
<p>Hello,{{name}}!</p>
</body>
</html>
avalon的控制域属性名叫做“ms-controller”，你可以把它当作一个监听器，把它绑定到一个容器后，avalon就能扫描和监听这个容器内的所有 （绑定了avalon方法或带有插值表达式的） 元素了。demo中给body加上这个监听器，并在里面写一个 avalon插值表达式{{ XXX }} 。
在avalon中，我们用 avalon.define({ …}) 的形式来定义一个Model实例（其参数可以看做一个avalon数据对象），其中的$id是内置属性，对应所要扫描和监控的控制域名。内部定义了一个属性"name"，故在对应的控制域(如这段代码对应的域是绑定ms-controller="test"的body标签)里，我们使用avalon插值表达式{{name}}的话，可以自动绑定其值“司徒正美”。还有一个需要注意的是<input ms-duplex="name"/> ，其中的ms-duplex是avalon的双工绑定属性，它除了负责将VM中对应的值（如本例是a）放到表单元素的value中，还对元素偷偷绑定一些事件，用于监听用户的输入从而自动刷新VM。
avalon在内部使用了许多巧妙的设计，因此能涵盖angular绝对大多数功能，但体积却非常少。此外，在性能上，现在除了chrome外，它都比knockout快，angular则是最慢的。 在移动端上，avalon这个优势会被大大放大化的。比如我们要实现下面的功能，使用avalonJS只需要几行代码就可以搞定。
<body>
<script type="text/javascript">
var gg=[{"id":"1","title":"公告文章标题1"},{"id":"2","title":"公告文章标题2"},{"id":"3","title":"公告文章标题3"},{"id":"4","title":"公告文章标题4"}];
var bd=[{"id":"1","title":"媒体报道文章标题1"},{"id":"2","title":"媒体报道文章标题2"},{"id":"3","title":"媒体报道文章标题3"},{"id":"4","title":"媒体报道文章标题4"}];
</script>
<div ms-controller="list">
<span ms-mouseover="changeUl(1)">公告</span>
<span ms-mouseover="changeUl(0)">媒体报道</span>
<a ms-href="'#!/'+ more_name">{{more_text}}</a>
<ul>
<li ms-repeat="infoList">
<a ms-href="'#!/'+ more_name + '/' + el.id" ms-title="el.title">{{el.title}}</a>
</li>
</ul>
</div>
<script type="text/javascript">
var vm = avalon.define({
$id: "list",
more_name: "gg",
more_text: "更多公告",
gg:gg,
bd:bd,
infoList:gg,
changeUl:function(flag){
if(flag){ //鼠标移过“公告”选项卡头部
vm.more_name = "gg";
vm.more_text = "更多公告";
vm.infoList = vm.gg;
}else{ //鼠标移过“媒体报道”选项卡头部
vm.more_name = "bd";
vm.more_text = "更多报道";
vm.infoList = vm.bd;
}
}
});
avalon.scan();
</script>
</body>
版权声明：本文为博主原创文章，未经博主允许不得转载。
最后，欢迎关注我的个人微信公众号：业余草（yyucao）！可加作者微信号：xttblog2。备注：“1”，添加博主微信拉你进微信群。备注错误不会同意好友申请。再次感谢您的关注！后续有精彩内容会第一时间发给您！原创文章投稿请发送至532009913@qq.com邮箱。商务合作也可添加作者微信进行联系！
本文原文出处：业余草： » MVVM框架avalonJS入门开发教程