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

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

译文:图灵社区


百度高德小米网易杭研讲师登场 SDCC 2013第二批议题发布(图) [开源推荐]JS-Git:一款纯JavaScript实现的Git项目 良心企业Lavabit、Slient Mail相继关闭,美国云安全已死? 一周观察:LXC真的是PaaS的未来吗? [企业开源系列]Google背后的开源力量 合作: “云”潮中淘金的金钥匙 Windows 8.1尚未发布 Build 9471版遭泄露网爆高清大图 Imangi创始人:我眼中的App Store 职业设计生涯:打造世界上最小巧最强大手电 【SDCC 2013】Coding For Fun活动火热招募中! YARN之上的大数据框架REEF:微软出品,是否值得期待? 创建大数据公司之前你需知晓5件事 前途渺茫,考虑出售的黑莓还能找到买家吗? 帮助开发者轻松管理项目的8款在线工具 现代Web应用开发者必备的六大技能 JavaScript异步编程好助手:Promise模式 功能解析:Red语言推出0.3.3新版本 可穿戴?可吞咽!UI和UX的悄然转变 华为刘成:讲述开发者联盟的故事 出尔反尔,Amazon咬文嚼字玩转私有云 创业公司SOASTA:曾帮助伦敦奥运会官网进行云负载测试 金山云进一步聚焦云存储 Facebook公布用户数据:美国移动用户占比78% Zynga开源服务器监控工具zPerfmon 上海海事大学王洁:打造物流教学科研应用云平台生态系统 15个步骤创立技术公司,并收获千万用户(二) HTML5发展慢热 开发者热情不减 NimbleBit孪生兄弟创始人:最后悔没有专注和扩大品牌 将对Windows形成挑战:谷歌在Chrome OS中默认支持Office 微软的企业社交大动作:Yammer发布移动SDK 谷歌开源Gumbo:纯C语言实现的HTML5解析库 ??怎样用asp程序把一段html代码转换成纯文本格式? 下拉数据窗口不能下拉是什么原因啊? 有关用VB做数据库的简单问题、ComboBox控件问题! 大家帮我看看这段程序为什么值为0 oracle8.1.7的数据库备份文件怎样恢复到oracle8i上 ? 怎样屏蔽flash的右键菜单,弹出自己的菜单? 我想问一下有没有不写入数据库用ASP代码可以查看当天的浏览访问量 灌水区的水越来越没质量了,你觉得呢? 按钮消息响应的问题,详细请看进去再看 异常详细信息: System.Data.OleDb.OleDbException: 无法启动应用程序。工作组信息文件丢失,或是已被其它用户以独占方式打开。 求助,网页制作0=={=========>(在线等,送分) 谁能告诉我《C++Builder 5编程实例与技巧》这本书在哪儿可以下载到完整的电子版!高分感谢! 请教如何将一张图片旋转? 关于流媒体和vc++的结合,高人请进!! 关于DataOutputStream和DataInputStream求教 会DirectX的一起来讨论! 4444 菜鸟求助~~~ help me 刚才发现www2.google.com www3.google.com也不能访问了,见鬼:( 我想停止window2000[域控制器]的389端口,但我不知服务是不是LDAP,因为我想占用端口389 各位!帮个忙! 帮忙啊!因为很着急,只有在技术论坛发了,大家原谅 电子地图 上海的程序员都在哪里"混"? 如何最小化所有窗口? 你们有谁读大学一学年要交近1000元书籍费? 帮忙啊!因为很着急,只有在技术论坛发了,大家原谅 asp中如何使用ADO实现对sql数据库操作 求助,网页制作0=={=========>(在线等,送分) 我在用mcisendcommond()函数时,总提示设备类型出错,是什摸原因? 紧急求教高分相送100分。 怎么判断女孩喜欢你? CSDN的首页能登录吗? C 与 C++ 到底有什么不同?? 偶然发现的mysql排序问题 是否有专业PL/SQL编辑器(能够提供类似VC的类成员或方法提示、格式自动排版等功能)可以下载 ?? 关于条码编程 非常急,请各位帮忙想想办法 怎样实现同一窗口的不同字体大小的显示 请问谁有HTTP代理服务器内容检查与病毒检查的代码 在程序流程中要等待几秒,应该调用什么函数啊 请问各位高手,哪有C++ Builder 教程可供下载? 有没有办法使用VC控制键盘做Reset动作,即键盘自测的动作。 怎样建立一个企业的WEB网站 高程考试寻求帮助 新店开张,欢迎光临 考试论证 四级挂了,考试挂了!这是不是大学底谷~~~~~~~~~~什么是高潮? Windows 2000 服务器,工作机,客户机权限问题!! 如何获知某个目录里都有哪些文件? 在括号中填上恰当的词:1.悬泉瀑布,飞欶( )期间.2.( )清( )荣( )峻( )茂,良多趣味. 油的分子是否比水的大? 如何判断用电器短路——电流为什么不走这条导线?如图,当S1,S2都闭合时,为什么电流不走R2和电压表而导致R2和电压表短路?究竟怎样判断短路?怎样判断电流是否走这条导线?如图 围绕“今天真热啊”为开头,并围绕这个中心意思写一段话. 水和油为什么不容不是说分子会运动吗最好详细解释一下谢谢啊 什么是18k金钻石戒指?求婚用的话,哪个牌子更好?求解答. 孔和轴的公差带大小是由什么决定的 油分子大,还是水分子大如题 谢谢了急! 电流是否宁走导线也不走用电器? (10)已知锌与稀硫酸反应为放热反应已知锌与稀硫酸反应为放热反应,某学生为了探究其反应过程中的速率变化,用排水集气法收集反应放出的氢气,实验记录如下:时间(min)12345氢气体积(mL)3012028 超声波在陶瓷中的传播速度是多少? 温度计制作需要考虑的因素为什么制作温度计要考虑比热容,还要考虑密度吗?(请不要说凝固点和熔点)例如水银... 《藤野先生》语句品析但一位先生却以为这客店也包办囚人的饭食,我住在那里不相宜,几次三番,几次三番地说.我虽然觉得客店兼办囚人的饭食和我不相干,然而好意难却,也只得别寻相宜的住 轮廓要素和中心要素的形位公差标注有什么区别? 如图,△ABC和△CDE都是等边三角形,求证AD=BE 青城山里面的青青园宾馆在地震中倒了吗如题,不知道有没有人知道这件事啊 显微镜观察到细胞标本偏左上方 怎么解决 7.8. 当机体受到伤害性刺激时,神经系统和内分泌系统都有哪些反应?有何生理意义? 用水重结晶乙酰苯胺,在溶解过程中有无油珠状物出现?如有油珠出现应如何处理? 超声波在不同物质中的传播速度有何规律( )[exam=254] 天文望远镜的物镜口径做得较大,是为了--------------------?如题啊.thanks you 在对肿瘤的免疫监视中,起重要作用的细胞是什么? 超声波的纵波和横波在不同介质中的传播速度? 阅读下面材料 写出寓意山野里,一株骄傲的白玉兰芳香四溢. 啄木鸟总是啄个不停.“太吵了,赶快离开!你打扰了我的美梦.”白玉兰说.啄木鸟默默的离开了.白玉兰只留下一群如花般的黄鹂相 免疫具有( )抗原侵入,( )体内衰老,死亡或损伤的细胞,监视,( )和( )体内产生的异常的功能 18k金钻石是什么意思 阅读下列材料,然后写出其中包含的寓意小姑娘又问苹果:“苹果,你为什么没有长成小瓣呢?是为了让我一个人独吃吗?”“不!”苹果回答,“是为了让你能完整地把我奉献出去.” 下列属于免疫监视功能的是A.呼吸道粘膜纤毛清除异物的作用B.人体随时清除体内的肿瘤细胞C.胃酸杀死胃内的细菌D.噬食体内衰老、死亡、损伤的细胞 请问手表的18K金与间金有什么不同,18K金是个什么概念? 阅读下列材料,写出爸爸的意思.女儿将一位生病的同学送到医院,诊断治疗后又将同学送回家,回到自己家里时才想其一件事.女儿对爸爸说:“爸,我忘了跟您买生日礼物.”爸爸笑着对女儿说: 细胞免疫最终怎么清除抗原的?说到了使靶细胞裂解使其中的抗原暴露出来,然后怎么清除抗原?是进行体液免疫么?还是T细胞又怎样了? 麻烦高人帮我解释一下这个公式是怎么来的IB=UCC-UBE/RB+(1+β)RE 这个除以βRE是什么意思啊,另外 这个UCC-UBC/RB+RE得到的是IE吗? 求问橡胶止水带需要检测哪些项目? 藤野先生一文中最能表现鲁迅对藤野先生怀念之情的词语是 18k素金是什么意思? 根据意思写“一”字开头的成语: 如何理解《藤野先生》一文中的“也许”一词? 是表示金的含量吗? 写“一”字开头的成语1、比喻互相配合,互相呼应.2、形容一水之隔,往来方便.3、知道、理解得不够全面透彻.4、一眼就可以看清楚.5、形容十分规矩、严肃.如:形容阅读速度很快。一目十行 关于尺寸公差带的问题 我想要加工一个Φ190H8Φ150H8的零件 请问公差带分别是多少 以下是两个方法.希望最好能解释下意思猴子吃桃问题.猴子第一天摘下若干个桃子,当即吃了一半,还不过瘾,又多吃了一个.第二天早上又将剩下的桃子吃掉一半,又多吃了一个.以后每天早上都 写几个“一”字开头的成语. 秋天的落叶作文,五年级350到400字左右, 煤炭转化为二氧化碳,煤灰等,有没有新物质形成? 仿照例子写出词语例:亮晶晶明___ 毛____ 软______ 喜_______ 凉________ 350字秋天的落叶作文怎么写 MBTI职业性格测试看不懂, 按要求或仿照例子写出有关词语描写天空的四字词语例:ABCC银光闪闪:( )( )( )( )例:ABAC自私自利:( )( )( )( )例:AABC奄奄一息:( )( )( )( ) 秋天的 作文600字最好是秋天的落叶10月25日前要 晚上喝蜂蜜水好吗?晚上睡前喝杯蜂蜜水对身体有好处吗? 仿照例子分别写词语1.例:白雪—雪白 2.例:相互—互相急用啊 酸性的条件下 钠离子 铝离子 氯离子 硫酸根离子能共存吗 喝药时能用蜂蜜水吗 铁离子和SCN根离子能共存吗 超声波的水中传播速度 超声波(横波或纵波)在水、有机玻璃、钢中的传播速度是多少,随温度变化,有无公式? ‘悬泉瀑布,飞漱其间.’中悬泉瀑布的逐字意思和四字总体意思, 函数y=x^2的图像平移向量a,得到函数解析式是y=(x+1)^2+2,那么a等于? 用电器两端接上导线,为什么电流不走用电器,只走导线ne
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘