前端展望：取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玩得更顺手、更随心所欲了，像剑圣手中的匕首，已足以于千军万马中取上将首级。