前端展望：取avalon，弃angular

打给比方，若是说angularJS是剑，那么avalon就是匕首。匕首比剑更易学，更快，更适合快速做战...

咱们仍是直接来实际的吧：

 

目前项目开发中有如下几个通用需求：

• 有前端路由系统，用来划分逻辑模块。
• 有异步模块载入，如requireJS或者seaJS。
• 数据与视图自动绑定，而且性能出众。
• 框架学习曲线不要太陡，而且让个人代码越少越好。

路由

AngularJS不能无缝与第三方路由整合，只能用它本身的模块，如”ui-status“。缘由是AngularJS的数据模型是包裹在它的“controller”做用域里面的。固然你能够把这些数据模型抛到全局做用域里，但即使如此，你对这些数据模型操做之后仍是要手动调用“scope.$digest()”才能影响到视图。

avalon暂时须要借助第三方路由模块，能够无缝整合。例如，一般路由模块接受一个对象做为参数，这个对象中的键名是路由的路径，值是一个回调函数，当url符合这个路径时就自动执行回调。在这个回调里，咱们能够直接操做avalon的数据模型，而且数据模型的改变会当即影响到视图，如：

 

 

异步载入

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的机制：将数据模型中的属性用get 和set 方法重写。在set方法中去更新全部和当前数据模型有关的视图元素，这就是为何avalon一更新数据就能立刻反映到视图上、而且性能更出众的缘由。直接翻到avalon源码的“modelFactory”函数，在这个函数中avalon收集和当前模型有关的视图元素、其余相关联的数据，最后注册到属性中。其中更详细的原理能够直接参考做者 司徒正美 的github  https://github.com/RubyLouvre/avalon

 

学习曲线与代码量

AngularJS的学习曲线明显偏陡，其中的directive等概念虽然功能强大，但对新手来讲要掌握的东西太多。avalon则相对平滑。avalon在人代码形式上几乎没有任何要求，所以代码量也比AngularJS更少。

 

除了以上几个方面，在选择的时候还有一些要考虑的状况，例如：AngularJS有完整的测试、打包，代码拆分得很是有调理。avalon由于自己简单，且版本号还未到1，所以还有很多问题，其中包括部分代码不能用。但总的来讲，仍是推荐使用avalon，缘由很简单：若是你可以很好的理解并AngularJS了，那你的水平足够把avalon玩得更顺手、更为所欲为了，像剑圣手中的匕首，已足以于千军万马中取上将首级。