Avalon，继Angular之后

    在上篇博客中的最后，提到了项目中用到了Avalon。和Angular一样，它也属于MVVM模式。

     之前对Angular也只是接触过，但没能快速上手，熟练地去应用，只是留下了些印象。而通过这段时间，在项目中对Avalon的应用，发现两者其实差不多。

    A valon是一个功能强大，体积小巧的MVVM框架。它遵循“操作数据即操作DOM”的理念，让你在代码里基本见不到一点DOM操作代码。DOM操作全部在绑定后，交给框架处理。相当后端有了ORM一样，不用你手写SQL，提高生产力！

    下面就看一个简单的实例代码：

    其中有着很详细的注释，很容易明白，代码中不再是用jquery进行dom操作，从而改变html元素。简单的指令，简单的绑定，便可以轻松操作。

     下面列举的是Avalon的一些优势和与其他框架的一些比较，我觉得有了实践之后，体会更加深刻。

     优势：

      1. 使用简单，在HTML中添加绑定，在JS中用avalon.define定义ViewModel，再调用avalon.scan方法，它就能动了！

     2.兼容到IE6(其他mvvm框架， knockoutjs IE6, angularjs IE7, emberjs IE8, winJS IE9 )

     3.没有任何依赖，只有72K，压缩后22K

     4.支持管道符风格的过滤函数，方便格式化输出

     5.局部刷新的颗粒度已细化到一个文本节点，特性节点

     6.要操作的节点，在第一次扫描就与视图刷新函数相绑定，并缓存起来，因此没有选择器出场的余地。

     7.让DOM操作的代码近乎绝迹

     8.使用类似CSS的重叠覆盖机制，让各个ViewModel分区交替地渲染页面

     9.节点移除时，智能卸载对应的视图刷新函数，节约内存

     10.操作数据即操作DOM，对ViewModel的操作都会同步到View与Model去。

     与其他框架比较：  

    1. 它体积更少，在主要的几个MVVM框架（拥有双向绑定机制），knockout是三千多行，angularjs 1.6万， emberjs2-3万行， winjs是几M， kendoui是几M！

    2. 兼容情况，kendoui与 knockoutjs IE6, angularjs IE7, emberjs IE8, winJS IE9

    3. 让用户写代码更少

    4. 上手难度，与knockout差不多，但借鉴了angularjs的，更为易用。

    5. 与knockoutjs, angular, winjs一样是使用动态模板，至少保持第一屏数据是真实的，对SEO友好。

    6. 源码也是它们中最易读的。简单的代码也意味着扩展调试等容易。    

    利用闲暇时间，自己也上网查了很多关于Avalon的资料，发现总结它的文章并不多，完整的教程式的系列文章更是少之又少。这里给大家分享一个链接，又兴趣的可以看看： Avalon学习教程。

    除此之外，在分享一个avalon的API链接： http://hotelued.qunar.com/oniui/index.html#!/widgets

其中有很多UI组件可以直接拿来用，以及一些常用的指令介绍。

    【项目心得】

    对于Avalon，第一次听，没接触过，在团队的帮助下，得以让我很快地上手，也许是之前有些Angular的使用感受，所以在接触到了项目的前端之后，就让我很容易想到了Angular，最明显的特征就是双向的数据绑定。

    刚开始接触，都是比较简单的应用，到后面，需求越来越多了，使用Avalon的各种组件、各种API也越来越多了，但使用Avalon，很复杂地需求，也可以用很简单地代码去实现，也很容易理解。我也喜欢上这个AvalonJS了。