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

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

译文:图灵社区


VB怎样在VB中播放Flash动画。 VB制作TopMost窗口 VB制作带有动画和声音的屏幕保护程序 VB制作自己的MP3播放器 用VB实现鼠标的隐藏 0、""(空字串)、Null、Empty、与 Nothing 的区别 -VB资料 VB中获取逻辑磁盘的信息 Command & Conquer 文件格式-VB资料 CrystaIReports for VB5报表编程经验 DirectX揭密-VB资料 HOOKS 说明书-VB资料 kb_event函数的使用 -VB资料 MaskEdit 中 9 的问题 -VB资料 MDB文件的导出(使用DAO)-VB资料 PaintPicture的和法 -VB资料 Shell & Wait 的程序怎么写? -VB资料 SHELL语句用法心得-VB资料 VarPtr、StrPtr和ObjPtr函数的用法-VB资料 VB 在ACADWIN中的使用 VB5.0应用程序的启动与退出设计 VB5如何取得CDROM的盘符? VB5三十六计 VB5中确定CPU类型 Vb6.0编程技巧四则 VB6二进制双通道技术实战经典 VB6内置的内码转换功能 VB编程步步高-代码效率篇(一) VB编程步步高-杂类篇(二) VB编程步步高-杂类篇(一) VB编程的必备技巧 VB编程的一些心得 500分求解决一个问题 在线等待 解决立即给分 2003下为什么我的声卡不能用? 在程式AAA.PRG中如何修改表的字段的類型,比如字段C類型改為N類型??很急!!! 为什么有时候成员函数或变量显示不出来 救命!我在程序中使用webbrowse控件………… 在线等待。 也许是一个很简单的问题! 连接mysql出错 寻关于工控的中英文对照资料 想在暑假打工(计算机方面的)需要什么条件啊? 关于SQL SERVER的疑难问题!来者有分!(在线等待!分数不够可以再加) MTS与线程——高分相赠!!!! 来看看啊,告诉我再哪里下就给分啊~~ 大对象问题,所有书都是这么说的,可是都作不成功? 如何指定tquery中的某一行? 如何通过API发送翻页按键给控件? 在jbuilder 中 不能通过 创建Ejb Tester对EntityBean进行测试吗?SessionBean都可以的 如何在ie中点右键获得这个ie窗口的window Text以及其主框架的URL。 关于Kdevelop开发 大家讨论一下项目负责人到底该赚多少钱(年薪)? ★★★★★如何在文件下载完毕后自动关闭浏览器??★★★★★ #### 关于CWebBrowser控件 #### 兄弟我要做一个网上银行系统,需要做压力测试,各位有过这样的经验吗??怎么来测试,用什么工具来进行并发访问压力测试? 兄弟我要做一个网上银行系统,需要做压力测试,各位有过这样的经验吗??怎么来测试,用什么工具来进行并发访问压力测试? 菜鸟问题,在线等待,如何让JList显示带gif的文字啊? delphi+access 用ADO连接,为什么在SQL语句中用SUM()时,执行出错?送分 为什么我make时,有错误:'class' or 'interface' expected Dreamweaver mx自带的制作下拉菜单的部题? Interbase字段类型有多少,就这些吗??急呀 Sybase:怎样知道本地的哪些数据库文件已经被连接,和连接的DBN,DBF,ENG。无论是Central还是其他应用打开的,我咨询Sybase公司,还不行 请问如何用ASP.NET或ASP发送会议要求和约会 怎么样在网页上插一个FLASH动画呢 小问题,很快结帖 为什么会出InvocationTargetException ***急购vb6.0控件参考,MFC类库大全(上,下),运行库大全(希望) Applet向Servlet发消息,分别发post和get请求,请问该如何实现 请教,DataGrid实现分页后怎么保存 每一页DataGrid里的checkbox的状态 关于多个radiobuttonlist的选择问题。 Server.CreateObject("LyfUpload.UploadFile") 怎样动态的创建ado.net中的dataadapt和dataconnection? 可不可以在微软的中文网站上找到中英文的技术文章,asp是微软的技术吧? 请问如何将owc生成的图表赋不同的颜色 保存jsp文件时遇到问题,help frame中的数据传递 今天做舅舅了!!! 哈哈,我要当干妈啦:D 任何定义一个动态的结构体数组 大侠,求救,如何将英文的sql7.0的备份文件恢复到sql 2000中。来者有分。 如何用HttpResponse.Redirect()打开新的窗口 请问JBuilder错误提示:cannot access directory javax\mail at line 7, column 1 安装网络打印机时出现的提示 如何获取客户端用户名! 一次函数的关系式的问题已知一次函数的图象经过点A(-1,3)和点B(2,-3),求:(1)一次函数的关系式(2)判断点C(-2,5)是否在该函数图象上 第一单元复习-五年级备课室-小学语文教育教学的 没有世上两个人会用同一种方式读同一本书的名言是什么? 备课组内如何进行合作 脚裸是身体的哪里啊我一直不知道脚裸是在哪里 光不沿直线传播会怎么样3个合理场景. 英语翻译这是从罐装雀巢咖啡拍下来的,我想知道这咖啡的保质期是多久,生产日期之类的信息.求翻译 关于解直角三角形的题,已知在△ABC中,∠A、∠B、∠C对边分别为abc;关于x的一元二次方程x²-(c+4)x+4c+8=0的两根为a、b,且9c=25a*cosB1、判断△ABC的形状2、求a、b、c的值 光在何时会沿直线传播?光只有在真空中才沿直线传播, 这道题如何解 学过《走遍美国》的进啊大家认为《走遍美国》能提高语法吗?有人说《走遍美国》太口语化了……只能提高听力和口语,对语法没什么帮助你们认为呢?我觉的里面还有很多语法知识啊大家给 南开区 教学质量监测 第五组 序列互补如何影响DNA的性质与功能 怎样选择初中体育教学内容 谁有人教语文六年级上册第五课詹天佑的备课 请问, 已知AB=AC,D是AB上的一点,DE⊥BC于E,ED的延长线交CA的延长线于F,试说明△ADF是等腰三角形的理由.不好意思,刚刚的问题提错了,这个才是的。抱歉。如图所示,在△ABC中,∠ACB=90°,点D,E在AB上 平行四边形的一个角与它的对角的和是150°,那么这个角是()度,与他相邻的角是()度如题. 一个斯诺克的规则问题:红球打完后,比如在打黄球的时候,把绿球撞进袋了.这时除了扣4分之外,要不要把l要不要把绿球捡起来摆在点位上?谁能给出一个链接吗?我记得在电视里看的是不用摆 什么是爪型趾 证明:两组对角的角平分线平行的四边形为平行四边形 在 陈涉世家 中,陈胜是怎样评价项燕的?陈涉世家 中,陈胜是怎样评价项燕的? 怎样才能使脚甲趾长得快点我的脚甲给拔了,怎样才能加快脚甲生长呢?还有医生给我贴的棉粘在甲床上,会不会影响新的脚甲生长啊? 伊利运河是哪国的﹖ 这道题怎样解?急 1、简述园林与绿化的关系. 美国伊利偌斯在什么地方,芝加哥吗 读完陈涉世家,陈胜给你留下什么样的印象 体育生怎样写保证书 试说明伊利运河对美国社会经济的地理意义? 怎样进行片段教学 体育保证书150字怎么写 伊利运河作用 初中物理怎样用对话来进行教学的? 体育生回队训练怎么写保证书? 与PCAGCT互补的DNA序列是 如何进行片段教学 斯洛克时 红球进后 打彩球时 本来打黑球 但把蓝球打中 这该怎么算 集体备课是提高备课质量的重要备课形式.它可集思广益,将个人才智转化为集体优势,共同提高教学质量.但是有没有一种方式,可以省时省力,节约经费,资源共享,利于保存呢? 电磁炉,发电机,日光灯镇流器,磁电式电流表中没有运用电磁感应规律的是 这个字怎么读 互补的定义.书上证明的过程中有一步是"...(互补的定义)."互补的定义具体是什么吗?以前学过,但是我忘了.顺便问下,怎么打出角的符号和所以,因为的那3个点? 陈涉世家中陈胜对秦朝的统治是什么态度 亿、十亿、百亿、千亿是位数吗? 请解这道题,谢谢了. LED日光灯管加上镇流器为什么还会升压? 个十百千万 十万 百万 千万 亿 十亿 百亿 千亿 后面3位是什么啊? 答案要求几千个字.运河申遗将“京杭大运河”扩容为“中国大运河”的意义何在?运河申遗将“京杭大运河”扩容为“中国大运河”的意义何在?给我几千字 不要只敷衍的回答 解方程 (24 19:31:18)(1)X平方-5X=0         (2)(3X-2)平方=(1-5X)平方 如图,已知AB=AC,D为AB上一点,DE⊥BC,ED的延长线交CA的延长线于点F,则△ADF是等腰三角形吗?为什么? 英语翻译如题,一定要准确,.等待中.先谢过了. 运河申遗将“京杭大运河”扩容为“中国大运河”的意义何在?如果把长城比做中原王朝防御的盔甲,运河比做生命的血液,结合中国历史谈谈你的理解. 已知AB=AC,D是AB上的一点,DE垂直于BC于E,ED的延长线交CA的延长线于F,那么三角形ADF是等腰三角形吗?为什么? "中外名师"翻译成英文,用在教育类名师名校的用法,直接拿翻译软件类的就免了吧.在线等,着急用.先谢谢啦.感谢大家的参与,这个要作为一本杂志的书名 世界上有哪些运河?与我国的京杭运河有什么不同? 已知AB=AC,D是AB上的一点,DE垂直于BC于E,ED的延长线交CA的延长线于F,那么三角形ADF是等腰三角形吗?有急用 语文阅读课文教学比赛五年级下册上哪篇课文好?阅读课应该怎样上?生字还要讲吗?要是有阅读课文比赛的教学视频就好了,我是新老师,根本摸不着北. 如何加强备课组建设 已知AB=AC,D是AB边上一点,DE⊥BC于点E,ED的延长线交CA的延长线于点F,试说明三角形ADF是等腰三角形 求六年级课文《各具特色的民居》的备课案 如何加强教研组备课组建设 二轮巡视已进驻商务部三峡集团以色列宣布扩建犹太人定居点计划 潘基美联储维持宽松货币政策以刺激经济增长东非共同体和平与安全会议下月召开福建一派出所所长接受嫌疑人吃请并娱乐中国科协调查显示仅四成科研资金用于项上海二中院立案受理复旦投毒案国家遴选百人冲击诺奖引争议 专家吁莫土耳其或迫于巨大压力弃购中国“红旗”多地频现“雷人”指标 专家吁改变政府巴沙尔强调政治方案能否成功取决于停止埃及临时总统访问阿联酋宁国领导慰问老人照片系合成 官员“悬宁国就PS照事件致歉 称官员慰问老人伦敦股市30日收盘基本持平纽交所黄金期货市场30日交投最活跃的中储粮回应转基因油入国储库:不具备检北京匿名社会监督员:提20多条意见从多名俄罗斯高官因瞒报收入被免职中国就欧盟对华紧固件反倾销措施案的执北京10单位仅1公开社会监督员信息 国产恐怖片真的好难拍中国游泳队飞抵喀山冲5金 女选手表现茂名足彩粉丝倍投狂中5注任9头奖傲雪红梅磊落志,天地心 倾出挚诚不会悔把属于史迪威的荣光还给他被伊拉克警方扣押的北大学生获释广州:鹈鹕深夜飞出动物园被车撞死剧烈胸背痛 警惕要命的主动脉夹层包贝尔泪奔:有人叫我跑男 不知道我是《中国好声音》被指造假英国学生签证入境条例最新信息变更寓教于乐,儿童安全教育可以不枯燥“醉猫”开车撞伤三人 浑然不觉逃逸“王老吉·雅吉足球场”开建张惠春:没被认出很正常皮明等三位中国艺术家 赴美举办沙龙曼奇尼:国米看上张琳芃是真的省足球联赛第10轮 湛江狂狼赢球领跑中国泳军争金不易手扶电梯一旦出事应果断按下制动按钮
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘