转自:http://www.oschina.net/translate/javascript-framework-comparison
英文原文:AngularJS vs. Backbone.js vs. Ember.js
1 介绍
我们准备在这篇文章中比较三款流行于Web的“模型-视图-*”框架:AngularJS、Backbone和Ember。为你的项目选择正确的框架能够对你及时交付项目的能力和在以后维护你自己代码的能力产生巨大影响。你也许想基于一款可靠的、稳定的和成熟的框架来构建项目,但又不想为此受到约束。Web发展迅速——新技术产生,旧的那套方法很快跟不上潮流。如此形势之下,我们准备仔细深入的比较这三个框架。
2 框架概览
今天我们提到的所有框架有许多共同点:都是开源的,遵从 MIT 协议,并且都尝试通过 MV* 模式来解决开发单页面应用的问题。它们都有类似的概念:视图,事件,数据模型和路由。我们先简单回顾一下有关的历史和背景知识,然后再展开深入比较这三款框架。
AngularJS 诞生于 2009 年,当时作为一个大型商业产品的一部分叫做 GetAngular。不久之后,Misko Hevery,GetAngular 项目创建者之一,花了仅仅三周时间,用 GetAngular 重写了一个曾经耗时 6 个月才完成的,有 17K 行代码的页面应用,并将代码削减到 1,000 行左右,于是成功的说服了谷歌开始赞助该项目,并将其开源,也就是我们今天看到 AngularJS 。Angular 的特点是拥有双向数据绑定,依赖注入,易于测试的编码风格,以及通过使用自定义指令可以简单的扩展 HTML。
Backbone.js 是一个轻量级的 MVC 框架。诞生于 2010 年,它作为那种笨重全功能的 MVC 框架,比如说 ExtJS, 的一个代替品,迅速流行开来。 很多服务都使用了它,比如 Pinterest, Flixster, AirBNB 等等。
Ember 则要回溯到 2007 年,最开始是以 SproutCore MVC 框架展现在世人面前,由 SproutIt 开发,后来是 Apple,再后来到 2011 的时候,jQuery 和 Ruby on Rails 的核心贡献者 Yehuda Katz 参与了进来。有名的 Ember 用户包括了 Yahoo!, Groupon, 和 ZenDesk。
3 社区
社区是在选择一个框架的时候,要考虑的最重要因素之一。大社区意味着更多的答案,更多的第三方模块,更多的 YouTube 教程…你,明白了么。我做了个统计,截止 2014年8月16日,Angular 是绝对的王者,作为 GitHub 上第六大星级项目,在 StackOverflow 上的提问比 Ember 和 Backbone 加起来还多,你自己看:
Github 的点赞星数 | 27.2k | 18.8k | 11k |
第三方模块 | 800 ngmodules | 236 backplugs | 21 emberaddons |
栈爆网的提问件数 | 49.5k | 15.9k | 11.2k |
YouTube 件数 | ~75k | ~16k | ~6k |
GitHub 贡献者 | 928 | 230 | 393 |
Chrome 插件用户 | 150k | 7k | 38.3k |
所有这些指标,显示的仅仅是每个框架的当前状态。看看哪个框架增长最快也是很有趣的,你有福了,通过谷人希的趋势跟踪,你可以得到以下答案:
http://www.google.com/trends/explore?hl=en-US#q=ember.js,+angularjs,+backbone.js&cmpt=q
4 框架大小
页面的加载时间是你网站成功的关键。当涉及浏览速度的时候,用户没太多耐性 — 所以很多情况下你要尽可能让你的应用跑得越快越好。使用框架,有两个因素会对应用的加载时间产生影响: 框架的大小和它启动的时间。
Javascript 资源通常都会被经过精简和压缩,所以我们来比较一下压缩版。但是只看框架的大小肯定不够的。Backbone.js,尽管是最小的 (只有 6.5kb),但是必须 Underscore.js (5kb) 和 jQuery (32kb) 或者 Zepto (9.1kb),而且你还有可能还有一些第三方插件要加进来。
AngularJS 1.2.22 | 39.5kb | 39.5kb |
Backbone.js 1.1.2 | 6.5kb | 43.5kb (jQuery + Underscore) 20.6kb (Zepto + Underscore) |
Ember.js 1.6.1 | 90kb |
136.2kb (jQuery + Handlebars)
|
5 模板
Angular 和 Ember 都有模板引擎。而另一方面 Backbone,把这个选择权留给了你。感受模板引擎的异同最好的办法就是上点代码,好的,我们开始。我们将演示把一个列表转换成 HTML 列表的例子。
5.1 AngularJS
Angular 的模板引擎仅仅是在 HTML 上使用绑定表达式。而绑定表达式又仅仅是两层大括号而已:
1
2
3
4
5
6
|
< ul >
< li ng-repeat = "framework in frameworks" title = "{{framework.description}}" >
{{framework.name}}
</ li >
</ ul >
|
5.2 Backbone.js
Backbone 可以和许多第三方模板引擎集成,默认的选择是 Underscore 模板。 因为 Underscore 是 Backbone 的依赖项,你已经把它加载到页面中了,你无须添加任何额外的依赖关系就可以使用它的模板引擎。不爽的是,Underscore 的模板引擎非常初级,你通常不得不把 javascript 混进去,比如说:
1
2
3
4
5
6
7
|
< ul >
<% _.each(frameworks, function(framework) { %>
< li title="<%- framework.description %>">
<%- framework.name %>
</ li >
<% }); %>
</ ul >
|
5.3 Ember.js
Ember 当前使用的是 Handlebars 模板引擎,热门的 Mustache 模板引擎的扩展。现在还有一个新的叫做 HTMLBars 的 Handlebars 变种可用。Handlebars 不关心 DOM – 它所做的仅仅是做一个简单的字符串变换。而 HTMLBars 则可以处理 DOM,所有的变量转换都有上下文感知。由于 HTMLBars 还没有流行,我们还是来看看用 Handlebars 方式打印列表方式:
1
2
3
4
5
6
7
|
< ul >
{{#each frameworks}}
< li {{bind-attr title = description }}>
{{name}}
</ li >
{{/each}}
</ ul >
|
6 AngularJS
6.1 好处
Angular 为 Web 开发带来了许多创新的概念。双向数据绑定节省了大量的样板代码。比如下面的 jQuery 代码片段:
1
2
3
|
$( '#greet-form input.user-name' ).on( 'value' , function () {
$( '#greet-form div.user-name' ).text( 'Hello ' + this .val() + '!' );
}); |
由于 Angular 的双向绑定,你根本就不需要自己写代码。只需要在 HTML 模板里面声明绑定就可以了:
1
2
|
< input ng-model = "user.name" type = "text" />
Hello {{user.name}}! |
Promises 在 Angular 中扮演了一个重要的角色。Javascript 是单线程,基于事件循环的语言,这意味着许多操作(比如说网络通讯)都是以异步方式进行的。异步的 Javascript 代码会很快的就陷入了长长的嵌套回调,也就是臭名昭著的 “Pyramid Code” 或者叫做 “Callback Hell”。
相对比另外两个,Angular 不光有着更大的社区,更多的在线文档,而且还有谷歌在背后的推广和支持。所以,核心团队还在不断增长,产出更多的创新,以及改善开发生产效率的工具,比如: Protractor, Batarang, ngmin 和 Zone.js,一抓一大把。而且,开发团队还向用户征集需求。比如说,Angular 2.0 的所有设计文档你都可以从 这里 找到,任何人都可以直接给设计文档提建议。
Angular 帮助你把构建应用的程序块划分为下面这几种类型:控制器(Controller),指令(Directive),工厂(Factory),过滤器(Filter),服务(Service)和视图(View) (就是模板)。它们被组织为模块形式,之后可以被另一个引用。每种类型有不同的作用。视图处理 UI,控制器处理 UI 背后的逻辑,服务用来处理和后台的通信,并且将共通的有关联的功能组件结合在一起,而指令通过定义新的元素,属性和行为,很容易的构造可重用的组件,以及HTML扩展。
自动脏值检查意味着,你不需要用 getter 和 setter 去访问数据模型 — 你可以修改任意范围(scope)的任意属性,然后 angular 会自动检测到变化,通知该属性的所有观察者(watcher)。
“Angular 的初衷是写出可测试的代码。” 单元测试指南中的这句话,包含了太多意思 – Angular 确实很注重分离,单元隔离,为 $http 和 $timeout 等基础内置服务提供了现成的,强大的 mock。
6.2 痛处
Angular 常被人诟病的是指令那复杂的 API。 Transclusion,尤为突出,这个概念,把许多开发者搞得一头雾水,让你满脑子各种概念,比如编译函数(compiling function),linking,函数的预处理/后处理(pre/post linking functions),各种 scope 类型 (transclusion/isolate/child scope),还有各种配置设置,需要相当的时间来掌握。
Angular 中的 scope 层次结构使用的是 Prototypal 继承,这又是一个为了迎合从面向对象语言,比如 Java 和 C#,过来的开发人员而提出的概念。不理解 scope 导致许多开发者开发很受伤 (比如说: 这, 这 还有这)。
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 >
|
许多情况下,指令名称的拼写错误,或者调用未定义 scope 方法,都会被忽略,并且很难被发现,特别是当你把复杂的指令 API 和上面提到的 scope 的继承弄到一起的时候。我见过有些苦逼花费一大堆时间抓耳挠腮想找出为什么 scope 中的一个绑定的事件没被回调函数触发,最后居然是因为用了驼峰(camelCase)命名,而没有用连字符分隔(hyphen-separated)拼写属性的名称(比如说这).
最后,是 Angular 的循环系统中, 要注意那“神奇的”脏值检查,它经常会给开发者惊喜。在非-Angular上下文运行的时候,很容易忘记调用 $digest() (例子)。也就是说,你必须非常小心,不要触发缓慢的观察者事件或者无限循环(例子: 这,这 还有 这)。通常,对于一页上有大量的交互元素的页面,Angular会变得非常慢。有个很好的约定是,不要在同一页面上放超过 2,000 个活动的绑定。
7 Backbone.js
7.1 好处
Backbone 轻量,快速,内存占用小。学习曲线也是很平缓的,只需要几个简单的概念就能掌握 (模型/集合, 视图, 路由)。它有很棒的文档,代码简单,注释详细,并且这里还有一个注释版源码,用来解释框架的工作细节。实际上你可以通读整个框架的源码,用不到一个小时去熟悉它。
因为又小又基础,你可以基于 Backbone 打造你自己的框架。一些基于 Backbone 的第三方框架的例子有 Aura, Backbone UI, Chaplin, Geppetto, Marionette, LayoutManager, Thorax, Vertebrae。用 Angular 和 Ember 你一般都要用框架作者给你的选择,有些可能会不适合你的工程需求和个人风格。Angular 2.0 承诺改变这种情况,通过构建更小的独立模块,使你可以选择和组合它们。不过我们还没看到它什么时候才能交付。
7.2 痛处
Backbone 没有提供基本构造。它仅仅是提供了一些基础工具让你去创建,让你去决定如何构造应用,这有太多空要填了。比如说内存管理需要小心的处理。由于缺失视图生命周期管理,这会使得路由/状态的变化,很容易导致内存泄漏,除非你可以很清楚的处理一切。
诚然,Backbone本身不提供的功能,可以由第三方插件来填补,这也就意味着,在你创建应用的时候,有很多选择,因为一个功能通常有许多个备选插件。比如说,内嵌模型可以由下面这些插件提供:Backbone.DocumentModel, BackBone.NestedTypes, Backbone.Schema, Backbone-Nested, backbone-nestify, 这还是其中的一小部分。决定哪个更适合你的工程是需要调查的,这需要时间 — 而使用框架的一个主要目的是节省你的时间。
Backbone 缺乏对双向数据绑定的支持,意思也就是说,你必须编写大量的样板来处理模型更新之后触发的视图更新。看看上面给出的例子,想想看 Angular.js 的双向数据绑定削减了多少样板代码。
Backbone 中的视图是直接操作 DOM 的,这让它们非常难做单元测试,也就更脆弱,更难以重用。常见的例子就是用 CSS 选择器查找 DOM 元素,改变CSS 类名,添加有同样类名的新元素或者把同样的 DOM 树包装到另一个元素,都会打乱你的 CSS 选择器以及应用的渲染。
8 Ember.js
8.1 好处
Ember.js 主张约定优于配置。也就是说,无需编写大量的样板代码,Ember 会自动推导出许多配置本身,比如在定义一个路由资源的时候,可以自动判定路由的名称和控制器。Ember 甚至会在你没定义控制器的时候,自动为你的资源生成一个。
Ember 包含了一个优秀的路由和一个可选的数据层,叫做 ember data。和其他两个框架不同,它们的数据层非常小(Backbone 的集合/模型和 Angular 的 $resource),Ember 有一个拿来即用的非常成熟的数据模块,只需要简单的配置,就可以和后台的 Ruby-on-Rails 或者其它的 RESTful JSON API 集成得非常好。它还可以通过设置 fixtures来支持面向 mock API 开发以及测试。
性能是 Ember.js 设计的主要目标。诸如 The Run Loop 这个概念,可以确保数据的变化只导致单个 DOM 更新,即使同一块数据进行了多次更新也是一样,还有计算属性的缓存, 还有可以在编译时或在服务端对 HandleBars 模板进行预编译的能力,都可以帮助你保证应用的负载,保证它跑得足够快。
8.2 痛处
Ember 的 API 在它稳定版出来之前变化太大了。这导致了有大量的过期内容和不能再运行的例子,这会新进开发者开始使用这个框架时感到非常困惑。看看 Ember Data 变更日志,你就会知道我说的是什么意思了。这里有太多的大变更了,这就让许多栈爆网的回答和编码例子变得毫无意义了(比如说这)
Handlebars 为了保持模板和数据模型一致,用了太多的 <script> 标签来污染 DOM 了。这会在迁移到 HTMLBars 的时候变得毫无意义,但到那时,你的 DOM 树上全都是 <script> 标签,会几乎无法辨认哪些是你的代码了。还有最糟糕的部分 – 这会打乱你的CSS样式,或者影响和其他框架的集成,比如说 jQuery UI 的排序。
9 总结
我们已经看过三个框架的长处短处。Ember 的综合能力,其中的 MVC 结构,对于那些曾经在 Ruby, Python, Java, C# 或者其他面向对象语言中有过 MVC 编程背景知识的程序员来说非常有意义。Ember 还带来了媲美桌面应用的性能,而且还因为约定优于配置的原因,可以让你节省非常多样板代码。
Backbone 崇尚极简主义。它够小,够快,够简单,但是提供了你构建应用所需要的最小集(许多情况下,甚至要小于最小集)。
Angular 的扩展 HTML 的创新方法,对于骨子里是 web 开发者的人来说非常有意义。它有强大的社区,有谷歌在后面支持它,它不断沉淀和成长。它不但适用于快速原型开发,还适用于大型生产应用。
相关推荐
与JavaScript框架/库相关的书籍的集合,包括(但不限于):React.js,Angular / AngularJS,Node.js,Vue.js,Backbone.js,Ember.js,Knockout.js,Dojo.js, D3.js,Three.js,Leaflet.js,Google Maps API,Bing ...
本文对JavaScriptMVC框架Angular、Backbone、CanJS和Ember作了比较,供大家参考。选择JavaScriptMVC框架很难。一方面要考虑的因素非常多,另一方面这种框架也非常多,而要从中选择一个合适的,还真得费一番心思。想...
Backbone,Ember,AngularJS ...不断出现新的稳定解决方案,但是您如何决定在众多选择中使用哪种呢? 为了帮助解决此问题,我们创建了TodoMVC-一个项目,该项目提供了在当今大多数流行JavaScript MV *框架中使用MV...
基于Andorid的电子杂志应用系统设计实现源码,主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者,也可作为课程设计、期末大作业。
《网络传播技术与实务》第10章-握在手中的网络——移动通信与无线网络技术.ppt
内容概要:本文详细介绍了如何利用COMSOL Multiphysics进行螺孔缺陷检测的电磁传感器建模与仿真。首先,通过参数化建模创建带有螺纹孔的金属块,并在螺纹根部引入微小V型槽作为缺陷。接着,设置了材料属性,特别是针对缺陷区域的非线性磁导率变化进行了细致调整。然后,配置了物理场环境,包括激活AC/DC模块的电流和磁场接口,设定合适的边界条件和激励电流频率范围。网格划分采用了自适应策略,确保缺陷区域的高分辨率。求解器设置为频域稳态求解,并通过后处理展示了缺陷处的电磁场分布特性,如电场强度突变和涡流密度矢量图。此外,还讨论了实际应用中的注意事项和技术细节,如表面粗糙度的影响、频率选择以及结果验证方法。 适合人群:从事无损检测、电磁仿真研究的技术人员,以及有一定COMSOL使用经验的研发人员。 使用场景及目标:适用于工业生产中对螺孔内部微小裂纹的精确检测,旨在提高产品质量和安全性,防止因隐蔽缺陷导致的重大事故发生。 其他说明:文中提供了大量具体的MATLAB和COMSOL命令代码片段,帮助读者快速复现实验步骤并深入理解每个环节的设计意图。同时强调了实际操作中的常见陷阱及其应对措施,使读者能够更好地掌握这一复杂技术的应用要点。
【ABB机器人】-IRB1600机器人维护信息.pdf
《计算机网络基础》第2章-数据通信.ppt
ruby-3.4.3-windows-x64安装包
内容概要:本文详细探讨了声子晶体中声表面波的光学特性。声子晶体作为一种人工复合材料,能够对弹性波(即声子)进行独特调控。文中介绍了声子晶体的基础原理,包括其周期性结构产生的带隙效应,以及声表面波与其相互作用时发生的折射、反射等光学类比现象。此外,还讨论了声子晶体在传感器、通信等领域的潜在应用,特别是在构建声表面波滤波器方面的重要意义。文章通过具体的Python和MATLAB代码展示了如何模拟声子晶体的结构和声表面波的传播特性,并解释了带隙形成的物理机制。同时,强调了几何对称性和材料参数对声波调控的影响,提出了优化仿真的方法和技术。 适合人群:从事材料科学、物理学及相关领域的研究人员,尤其是对声子晶体和声表面波感兴趣的学者和技术人员。 使用场景及目标:适用于希望深入了解声子晶体声表面波光学特性的科研工作者,旨在帮助他们掌握相关理论知识和数值模拟技能,从而应用于新型声学器件的设计和开发。 其他说明:文章提供了多个实例和代码片段,便于读者理解和实践。同时,指出了实验中常见的挑战和解决方案,如材料损耗建模、缺陷引入等,有助于提高仿真的准确性。
内容概要:本文详细介绍了电梯柔性提升系统横向-纵向耦合动力学建模与仿真的全过程。首先,基于能量法和Hamilton原理,建立了考虑平衡绳影响的横向-纵向耦合振动控制方程,并使用Galerkin法将其离散化为常微分方程。随后,通过Python代码实现并仿真了高速电梯参数下的振动响应,分析了平衡绳和导轨不平顺对系统振动的具体影响。研究结果显示,平衡绳能有效抑制横向振动(上行降低20%,下行降低5%),但对纵向振动有一定影响;而导轨不平顺会导致横向振动突变,对纵向振动影响较小。最终,通过数值仿真验证了论文中的主要结论,为电梯振动控制提供了理论依据和工程建议。 适合人群:具备一定力学和编程基础,对机械振动、电梯工程感兴趣的科研人员和工程师。 使用场景及目标:①理解电梯柔性提升系统的振动特性及其影响因素;②掌握基于能量法和Hamilton原理建立复杂系统动力学模型的方法;③学习如何使用Galerkin法离散化偏微分方程并进行数值仿真;④为电梯系统的设计优化提供参考,特别是平衡绳和导轨安装精度的控制。 其他说明:本文不仅提供了理论分析,还通过详细的Python代码展示了完整的仿真流程,便于读者动手实践。研究结果强调了平衡绳和导轨不平顺对电梯振动的重要影响,提出了具体的设计建议,如安装平衡绳以抑制横向振动、严格控制导轨安装精度等。此外,文中还验证了钢丝绳的安全系数,确保仿真条件符合工程实际。
《网络规划与设计教程》第二章:网络互联技术概述
内容概要:本文详细介绍了单相Boost功率因数校正(PFC)电路及其双闭环控制仿真模型的设计与实现。首先阐述了单相PFC电路的基础概念,解释了Boost电路的工作原理,即通过控制开关管的导通与关断来提升输入电压并实现功率因数校正。接着讨论了在网侧220V/50Hz条件下,如何利用电压外环电流内环双闭环控制系统确保输出电压稳定性和高功率因数。文中还提供了基于Python和MATLAB/Simulink的具体代码示例,展示了如何模拟Boost电路的行为以及构建双闭环控制策略。此外,针对可能出现的问题如启动时电压超调、电流波形畸变等提出了相应的解决方案和技术细节。 适合人群:从事电力电子系统设计的研究人员、工程师和技术爱好者,尤其是那些希望深入了解PFC技术和掌握相关仿真技能的人群。 使用场景及目标:适用于需要优化电力电子设备性能的应用场合,例如工业自动化、家用电器等领域。通过学习本文的内容,读者可以更好地理解和应用单相Boost PFC电路及其双闭环控制机制,从而提高产品的效率和可靠性。 其他说明:文中不仅包含了理论性的介绍,还有大量的实战经验和技巧分享,帮助读者更快地掌握这一复杂的技术领域。同时强调了在实际工程实践中应注意的关键点,如参数选择、波形调试等方面的知识。
源文件
《计算机程序设计(C语言)》第7章-第6节-变量的存储类别.ppt
《计算机程序设计(C语言)》第4章-第2节-if语句.ppt
内容概要:本文详细介绍了基于FPGA的串口通信模块的设计与实现,涵盖波特率生成、发送模块的状态机设计以及接收模块的抗干扰措施。特别针对Xilinx和Altera两种主流FPGA平台进行了优化,确保代码可以在不同平台上无缝运行。文中不仅提供了完整的Verilog代码片段,还分享了许多实用的调试技巧,如波特率分频系数的精确计算、采样点的选择、跨平台复位信号的处理等。此外,作者还强调了硬件连接和约束文件配置的重要性,为初学者提供了一套完整的解决方案。 适合人群:对FPGA有一定了解,希望深入掌握串口通信机制的工程师和技术爱好者。 使用场景及目标:适用于需要在FPGA平台上实现可靠串口通信的应用场合,如嵌入式系统开发、工业自动化控制等领域。通过本教程的学习,读者能够独立完成串口通信模块的设计与调试,掌握关键技术和常见问题的解决方法。 其他说明:文章附带了经过验证的实际案例和代码,便于读者进行实践操作。同时提醒开发者注意电压匹配等问题,以防止硬件损坏。
内容概要:本文详细介绍了使用FX3U PLC配合FX3U-485BD通信板对西门子V20、台达VFD-M和三菱E700三种变频器进行通信控制的方法。涵盖了硬件配置、接线方法、参数设置、程序编写等方面的内容。文中不仅提供了具体的接线步骤,还针对不同品牌的变频器给出了详细的参数配置指导,并附有简单的梯形图程序示例,帮助读者理解和实施变频器的精确控制。此外,文章还分享了一些实用的经验技巧,如解决通信不稳定等问题的方法。 适合人群:从事工业自动化领域的工程师和技术人员,特别是那些需要集成多个品牌变频器控制系统的人群。 使用场景及目标:适用于需要通过PLC对多种品牌变频器进行集中控制的应用场合,如工厂生产线、自动化设备等。主要目标是提高系统的灵活性和可靠性,减少维护成本,提升生产效率。 其他说明:文中提供的信息和案例有助于读者快速掌握PLC与变频器之间的通信控制技术,同时也强调了实际操作过程中需要注意的一些细节问题,如接线规范、参数匹配等。
《组态软件控制技术》第7章--报表系统.ppt
《网页制作基础教程(Dreamweaver-CS6版)》第6章-CSS与行为.pptx