前端开发框架三剑客—AngularJS VS. Backone.js VS.Ember.js幻灯片.doc

前端开发框架新三剑客 —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表达式，不可谓不强大，甚至是过于强大了。开发者可以在视图模板中使用复杂的逻辑甚至是进行操作委派和计算，这不啻增加了测试的难度。例如下面