前端展望:取avalon,弃angular

打给比方,如果说angularJS是剑,那么avalon就是匕首。匕首比剑更易学,更快,更适合快速作战...
我们还是直接来实际的吧:
 
目前项目开发中有以下几个通用需求:
  • 有前端路由系统,用来划分逻辑模块。
  • 有异步模块载入,如requireJS或者seaJS。
  • 数据与视图自动绑定,并且性能出众。
  • 框架学习曲线不要太陡,并且让我的代码越少越好。
路由
AngularJS不能无缝与第三方路由整合,只能用它自己的模块,如”ui-status“。原因是AngularJS的数据模型是包裹在它的“controller”作用域里面的。当然你可以把这些数据模型抛到全局作用域里,但即便如此,你对这些数据模型操作以后还是要手动调用“scope.$digest()”才能影响到视图。
avalon暂时需要借助第三方路由模块,可以无缝整合。例如,通常路由模块接受一个对象作为参数,这个对象中的键名是路由的路径,值是一个回调函数,当url符合这个路径时就自动执行回调。在这个回调里,我们可以直接操作avalon的数据模型,并且数据模型的改变会立即影响到视图,如:
前端展望:取avalon,弃angular
 前端展望:取avalon,弃angular
 
异步载入
AngularJS中本身没有异步模块加载系统,作者在公开场合对这个问题的回答是:“不认为现在有多少前端应用真正大到异步加载,绝大部分时候通过压缩、缓存就足够了”。但是也有一些模块来让AngularJS支持异步加载或者与第三方异步模块整合。具体可以在github上搜“requireJS angularJS”。
avalon自带AMD模块加载器。
 
数据与视图绑定及性能
Talk is cheap,我们直接来看内部实现吧。
AngularJS的机制:AngularJS提供了一个机制让你声明页面上的dom事件和对应的需要出发的数据模型的方法,例如你在一个元素上写上一个“ng-click='changeMyName()'”的属性,当你点击它时,AngularJS就会自动执行“changeMyName”的方法。除了执行这个方法,AngularJS还会触发一个叫做“$digest”的函数。这个函数会直接检测“所有的数据模型”是否改动,有改动就去更新相应的视图元素。你可以去github上把AngularJS克隆下来,翻到“src/ng/”目录下的“$digest”函数看看。我缩略掉了几个细节的地方,一下让大家先看全貌(注意注释部分):
前端展望:取avalon,弃angular
 前端展望:取avalon,弃angular
avalon的机制:将数据模型中的属性用get 和set 方法重写。在set方法中去更新所有和当前数据模型有关的视图元素,这就是为什么avalon一更新数据就能马上反映到视图上、并且性能更出众的原因。直接翻到avalon源码的“modelFactory”函数,在这个函数中avalon收集和当前模型有关的视图元素、其他相关联的数据,最后注册到属性中。其中更详细的原理可以直接参考作者 司徒正美 的github https://github.com/RubyLouvre/avalon
 
学习曲线与代码量
AngularJS的学习曲线明显偏陡,其中的directive等概念虽然功能强大,但对新手来说要掌握的东西太多。avalon则相对平滑。avalon在人代码形式上几乎没有任何要求,因此代码量也比AngularJS更少。
 
除了以上几个方面,在选择的时候还有一些要考虑的情况,例如:AngularJS有完整的测试、打包,代码拆分得非常有调理。avalon因为本身简单,且版本号还未到1,因此还有不少问题,其中包括部分代码不能用。但总的来说,还是推荐使用avalon,原因很简单:如果你能够很好的理解并AngularJS了,那你的水平足够把avalon玩得更顺手、更随心所欲了,像剑圣手中的匕首,已足以于千军万马中取上将首级。
上一篇:ARM 链接配置.lds文件学习<转>


下一篇:JS逻辑运算大于小于比较