在上篇博客中的最后,提到了项目中用到了Avalon。和Angular一样,它也属于MVVM模式。
原文链接:https://www.f2er.com/angularjs/148771.html
之前对Angular也只是接触过,但没能快速上手,熟练地去应用,只是留下了些印象。而通过这段时间,在项目中对Avalon的应用,发现两者其实差不多。
A
valon是一个功能强大,体积小巧的MVVM框架。它遵循“操作数据即操作DOM”的理念,让你在代码里基本见不到一点DOM操作代码。DOM操作全部在绑定后,交给框架处理。相当后端有了ORM一样,不用你手写sql,提高生产力!
下面就看一个简单的实例代码:
其中有着很详细的注释,很容易明白,代码中不再是用jquery进行dom操作,从而改变html元素。简单的指令,简单的绑定,便可以轻松操作。
下面列举的是Avalon的一些优势和与其他框架的一些比较,我觉得有了实践之后,体会更加深刻。
优势:
2.兼容到IE6(其他mvvm框架, knockoutjs IE6,angularjs IE7,emberjs IE8,winJS IE9 )
3.没有任何依赖,只有72K,压缩后22K
5.局部刷新的颗粒度已细化到一个文本节点,特性节点
6.要操作的节点,在第一次扫描就与视图刷新函数相绑定,并缓存起来,因此没有选择器出场的余地。
7.让DOM操作的代码近乎绝迹
9.节点移除时,智能卸载对应的视图刷新函数,节约内存
10.操作数据即操作DOM,对viewmodel的操作都会同步到View与Model去。
与其他框架比较:
1.它体积更少,在主要的几个MVVM框架(拥有双向绑定机制),knockout是三千多行,angularjs 1.6万, emberjs2-3万行, winjs是几M, kendoui是几M!
2.兼容情况,kendoui与 knockoutjs IE6,winJS IE9
4.上手难度,与knockout差不多,但借鉴了angularjs的,更为易用。
5.与knockoutjs,angular,winjs一样是使用动态模板,至少保持第一屏数据是真实的,对SEO友好。
其中有很多UI组件可以直接拿来用,以及一些常用的指令介绍。
【项目心得】
对于Avalon,第一次听,没接触过,在团队的帮助下,得以让我很快地上手,也许是之前有些Angular的使用感受,所以在接触到了项目的前端之后,就让我很容易想到了Angular,最明显的特征就是双向的数据绑定。
刚开始接触,都是比较简单的应用,到后面,需求越来越多了,使用Avalon的各种组件、各种API也越来越多了,但使用Avalon,很复杂地需求,也可以用很简单地代码去实现,也很容易理解。我也喜欢上这个AvalonJS了。