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

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开发中的利弊 intent调用代码总结二 Android缩略图类源代码 Android多人项目开发指导 AsyncTask对比Thread加Handler Android Drawable叠加处理方法 android.os.Debug调试工具使用方法 Android多点触控开发原理 inent调用代码总结,不断完善中 onRetainNonConfigurationInstance和getLastNonConfigurationInstance Android中String资源文件的format方法 Android工程内嵌资源文件的两种方法 Android AIDL全攻略三 - AIDL框架 Android AIDL全攻略二 - Service绑定 自定义Android主题风格theme.xml方法 Android开发之模拟按下Home键的效果 Android AIDL全攻略一 Android Picture和PictureDrawable的用处 Android自定义View以及layout属性全攻略 Android通过Intent发送电子邮件含附件 Android调试技巧之Eclipse行号和Logcat Android Txt文本读写类源代码 Android游戏开发之旅20 双按事件捕获 Android游戏开发之旅19 分辨率大全 保护你的Android付费软件-LVL全攻略(二) 保护你的Android付费软件-LVL全攻略 android调试工具monkey压力测试实战 Android开发工具-App Inventor Android游戏开发之旅18 SoundPool类 Android多线程下载远程图片 Android读写Txt文本文件代码 listview内拖动问题 一个简单的问题??? sql server的SERVER端效率问题 VB6如何实现换肤功能 如何用对话之外的其它按钮控制对话框的关闭和打开 ! 关于picture的问题 算法与数据结构 寻找关于Dsound,Dplay方成的书籍或方档!! 如何在xsl中使用setTimeout()而得到渐显的效果? 在外面工作,做底层有钱途吗? 关于form的简单问题 搞过用TurboC开发图像,不知道转VC困不困难 有谁知<<终极杀阵>>游戏(Project IGI)第四回合怎玩的? 不知是否荒唐,大虾请 如果大家有问题告诉我(anjie@zj.soim.com) 如果大家有问题告诉我(anjie@zj.soim.com)一起讨论吗 想跟我交朋友anjie@zj.soim.com tc++3.0如何编写读鼠标程序(急) 都进来看看,程序员的下场... 各位高手,小弟问一个傻问题:怎么在播放一个AVI的时候用自定风格的滑块控制? 我上次在CSDN 上看到有人发贴子说自己写操作系统,我现在有个朋友也在写,想和他联系,但是我现在找不到那个贴子了, 有谁记得那个人的名字或贴子的位置请说.谢谢. 求助:打开网上邻居很慢为什么? 问一个蠢问题:控件何时获得焦点 请问一下哪里再收购软件呢? 请问一下在哪里可以找到收购软件的公司呢? 想作一个DOS程序,实现多台电脑间通过网卡传输文件. 辞职信 application.initialize完成了什么 高手来帮忙啊~ 看看java的魅力 如何通过自制程序的编辑框向现有一般应用程序编辑框传送内容? 窗口执行顺序问题,请多帮助,谢谢 如何自动取得server的日期和时间 怎样让文件指针指到文件末尾,必须skipline一行一行跳吗? 我想在菜单前添加图标,使用Bitmap属性但是为何只能载入*.bmp文件而不能使用*.ico文件,我只有*.ico的图标,请问该如何解决。 有新建一个文本文件并给其命名的函数吗,怎么用 我还真不懂呀? 这个COLTYPE是怎么用的呀?你说它怎么得到表中字段的类型呀? 有关存储器(ram,rom)的编址问题。以及32位或更多位芯片的问题。 一些汇编问题。想来问bcb的兄弟{bcb里好象有不少汇编高手} 救命:在安装了sco openserver之后,系统不能启动,先前安装的win98和win2k也不能。 请问如何进行URL译码??? 请问怎样截取一个string中的一段? 请问delphi做的exe最小可以到多少?怎么做? 我想请问一下WINGATE的具体怎样在WIN2000服务器版中进行设置。 ASP的同志们,能不能留一下QQ号码? 请问何处有破解ACCESS2000的程序或源代码呢? 请问要在TEdit.text组件文本串中找出当前光标在第几个字符上怎么办?谢谢! 请问关于dbImage控件的使用方法? 关于HDC及双缓冲的问题? xxxbird(*说你行,你就行,不行也行*),来领“我遇到几个怪问题。。。。。。”中的分 为什么ASP没法向SQL Server中写入数据?代码什么地方错了 如图,AB与AC是两条互相垂直的直线,圆O的半径是15厘米,弧AEB是以C为圆心,AC为半径的圆弧,求阴影面积. 如下图,三个半径都是2cm的圆两两相交圆心,阴影部分的面积是多少平方厘米?画的不是很标准,看得懂就行,打得好的另加悬赏 如图,半圆内的△ABC的面积是80平方厘米,BD长8厘米,求阴影部分的面积. 在以O为圆心,以半径为4厘米的圆O内,以4为直径画四条半圆弧,求团中阴影部部分的面积 如图,外圆的半径是Rcm,内圆的半径是rcm,四个小圆的半径都是2cm,则图中阴影部分面积是多少?急不要用^这个符号,我看不懂 半圆o内的三角形ABC的面积是80平方厘米,BD=8厘米.求阴影不分面积. 如图16,AB与CD是两条垂直的直径,圆O的半径为15厘米弧度AEB是以C为圆心,AC为半径的圆弧,求阴影部分面积用小学的方法算 一个直径为6分米的半圆,里面有一个直角三角形,求三角形外阴影部分面积. 如图,半圆内三角形ABC的面积是24平方厘米,高BD是4厘米,求阴影部分面积是多少平方厘米. 如图,两个四分之一圆弧的半径分别是2和4,ABCD是长方形.求:两块阴影面积的差.追加分TUT 急!一个半圆,内有直角三角形,求阴影部分的面积 右图中BC是半圆的直径,图中阴影部分1的面积比2的面积少5.12平方厘米.AC长多少厘米?(BC等于8厘米) 如图,将半径为4cm的圆形纸片折叠后,圆弧恰好经过圆心O,折痕为AB,则图中阴影部分的面积为 已知直角三角形ABC三边分别为6.8.10,分别以它的三边为直径向上作三个半圆,求阴影部分的面积 下图的比例尺是1:500,在图上量得长是15cm 宽是8cm ,求阴影部分的实际面积是多少? 以三角形的三个顶点为圆心,以一厘米为半径在三角性内画圆弧,那么图中阴影部分的面积总共为多少? 求阴影部分的面积三角形空白是个直角三角形半圆直径6cm. 下图的比例尺是1:500,在图上的距离长是15cm,宽是8cm,求两个阴影三角形合起来的面积的面积. 四个半径都是8cm的圆的位置如图所示,你能求出阴影部分的面积吗?上面俩圆下面俩圆然后四边连起来不是连成正方形半径相连就行除了四个圆其它的都是阴影部分 下图中等腰直角三角形的腰长是6厘米,求阴影面积的面积 下图的比例尺是1:500,在图上的长是15厘米,宽是8厘米,求阴影部分的实际面积是多少平方米?4月17号就要大家看见的都来帮帮忙谢谢了! 长为8cm,宽为6cm的长方形内,分别以长和宽为半径画1/4圆,如下图所示,求阴影部分面积? 等腰直角三角形的一腰长是8厘米以它的两腰为直径分别画了两个半圆那么阴影部分面积共有多少平方cm 小圆直径8厘米,比大圆半径少3/11.小圆的面积是( ),大圆周长是( ). 一个环形,外圆半径是8厘米,内圆直径是10厘米,环形的面积是多少平方厘米? 图中圆的半径为5厘米,求阴影部分的面积. 如图,等腰直角三角形的一腰的长是7厘米,以它的两腰为直径分别画了两个半圆,那么阴影部分的面积共有多少 一个圆环,内圆直径是3厘米,环宽8厘米,圆环的面积是多少?算式 图中圆的半径为5厘米,求阴影部分面积. 如图是有一个直径为a的半圆和一个腰长为a的等腰直角三角形组成的图案,求阴影部分的面积 一圆环的外圆直径是8厘米,内圆环半径是3厘米,此圆环的面积为多少平方米 如图,最大圆的半径为5厘米,试求阴影部分的面积和要求写清过程 , 这是七年级第一学期的数学. 如图,BCDE是平行四边形三角形ABC是直角三角形,BC=8厘米,AC=7厘米,阴影部分面积比三角形AGF的面积大12CM,图片1求AC的长? 一个圆环内半径为8厘米,环宽6厘米,这个环形的面积是多少平方厘米?大圆半径比小圆半径大6厘米,小圆直径与大圆直径的比是1:4,则大圆的面积比小圆面积大多少平方厘米? 图中,每个圆的半径是5厘米,求阴影部分的面积. 右图,ABC为等腰直角三角形,D为半圆的中点,BC直径长为8厘米,求阴影部分的面积. 一张圆形纸片的半径是8厘米,在它的中间剪下半径是3厘米的圆,纸片剩下的一个部分是一个圆环.圆环面积? 三个半径为1的等圆两两外切,那么图中阴影部分的面积为 在图中,△ABC与△ADE都是等腰直角三角形,BC长8cm,DE长4cm,求阴影部分的面积.要有算式,快~注:BC是△ABC的最长的边,DE是△ADE的最长的边 一个圆环,外圆半径是8厘米,内圆半径是5厘米,圆环面积是多少平方厘米要快!圆环面积是( )平方厘米? 两圆的半径为1厘米,且图中的两块阴影部分的面积相等,那么两个圆心的距离是多少? 图中△ABc与ADE都是等腰直角三角形,BC=8厘米,ED=4厘米,求阴影部分的面积. 一个环形铁片,内直径是8厘米,外直径10厘米.求面积? 如图,外圆半径是Rcm,中圆半径是rcm,其余四个圆半径相等,则图中阴影部分的面积是多少? 在下图,三角形ABC与三角形ADE都是等腰直角三角形,BC长8厘米,DE长4厘米,阴影部分的http://tg5a39.mail.163.com/js3/main.jsp?sid=qAlTrsGGRaJSzSVkKgGGrgOwtgKKJtvg里面的附件就是图形。要快,越快越好 用户名:ty.p 一个环形,外圆半径是8厘米,内圆半径是5厘米,环宽是多少厘米,环形的面积是多少平方厘米? 如图,外圆的半径是Rcm,内圆的半径是rcm,四个小圆的半径都是2cm,则图中阴影部分面积是多少? 三角形ABC与三角形ADE都是等腰直角三角形,BC长8厘米,DE长4厘米.求阴影部分的面积.请详细说明每一步算下什么. 一个环形,外圆的半径是8厘米,内圆的半径是5厘米,环形的面积是? 一个半径为根号二的圆过一个半径为2的圆心,则图中阴影部分的面积为多少?图自己画,是月牙形的!最好两天之内有回复! 一个长方形长10厘米,宽8厘米,里面有一个为5厘米的半圆,其余部分为阴影部分,求阴影部分面积. 一个环形外圆的半径是8厘米,内圆的半径是5厘米,环形的面积是()平方厘米 矩形ABCD中,AB=1,AD=根号2.以AD的长为半径的圆A交BC于点E,则图中阴影部分面积为? 如图二所示,ABCD是一个长方形,长是8厘米,阴影部分的面积是()平方厘米?圆没画好!求阴影! 一个环形,外圆半径是8厘米.内圆半径是5厘米,这个环形的面积是多少 如图,圆o的半径为2,a是圆o外一点,ab切圆o于点b,ao交圆o于点c,ab=2根号3,求图中阴影部分的面积 一个长方形里有一个半圆,长方形的长是8厘米,求阴影部分面积 一个环形,内圆直径8厘米,外圆半径5厘米,环形面积是多少平方厘米? 如图所示外圆半径是Xcm,内圆半径是rcm,四个小圆的半径都是2cm,则图中阴影部分的面积是多少?(2)当X=10,Y=5时,阴影部分的面积是多少?错了,四个小圆半径为3cm 下图中等腰三解形的腰长8厘米,求阴影部分的面积
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn