Avalon,继Angular之后

前端之家收集整理的这篇文章主要介绍了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,winJS IE9
3.用户代码更少
4.上手难度,与knockout差不多,但借鉴了angularjs的,更为易用。
5.与knockoutjs,angular,winjs一样是使用动态模板,至少保持第一屏数据是真实的,对SEO友好。
6.源码也是它们中最易读的。简单的代码也意味着扩展调试等容易。
利用闲暇时间,自己也上网查了很多关于Avalon的资料,发现总结它的文章并不多,完整的教程式的系列文章更是少之又少。这里给大家分享一个链接,又兴趣的可以看看: Avalon学习教程
其中有很多UI组件可以直接拿来用,以及一些常用的指令介绍。
【项目心得】
对于Avalon,第一次听,没接触过,在团队的帮助下,得以让我很快地上手,也许是之前有些Angular的使用感受,所以在接触到了项目的前端之后,就让我很容易想到了Angular,最明显的特征就是双向的数据绑定。
刚开始接触,都是比较简单的应用,到后面,需求越来越多了,使用Avalon的各种组件、各种API也越来越多了,但使用Avalon,很复杂地需求,也可以用很简单地代码去实现,也很容易理解。我也喜欢上这个AvalonJS了。
原文链接:https://www.f2er.com/angularjs/148771.html

猜你在找的Angularjs相关文章