【JavaScript】前端开发框架三剑客—AngularJS VS. Backone.js VS.Ember.js

摘要：透过对Github，StackOverflow，YouTube等社区进行数据收集后可知，AngularJS在各大主流社区中都是最受欢迎的，Backbone.js与Ember.js则不相伯仲。本文将对当前三款流行的Web开发框架作个简单比较。

是否选择了合适的框架进行Web开发对项目是有重大影响的。我们都希望找到一个稳健的易维护的框架结构。接下来，我们一起来对当前三款流行Web开发框架作个简单比较认识。

初步认识

AngularJS诞生于2009年，是商业产品GetAngular的一部分。后来，GetAngular创造者之一的MisKoHevry对其进行精简，并随后获得了Google的大力支持，进而发展成今天的样子。Angular最独特最有创造性的特性莫过于是双向(two-way)数据绑定以及HTML扩展能力。

问世于2010年的Backone.js是一个轻量级的MVC框架，崇尚精简的团队对其青睐有加。Pinterest，Flixster，AirBNB等都是使用该框架进行开发的。

Ember的首个足迹印于2007年。刚开始时是作为SproutCore的MVC框架，之后被Sproutlt和Apple接手。Ember的重量级用户包括Yahoo，Groupon以及ZenDesk。

此外，是否具备一个完善的社区支援网络也是重要的考量因素。透过对Github，StackOverflow，YouTube等社区进行数据收集后可知，AngularJS在各大主流社区中都是最受欢迎的，Backbone.js与Ember.js则不相伯仲。

框架大小

页面的加载速度是网站受欢迎与否的重要因素。用户现在变得越来越缺乏耐心了，特别是在同类型网站之间进行选择时，哪个加载得更快或许就会先入为主了。因此，我们必须充分考虑这个需求，尽可能地为我们的页面进行瘦身提速。这里有两个考量因素：框架的大小和引导加载过程的快慢。

下表列出了这三个框架各自的净大小以及结合依赖物之后的大小(已压缩)：

模板

Angular和Ember已包含各自的模板引擎，Backbone则需要用户自行选择。以下将结合HTML代码实例进行对比分析。

1.AngularJS

Angular的模板引擎是使用表达式绑定的HTML格式，绑定格式是使用两对大括号：

2.Backbone.js

Backbone可与很多其它第三方模板引擎进行整合，默认的选择是Underscore。如果你已经采用了Underscore，属于Backbone依赖之一的Undersocre无须额外的操作，我们便可使用它的模板引擎。美中不足的是该引擎功能较简单，我们通常需要加入其它的javascript代码来实现其它功能，例如下面的例子：

3.Ember.js

Ember目前采用的模板引擎是属于Mustache模板引擎扩展的Handlebars。目前出现的一个新Handlebars变种名为HTMLBars。相对于Handlebars，HTMLBars增添了对DOM的支援，不过HTMLBars暂还没有正式推出。以下例子是基于Handlebars的：

AngularJS的强项

双向数据绑定节省了大量公式化的代码，先看看下面的jQuery代码：

而如果使用Angular，我们可以省却这些代码，而只需在HTML模板进行绑定声明：

Angular不仅拥有最大的在线社区支持，而且Google一直在推广它。很多创新的工具不断涌现，极大地提高了工作效率，例如：Protractor，Batarang，Zone.js等。此外，Angular还与社区进行广泛合作，不断进行改进。有关Angular 2.0的设计文档，可以点击这里进行了解,任何人都可以直接在上面发表意见。

Angular能够帮助我们有条不紊地把程序生成区块进行分类：控制器，指令，装配器，筛选器，服务和视图(模板)等。这些都是以模块化方式进行组织的，互相形成依赖。不同区块有不同的角色，视图负责UI，控制器负责UI身后的逻辑管理，指令负责组件复用以及HTML扩展等。

自动化的脏数据检查(Dirty Checking)机制能够使我们进行任意的对象属性修改，angular会自动识别出这些变更，然后通知所有与该属性有关的观察者。

Angular还提供了很多即用的功能强大的基本内建服务，例如$http和$timeout。

AngularJS的弱项

嵌入包含和原型继承的概念会让不少开发者感到迷惑，我们需要花一定时间才能领悟其中的含义。在视图层便可广泛使用的Angular表达式，不可谓不强大，甚至是过于强大了。开发者可以在视图模板中使用复杂的逻辑甚至是进行操作委派和计算，这不啻增加了测试的难度。例如下面的代码：

1. <button ng-click="(oldPassword && checkComplexity(newPassword) && oldPassword != newPassword) ? (changePassword(oldPassword, newPassword) && (oldPassword=(newPassword=''))) : (errorMessage='Please input a new password matching the following requirements: ' + passwordRequirements)">Click me</button>

Backbone.js的强项

Backbone是一款轻量级的产品，容易上手，新概念不多，并且有丰富的文档资源与代码示例资源。基于Backbone的第三方框架有Aura,BackboneUI,Chaplin,Geppetto,Marionette等。

Backbone.js的弱项

Backbone暂时还没提供程序架构方面的支援，取而代之的是提供了一些基本的工具来让我们自己进行架构建设，例如内存管理等都是需要亲力亲为的。视图生命周期管理方面的欠缺，更使得程序容易在路径/状态发生变更时出现内存泄漏问题，除非我们能把所有应该清除干净的对象处理好。

很多没能从Backbone中获得的功能都是由第三插件来提供的。这样一来，我们有可能需要花时间进行一番测试摸索才能确定哪个插件才是适合自己的，从而增加了额外的开发用时。

Backbone没有提供双向数据绑定，我们必须自己手写代码来进行相关处理。Backbone中的视图是直接操作DOM的，这增加了单元测试的难度，对程序稳健性和复用性也有一定影响。

Ember.js的强项

Ember拥有不俗的配置管理能力，可以省却不少的人工代码。例如Ember.js会通过路由器的名字，判断出相应的路由和控制器的名字。Ember中有一个卓越的路由层、数据层，名字是ember data。它封装了一个完备的数据模块，与Ruby-On-Rails或其它RESTful JSON API很好地整合在一起。

性能指标是Ember.js的设计重点，例如事件处理循环和程序预编译等方面，Ember都做了不少努力。

Ember.js的弱项

Ember API 经历了一段时间才最终形成现在比较稳定的版本。因此，初初接触Ember的开发者可能会对一些老旧的文档和例子感动迷惑，具体可以看看它的更新日志，请点击这里。

Handlebars的使用，使得DOM中充满了<script>标记，有时很难分辨出哪些代码是自己的，对CSS样式和其它框架的整合也造成了一定影响。

写在最后

Angular在HTML扩展方面有很多独到的做法，有强大的支援资源。Backbone是小巧的，入门门槛相对较低的。基于MVC结构的Ember，对有面向对象编程基础的开发者来说非常亲切，自身也有强大的配置管理能力。三者各有特色各有长短，我们不妨好好对比学习，找到适合自己的那杯茶。

英文出自：Airpair.com

http://www.csdn.net/article/2014-08-27/2821409-javascript-framework-comparison