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

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

译文:图灵社区


Android Permission列表,ADT 0.9.9 bug Android Theme和Styles内部定义解析 Android平台下图表绘制相关方法 Activity类的runOnUiThread方法你用过吗 Android上鲜为人知的UI控件介绍和使用 获取Android手机上的图片和视频缩略图 Android JSON解析示例代码 Android ANR介绍与避免 Windows Phone 7 SDK完善度不如Android m3 Android中使用定时器TimerTask类介绍 控制Android LED灯颜色代码 Android应用Icon大小在不同分辨率下定义 Android控件美化Shape你会用吗? Android屏幕截图之View方法 Android开发者应该保持以下特质 Android Widget开发模板 Zipalign使用方法-SDK中的APK文件优化工具 Android蓝牙控制之2.X或以上 Android数组排序常见方法 使用OpenGL开发一个指南针 Android自绘GridView控件 Android平板开发注意事项 Android控件TextProgressBar进度条上显文字 Android内存管理-SoftReference的使用 反射在Android开发中的利弊 intent调用代码总结二 Android缩略图类源代码 Android多人项目开发指导 AsyncTask对比Thread加Handler Android Drawable叠加处理方法 android.os.Debug调试工具使用方法 高分求教,MyODBC!!!!!!!!!!!!!!!!!! vc++ 写了一个vb控件,如何让客户端打包下载 关于如何在linux下运行xml的程序的问题 急!请问那为大虾知道wast这个软件啊? 求救:用VC怎么调试程序(怎样设断点) 各位高手:>>>送分问题.....谢谢!! 关于安装程序.... 在Form上放一个Memo,响应Form的onMouseMove时,为什么在Memo上移动鼠标,事件中的传递的参数Sender总是Form而不是Memo? tc++中怎样使用bitmap 送分了!! bcb报表中只有richedit可以自动折行,如何解决? 如何把asccii字符串转化为unicode形式的字符串??? 高手请帮帮我吧 打印RichTextBox 的内容时,如何设置页边距? 可变参数的函数 想找个老师帮我提高 要做一个dll需要在不同的平台调用该如何声明? 硬盘分区表是哪个文件? 我准备写篇有关软件企业的管理的文章,谁愿提供建议和材料,谢谢! 急!如何在VB中控制扫描仪,并按要求取得图象? 高手请指点 [给分]请global_boy(准备蒸发)进来领分!帮助解决Win2000启动选项的配置..原贴:http://www.csdn.net/expert/topic/592/592163.xml?temp= 请教高手!如何通过文件名获得其图标 MCSE?! 数据连接错误? 如何让datagrid绑定数据 ISAPI程序里输出的网页无法显示,大家救命! 请问如何在Jb6中使用中文字体,比如说宋体 HTTP 和 FTP 一个黑客问题? SQL 急的!谢谢大家帮忙!关于interbase与c++builder5的连接。 请教高手! 哪里有免费下载<thinking in c++>等图书的? 那位大侠懂在 VC 中用汇编??? 有会命名管道操作的高手吗 请教高手! 异步传送的问题? 如何杀死某个进程呢? 苦行僧与灌木丛来领分 如何把一个string转换成int delphi与Access ADO连接的详细设置? 请问能否用C#实现进程的完全隐藏? 创天中文VC6.0的问题????? 有谁知道类似WINDOWS98那个星空的屏保是如何实现的? 请各位大虾提供一些JAVA开发工具的下载网址 在Web Service中传递图像字段数据回客户端的问题!请教大侠! 买过深入浅出MFC的朋友请进~~~~~~ 会Java的究竟难不难找工作啊? 有什么方法可以让自己的机子有假的ip呢? 五年级作文让我感动的一件事700字 六年级看漫画写作文.我是个六年级的学生,今天我们语文考试了.作文时看漫画写作文.漫画是一个人踩在干裂的土地上(地球环境差到极点),对着一个只剩下树枝和树干的树作画,他没有按实 《谢谢你们给了我浓浓的母爱》初一作文500字左右 《这件事真让我感动》 作文 700字我要写的是在大雨中的一件令我感动的事情,最好是父母来接孩子放学的,谁有帮帮忙,星期一要交的,写得好加分, 语文六上第四单元看漫画写作文450字以上 兔子到底吃不吃蘑菇? 如何介绍社公园的一篇英语作文和介绍我的社区要3 5句 我的社区最主要 看漫画写作文,不可以是语文书上出现过的,500字 600字作文《那一次我很感动》的提纲? 妈妈买回一些梨,按计划天数,如果每天吃5个,则多出45个;如果每天吃7个,则又少9个。妈妈买了多少个梨 假如你是李华,某英语报社吸收中学生记者,请你写一封不少于120词的推荐信,(可以推荐你或者其他同学)...假如你是李华,某英语报社吸收中学生记者,请你写一封不少于120词的推荐信,(可以推荐 六年级上册第四单元漫画作文的题目最好有点吸引力 大学英语演讲ppt3分钟左右,内容新颖,吸引人,有图和文字.最好多几篇, 妈妈买回来一筐梨,按计划的天数,如果每天5个,则多6个,如果每天7个,则少8个,妈妈买回多少个梨?计划吃几天(列方程解) 初二语文下册课本作文(7篇600字作文 大学课前10分钟英语演讲PPT, 急求英语演讲PPT,内容不限,十来分钟长度,最好附带演讲稿 初二语文作文《最亲切的怀念》600字 开头已给出夜 静静地春夜 连空气都弥漫着温馨的气息 我坐在窗前 遥望星空 眼里溢满感动的泪水 急求英语演讲ppt 不要butterfly 有关森林防火的作文抒情的,600字左右,星期四要用 初二语文作文 以乐观为话题600字.急.明天就用了最好在16:00前 有加赏。。。。。 求一个大学英语演讲PPT~RT 关于森林防火的文章越快越好,要绝对原创,不能出现过的,400字,了了了了了! 9月25日考托福,tpo听力总是错10+,怎么办呀,求指导~笔记来不及记,记得不考,考的没有记,涉及背景知识的,听不懂,实力太差啦,只有半个月了,怎么办? 如果英语是大学4级的水平考托福大概能考多少分虽然说看到很多人说没什么关系 但是想知道一个大致的标准 我的托福听力第一次17分,第二次做了大概5套TPO,听了大概40篇听写,只提高了1分,请问我该如何提高听力我考听力的时候开始还好,越往后越听不懂最后只能猜,我的分数分布是 R21 L18 S20 W20, 小弟 TPO阅读错10道tpo7的阅读,前几天做的好紧张来着,就给错了10分进去,44才拿了34,但是ETS给的单子上市28分.这是咋回事、、.考完TPO有个成绩单,阅读是28分.好诡异啊. 什么是荤菜素菜 托福TPO听力 听写怎么听文章的脉络和main idea?具体步骤是什么? 今年12月22号考托福,做tpo阅读对一半错一半,听力只能对一小半,惨不忍睹~我该怎么办? 我大二过了四级后一直没看过英语,现在想出国需要考托福,应该怎么复习,希望大家给我点建议 有没有人有托福TPO的完整版模考软件啊?不是那种WORD或是PPT格式,是软件 作文那一次我很感动600字,要好点的,不要复制的! 目前大二下学期,过英语四级,打算在大三上学期结束考托福,具体该如何复习希望考过托福的谈一下个人亲身经验,好的小方法,推荐一下有针对性的好书,好网站,最好具体到平时该如何准备,我 托福TPO中的听力是不是每篇都要听写啊? 关于春节的作文,700字请你选择你们春节期间吃年夜饭的一二个情景写出亲情, 请问我得什么时候考托福比较好?我现大三,打算要读研吧,需要现在开始准备一年去考,先假设考上了会读研两年吧~读完之后有出国读phd的打算,如果今年八月考托福,会不会申请的时候托福成绩 英语作文介绍我的新朋友长什么样 兔子吃不吃蘑菇? 今年什么时候考托福? 要考托福朋友推荐给我的tpo小站怎么样? 兔子喜欢吃蘑菇吗?我以前养过一只兔子,记得动画片里经常有小白兔采蘑菇的剧情,所以我也洗了蘑菇擦干给它吃,但是它好像不是特别喜欢的样子,吃倒也是吃的.曾经一度以为兔子最最奢侈的 一年时间考托福马上上高三,可是不想在中国念大学.想去美国.一年时间,努力学,托福能考出来么.给我提提意见. 还有几天就要考托福 做tpo几 兔子吃蘑菇吗 考托福什么时候准备最好? 还有20多天考托福了 但是阅读每次做TPO还是错5,6个谁能告诉我该怎么办 阅读怎么会成这样 之前第一次阅读只考了10分 有没有什么好方法 都没信心去考第二次了 呜呜 兔子吃蘑菇么? 明年考托福什么时候报名? 600字左右 求一篇英语作文,如下:假如你是新华中学学生李华,在最近举行的市高求一篇英语作文,如下:假如你是新华中学学生李华,在最近举行的市高中生英语口语大赛中获得了一等奖.某英语报社邀 以李华的名义写一篇英语作文你的美国笔友Tom准备到中国学习,他对中国的传统艺术非常感兴趣,希望了解中国学校在艺术课方面的安排.请根据以下提示内容,给Tom写一封80词左右的电子邮件,向 急需一篇关于理想的作文,我是初二的,作文要求700字以上,急..三个要求,文中一定要涉及到1 理想是什么2 怎样去实现理想3 为什么要有理想 小兔采蘑菇,晴天一天40朵,雨天一天24朵,一连8天共采240朵,这8天有几天是晴天?(要求分布列式计算)(要求分布列式计算) 妈妈买回一筐梨,按计划的天数,如果每天吃5个,则多出6个;如果每天吃7个,则少8个,妈妈买回多少个梨 假设你是湖南大学的学生李华,得知某英文报招聘兼职记者,你有意应聘,请按下列要点给报社写一封自检信1表示感兴趣;2知识面,英语水平,合作精神,相关经历;3希望得到回复.4 .100单词左右. 求一篇作文,题目是《那一次?》要600字以上! 感动历史人物作文 (700字)快! 看漫画写作文400字半个小时内交来 以《那一次,我履行了责任》为题写一篇作文!750字!
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘