说三道四技术文摘-感悟人生的经典句子
说三道四 > 文档快照

JavaScript MVC框架PK:Angular、Backbone、CanJS与Ember

HTML文档下载 WORD文档下载 PDF文档下载
选择JavaScript MVC框架很难。一方面要考虑的因素非常多,另一方面这种框架也非常多,而要从中选择一个合适的,还真得费一番心思。本文对JavaScript MVC框架Angular、Backbone、CanJS和Ember作了比较,供大家参考。

选择JavaScript MVC框架很难。一方面要考虑的因素非常多,另一方面这种框架也非常多,而要从中选择一个合适的,还真得费一番心思。想知道有哪些JavaScript MVC框架可以选择?看看 TodoMVC吧。

我用过其中4个框架:AngularBackboneCanJSEmber。因此,可以对它们作一比较,供大家参考。本文会涉及框架选型过程中需要考虑的一系列因素,我们逐一讨论。


每一个因素我们都会按照1到5分来打分,1分代表很差,5分代表很好。我会尽量保持客观,但也不敢保证真能“一碗水端平”,毕竟这些分数都是根据我个人经验给出的。

功能

作为构建应用的基础,框架必须具备一些重要的功能。比如,视图绑定、双向绑定、筛选、可计算属性(computed property)、脏属性(dirty attribute)、表单验证,等等。还能罗列出一大堆来。下面比较了一些我认为MVC框架中比较重要的功能:

功能 Angular Backbone CanJS Ember
可观察对象(observable)
路由(routing)
视图绑定(view binding)
双向绑定(two way binding) - -
部分视图(partial view) -
筛选列表视图(filtered list view)
-
  • 可观察对象:可以被监听是否发生变化的对象。
  • 路由:把变化通过浏览器URL的参数反映出来,并监听这些变化以便执行相应的操作。
  • 视图绑定:在视图中使用可观察对象,让视图随着可观察对象的变化而自动刷新。
  • 双向绑定:让视图也能把变化(如表单输入)自动推送到可观察对象。
  • 部分视图:包含其他视图的视图。
  • 筛选列表视图:用于显示根据某些条件筛选出来的对象的视图。
得分

根据上述功能,我打出的分数如下:

有一点必须指出,使用Backbone也能实现上述大多数功能,只是手工编码量挺大的,有时候还要借助插件。这里的打分只考虑了框架核心是否支持某一功能。

Angular Backbone CanJS Ember
5 2 4 5

灵活性

enter image description here

有时候,框架配合一些现成的插件和库来使用,可能要比使用框架原生同类功能效果更好,而这种插件和库几乎遍地都是(不下数百个),又各有特色。因此,能够把这些库和插件整合到MVC框架中也非常重要。

Backbone是其中最灵活的一个框架,因为它的约定和主张最少。使用Backbone需要你自己作出很多决定。

CanJS的灵活性与Backbone差不多,把它跟别的库整合起来很容易。在CanJS中甚至可以更换其他渲染引擎,我在CanJS中就一直用 Rivets,没有任何问题。不过,我还是推荐框架自带的组件。

Ember和Angular也都还算灵活,可有时候你会发现,就算不喜欢它们的某些实现方法,你也只能默默忍受。 这是在选择Ember或Angular时必须考虑的。

得分

Angular Backbone CanJS Ember
3 5 4 3

上手难度

enter image description here

Angular

Angular一开始会让人大呼过瘾,因为可以利用它干好多意想不到的事,比如双向绑定,而且学习难度不高。乍一看让人觉得很简单。可是,进了门之后,你会发现后面的路还很长。应该说这个框架比较复杂,而且有不少标新立异之处。想看着它的文档上手并不现实,因为Angular制造的概念很多,而文档中的例子又很少。

Backbone

Backbone的基本概念非常容易理解。但很快你会发现它对怎么更好地组织代码并没有太多主张。为此,你得观摩或阅读一些教程,才能知道在Backbone中怎么编码最好。而且,你会发现在有了Backbone的基础上,还得再找一个库(比如 Marionette或 Thorax)跟它配合才能得心应手。正因为如此,我不认为Backbone是个容易上手的框架。

CanJS

CanJS相对而言是这里面最容易上手的。看看它只有一页的网站( http://canjs.com/),基本上就知道怎么做效率最高了。当然,还得找其他一些资料看,不过我个人很少有这种需求(比如看其他教程、上论坛或讨论组提问呀什么的)。

Ember

Ember的上手难度与Angular有一拼,我认为学习Ember比学习Angular总体上容易一些,但它要求你一开始就要先搞懂一批基本概念。而Angular呢,一开始不需要这么费劲也能做一些让人兴奋不已的事儿。Ember缺少这种前期兴奋点。

得分

Angular Backbone CanJS Ember
2 4 5 3

开发效率

enter image description here

比较全面地掌握了一个框架之后,重点就转移到了产出上。什么意思呢?约定啊、戏法啊,反正要尽可能快。

Angular

熟悉Angular之后,你的效率会非常高,这一点毋庸置疑。之所以我没给它打最高分,主要因为我觉得Ember的开发效率似乎更胜一筹。

Backbone

Backbone要求你写很多样板(boilerplate )代码,而我认为这完全没必要。要我说,这是直接影响效率的一个因素。

CanJS

CanJS的开发效率属于不快不慢的那种。不过,考虑到学习难度很低,因此适合早投入早产出的项目。

Ember

Ember的开发效率首屈一指。它有很多强制性约束,可以帮你自动完成的事很多。而开发人员要做的,就是学习和应用这些约定,Ember会替你处理到位。

得分

Angular Backbone CanJS Ember
4 2 4 5

社区支持

enter image description here

能轻易找到参考资料和专家帮忙吗?

Backbone的社区很大,这是人所共知的事实。关于Backbone的教程也几乎汗牛充栋,StackOverflow和IRC社区非常热闹。

Angular和Ember社区也相当大,教程什么的同样不少,StackOverflow和IRC也很热闹,但还是比不上Backbone。

CanJS社区呢,相对小一些,好在社区成员比较活跃,乐于助人。我倒没发现CanJS社区规模小有什么负面影响。

得分

AngularBackboneCanJSEmber
4534

生态系统

enter image description here

有没有插件或库构成的生态系统?

说起插件和库,Backbone的选择是最多的,可用插件俯拾皆是,这一点让其他框架都望尘莫及。Angular的生态圈加上Angular UI还是很令人瞩目的。我觉得Ember的下游生态虽然欠发达,但Ember本身很受欢迎, 所以前景十分乐观。CanJS的下游支脉比较少见。

得分

AngularBackboneCanJSEmber
4524

文件大小

enter image description here

这个因素有时候很重要,特别是对于移动开发项目。

自身大小(无依赖,未压缩)

AngularBackboneCanJSEmber
80KB18KB33KB141KB

Backbone最小,这一点也是最为人们所津津乐道的。但不能只看库本身的体积。

包含依赖的大小

80KB的Angular是唯一不需要其他库就能使用的。其他三个框架则都对其他库有依赖。

Backbone至少需要Underscore和Zepto。虽然在Underscore中可以使用最小的模板来渲染视图,但多数情况下,还要借助更好的模板引擎,比如Mustache。这样它就增肥到了61KB。

CanJS至少需要Zepto,因此会达到57KB。

Ember需要jQuery和Handlebars,总共是269KB。

AngularBackboneCanJSEmber
80KB61KB57KB269KB
得分

AngularBackboneCanJSEmber
4552
性能

enter image description here

我不认为性能是选择框架的关键因素,因为这些框架在预期应用领域中的性能都不差。当然啦,具体还得看你做什么项目。要是想开发游戏,那性能是个重要因素。

虽然我见过,也亲自做过一些性能对比(比如这个测试),但我并不完全相信测试结果。很难说这种测试的方法和结果与实际项目吻合。

不过,据我所见所闻,CanJS的性能是最高的,而且在视图绑定上格外突出。相对来说,我觉得Angular性能稍差,因为它执行对象的脏检查(dirty checking),这一点就拖了它的后腿了。参见这里。

得分

AngularBackboneCanJSEmber
3454
成熟度

enter image description here

这个框架成熟吗,经过实际检验了吗,有多少网站在用它呢?

使用Backbone的网站不计其数。最近两年,它的核心代码没怎么改过,这是成熟的一个重要标志。

Ember已经不是新框架了,但它的重大变更还是经常有,前几月刚刚稳定下来。因此,目前还不能说它是个成熟的框架。

Angular似乎比Ember更稳定,验证的示例也更多,但不能与Backbone相提并论。

CanJS好像还未经任何验证,因为不知道有什么网站在使用它。不过,CanJS其实也没有看起来那么弱不经风,它可是从JavaScriptMVC精简来的。JavaScriptMVC是2008年就出现的一个库,因此会有很多智慧结晶留传下来。

得分

AngularBackboneCanJSEmber
4543

内存泄漏隐患

如果你想开发每次打开都得运行很长时间的单页应用,这是必须得考虑的问题。你当然不希望自己的应用导致内存泄漏,这个问题非常现实。不幸的是,内存泄露很容易发生,而自己编写的DOM事件监听器则是重灾区。

只要你守规矩,Angular、CanJS和Ember能把这个问题帮你解决好。Backbone则不然,它需要你自己手工来卸载。

得分

AngularBackboneCanJSEmber
5355

这恐怕是选择框架时最重要的一个因素了。

本项没办法打分。

  • 你喜欢声明式HTML吗?-> Angular
  • 你喜欢使用模板引擎吗?-> Backbone、CanJS或Ember
  • 你喜欢固执已见的框架吗?-> Ember
  • 你希望框架与最初的SmallTalk MVC模式完全吻合吗?-> 没有完全吻合的,或许CanJS最接近
  • 你希望使用目前看来很酷的框架吗?-> Ember、Angular

算总分

好啦,把各框架所得分数做个汇总吧。别忘了这只是我个人看法,如果你觉得哪一项打分有失偏颇,请务必告诉我。

(此处只是一个静态图表,单击可以打开) 

如果每一个因素的权重都一样,那么这几个框架确实难分高下。因此,我觉得最终决定很大程度上还是取决于你的个人偏好,或者必须要给每个因素赋予不同的权重才行。

英文:Sebastian's Blog

译文:图灵社区


如何甄别具有软实力的IT应聘者? 避免关注底层硬件,Nvidia将机器学习与GPU绑定 盘点MIT Demo Day上4个最有前途的创业点子 IDF 2014第一天纵览:智能设备唱主角 时尚化才是可穿戴的未来 ASP.NET之父Scott Guthrie:借技术之力铺平未来之路 两年测试,NSA或将让其数据中心洗上油浴 【云先锋】数云:另类淘宝创业,瞄准背后百万卖家的数据挖掘 Xcode 6 GM、6.1齐出,Swift终迎1.0版! 我眼中的Devops——倍道而进! 英特尔物联网世界:提供开发工具包,实现万物互联 三十功名尘与土——我的程序员生涯自白 触摸未来:为什么说AR是未来最重要的人机界面? 科普:谈云计算中间件理念 能准确“猜透”玩家心理,深度学习让游戏更智能 阿里过程改进专家:看板核心在于拉动式管理过程+数据化支持改进 英特尔Edison全面上市,专为小型可穿戴设备设计 APM最佳实践:Web 2.0和AJAX四大优化战略 开放•创新•共赢 2014华为开发者联盟沙龙即将开幕 排名前十的SQL和NoSQL数据库 干货议题,中国互联网安全大会免费门票等你来! 【云先锋】红象云腾:Hadoop将和高铁一样改变我们的生活 IDF 2014上开发者最应关注的三件事之:原生应用兼容性篇 《近匠》WRTnode创始人罗未:OpenWrt,下一个时代的Android AMD爆新一代架构,代号Zen! 【问底】严澜:数据挖掘入门——分词 顺丰集团IT副总裁徐庆强:信息化技术支撑高质量服务 【CTO俱乐部走进雅虎北京全球研发中心】活动图文实录 病毒式传播到商业价值,Docker开创以开发者为主导的商业模式 一周消息树: Windows 9系统截图大量曝光,一起来看看它长什么样! 腾讯李朝晖:不移动非互联,投资关注四大领域 【问底】Yao Yu:谈Twitter的百TB级Redis缓存实践 有无VB关于库管的源代码,给我一份,anweiauto@163.net 湖北考高程的朋友看过来!!!! 什么是递归算法,它又如何实现?(有例子最好!) 如何将数组中所有的值为0的项去掉? 请问:用SQL Select数据源建立一个数据窗口,该窗口包含两的表的内容,两个表的字段已通过主键(ID)进行了连接,可是在运行过程中能检索数据,但是却不能进行增加、删除、修改的操作,不知为什么? 在c++ builder 延时5秒怎么做到 类似与c++的sleep()函数功能 请教一下:站点服务器上的服务扩咱展不兼容怎么解决啊,我要疯了。 关于pb调chm格式文件的问题?? to killerdanny 急需解答 关于ActiveX DLL的问题,希望高手帮助 关于文件操作的问题 关于installshield更改所打包的应用程序的ICON的问题!急!!! 请问谁那里有页面规范、代码规范、SQL规范?重金求购 欲寻求项目来作(报酬多少无所谓)!!! 请问各位大虾,在DELPHI中EXE文件的调用方法? 菜鸟问题:忘了如何定义几位的变量?谁能告诉我,谢谢! 如果我要在window.showModalDialog 打开的页面中返回一个值,或者在被打开的页面中改变打开打开者中的某属性该怎么做? 关于木马程序的设计! 新手的问题(关于成员函数使用的位置???) 谁知道那里有ado教程 请高手介绍点用perl操纵mysql的经验和方法,不胜感激 about BCB 的数据库开发问题 请大家详细说一下SQL Select数据源的具体使用方法,书上说的太简单了,用SQL Select数据源建立的数据窗口为什么不能进行增加、删除操作,还不让修改,愁啊! 诸位:这个显示隐藏工具栏状态栏的代码有三处错,可我不知为什么???以指出 怎么将ACCESS2000表中的内容导入到SQLSERVER数据库中 我想把LOCAL声明改为.data? 可不行,为什么? .net似乎对组件编程的支持很强?就是说,似乎省区了很多繁琐的细节? 各位有人可以告诉我怎么实现SMTP用户验证吗? 大家有用这个软件吗?有的话请写下你使用的感觉,有什么不足? CoolSoft HTML Optimizer 谁那里有页面开发规范,重金求购 帮助中HTML文件的链接问题!!! asp.net是否可以用任何一种vs.net语言? 请教---------一个函数返回指针值的问题!!!! 如何可以筛选出被修改过的数据记录。。。。。。 如何在广域网上实现SOCKET通讯,与局域网有什么不同? invocation在Java中怎么翻译啊? oracle中增量导数据的问题!! 过多的异常捕捉会影响程序性能吗? 二个form时怎样用request来收取数据? 在sybase里健好的表如何从新修改? 一个小问题,这个变量是什么类型的??? 使用通讯控件的疑惑 怎样实现在文本文件中修改某一行的其中字符串 Nokia MobileSet中如何让手机识别中文? 注册表坏了怎么办? 大哥们,能否告诉小弟,在 ms sql server2000中如何修改 sa 用户的口令 我的超星不能用了!!! 十万火急:PDF文件修改 大哥们,能否告诉小弟,在 ms sql server2000中如何修改 sa 用户的口令.. 作为初学者,每天的问题太多了?帮我看一下下面的小问题 直角三角形斜边公式hl速度 向量安某个向量平移是什么意思?怎么l个平移法?公式?例己知A(3,7),B(5,2),将向量AB按向量a=(1,2)平移后所得向量的坐标是?什么叫按某个向量平移啊?怎么个移法?根据哪一点哪条路径移?帮我描述一 关于图形在格点上平移的小学数学题,越多越好 初中物理实验导线有多粗? 向量平移怎么向量平移已知直线l:x-2y+m=0按向量a=(2,-3)平移后得到的直线l1与圆(x-2)²+(y-1)²=5相切,m值? 导线 电源 开关 用电器的作用分别是什么 初中物理创新实验关于声、光或物态变化的 要创新的 把一个图像按某向量平移是什么意思啊 ?什么叫按某向量平移?怎么按某向量平移? 在电源、用电器、导线、开关中.提供电能的是( ) 消耗电能的是( ) .而开关的作用是( ) 全部…哪里有? 若锌和镁的质量为4.8克,与100克稀硫酸恰好完全反应,则该稀硫酸的质量分数可能为多少? 1.用导线把用电器的两端直接连接起来,叫做用电器短路.2.用一根导线将电源的两极直接连接起来,叫做电源短路如果配上图就好了 串联电路中,电流处处相等,那通过导线与通过用电器的电流是不是也相等?并联电路同一个支路是不是也一个一样啊,今天考试上有什么什么导线损失了多少电功,弄的一头雾水. 初中物理有哪些实验的方法? 把电源,用电器,________用导线连接起来组成的电流的路径叫电路 一根导线接在用电器的两端这样为什么短路 要有作品名称、材料、制作方法、及原理~最好是新.要求创新. 平移的概念 已知长度和半径和电阻率,求电阻值R的公式 某同学将 6克镁条加入到50毫升的稀硫酸中 ,恰好完全反应,反应后所得溶液质量为100克谢谢了,某同学将 6克镁条加入到70毫升的稀硫酸中 ,恰好完全反应,反应后所得溶液质量为100克.式计算.今 平移的定义在平面内,一个图形由一个位置沿某个方向()另一个位置,这样的图形叫做平移.平移不改变图形的()和() 在探究向心力速度大小表达式a(N)=v^2/r中三角v/AB=v/r是什么意思 某同学将4.8克镁条加入100克的稀硫酸中 恰好完全反应 试计算产生氢气多少克 稀硫酸溶质质量分数 平移的定义是什么?急!快 心形线的的长度设为L,那么 L=∫(r^2+r'^2)^(1/2)dθ 其中,r'表示r的导数.公式怎么得来的r=a(1+cosθ)(a>0) 2.4克镁与100毫升稀硫酸完全反应,体积变化忽略,求1:产生气体标况下体积 2:溶液中镁离子物质的量浓度 (化学方程式和公式都要有啊.急) 平移的定义是什么? 有图纸,求内孔15度角的长度,和内孔r的长度.急、、、、需要计算公式. 平移题三角形A'B'C'是由三角形ABC沿BC方向平移了BC长度的一半得到的,若三角形ABC面积是20,那么求四边形A'ECC'的面积(要过程)(ABC是普通三角形.) 平移的特征定义 心形线的的长度设为L,L=∫(r^2+r'^2)^(1/2)dθ 其中,r'表示r的导数此公式怎么得来 心形曲线为r=a(1+cosΘ) 几何证明题,交点在外面就是这种情况,仍然可以完成证明,两角相加改成相减而已 生理盐水的化学式 为什么家庭电器中的灯丝通电后热的发光?而与灯丝串联的导线发热不明显 数学几何题.关于图形平移将边长2cm的正方形ABCD沿AC剪开,再把三角形ABC沿着AD方向平移得到三角形A1B1C1,若两个三角形重叠部分面积是1cm2,则它移动距离AA1等于( )cm.回答过程要充分 内阻到底是用电器、电源内部的电阻 还是导线的电阻? 大功率的用电器为什么不能用细导线连接 求几何题解释 生活中有哪些平移现象 硫酸是氢原子和硫酸根离子形成的吗 为什么 计算4.8克的镁条与足量的稀硫酸完全反应,生成氢气的质量. 在日常生活中,你看到过的平移现象有 、 、 、 ;旋转现象有 、 、 、 .平移 升旗杆上的旗、电梯上的人、传输带上的物品、推拉门、推拉窗 旋转 旋转木马、摩天轮、电风扇、转盘、方向盘 纯净的硫酸是由H2SO4分子构成的,为什么不是由氢离子和硫酸根离子构成 6.5克镁与100克稀硫酸溶液恰好反应计算:(1)可制得氢气多少克?(2)这种硫酸溶液的溶质的质量分数是多少(3)完全反应后,所得溶液的溶质质量分数是多少 生活中哪些是平移现象不要让我去自己查的,要完整. 在H2SO4中,硫酸根离子(sO4 2-)的化合价是 (5)若测得镁铝合金中镁的质量分数为4%,现取n克镁铝合金,投入到足量的质量分数为9.8%的稀硫酸溶液中,共收集得到氢气0.8克,该合金的质量n为? 观察生活周围各处,指出几个平移现象,并加以描述 求直角三角形斜边长度多少?长边180 短边50 斜边是多少?要求写计算公式及方法! 一个大功率的用电器,用铝线接入电路后,工作过程中发现导线太热,为了不使导线过热,下列措施好的是A改用长短粗细都相同的铜导线B将铝线加长些C改用长短相同,更粗些的导线D将铝线减短些 日常生活中有哪些平移现象? h2so4表示一个硫酸分子中含有2个氢原子?这句话对吗?为什么? 一个大功率的用电器,用铝线接入电源後,工作过程中发现导体太热,为了不使导线过热,下列措施好的是 A.改用长短、粗细一样的铜导线 B.将铝导线加长些 C.改用长短一样,更粗些的铝导线 D.将 在生理盐水中,它的溶质(化学式)是什么? 求直角三角形斜边长度多少?底边10米、 高边1.5米,斜边是多少?要求写计算公式及方法! 按向量平移的问题,麻烦解释清楚点啊……f(x)=X^2+4x+5的图像按a平移后为y=X^2的图像,则a=也就是说按向量平移就是给原式中x-h,y-k? 如图,折线AOBC是一段围墙,一根5米长的绳子的一端拴在O点处的柱子上,另一端拴着一只小羊.(1)如果OA=6米,OB=3米,BC=4米,∠AOB=90°,∠MBC=60°,求小羊活动的最大区域面积.(π取3结果精确到0.1平 直角三角形斜边公式是?…… 按向量平移y=2^x按向量(-2,1)平移得到的解析式? 平移后的图形是实线还是虚线
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn