我用過其中4個(gè)框架：Angular、 Backbone、 CanJS和 Ember。因此，可以對(duì)它們作一比較，供大家參考。本文會(huì)涉及框架選型過程中需要考慮的一系列因素，我們逐一討論。

每一個(gè)因素我們都會(huì)按照1到5分來打分，1分代表很差，5分代表很好。我會(huì)盡量保持客觀，但也不敢保證真能“一碗水端平”，畢竟這些分?jǐn)?shù)都是根據(jù)我個(gè)人經(jīng)驗(yàn)給出的。

功能

作為構(gòu)建應(yīng)用的基礎(chǔ)，框架必須具備一些重要的功能。比如，視圖綁定、雙向綁定、篩選、可計(jì)算屬性（computed property）、臟屬性（dirty attribute）、表單驗(yàn)證，等等。還能羅列出一大堆來。下面比較了一些我認(rèn)為MVC框架中比較重要的功能：

• 可觀察對(duì)象：可以被監(jiān)聽是否發(fā)生變化的對(duì)象。
• 路由：把變化通過瀏覽器URL的參數(shù)反映出來，并監(jiān)聽這些變化以便執(zhí)行相應(yīng)的操作。
• 視圖綁定：在視圖中使用可觀察對(duì)象，讓視圖隨著可觀察對(duì)象的變化而自動(dòng)刷新。
• 雙向綁定：讓視圖也能把變化（如表單輸入）自動(dòng)推送到可觀察對(duì)象。
• 部分視圖：包含其他視圖的視圖。
• 篩選列表視圖：用于顯示根據(jù)某些條件篩選出來的對(duì)象的視圖。

得分

根據(jù)上述功能，我打出的分?jǐn)?shù)如下：

有一點(diǎn)必須指出，使用Backbone也能實(shí)現(xiàn)上述大多數(shù)功能，只是手工編碼量挺大的，有時(shí)候還要借助插件。這里的打分只考慮了框架核心是否支持某一功能。

靈活性

有時(shí)候，框架配合一些現(xiàn)成的插件和庫來使用，可能要比使用框架原生同類功能效果更好，而這種插件和庫幾乎遍地都是（不下數(shù)百個(gè)），又各有特色。因此，能夠把這些庫和插件整合到MVC框架中也非常重要。

Backbone是其中最靈活的一個(gè)框架，因?yàn)樗募s定和主張最少。使用Backbone需要你自己作出很多決定。

CanJS的靈活性與Backbone差不多，把它跟別的庫整合起來很容易。在CanJS中甚至可以更換其他渲染引擎，我在CanJS中就一直用Rivets，沒有任何問題。不過，我還是推薦框架自帶的組件。

Ember和Angular也都還算靈活，可有時(shí)候你會(huì)發(fā)現(xiàn)，就算不喜歡它們的某些實(shí)現(xiàn)方法，你也只能默默忍受。 這是在選擇Ember或Angular時(shí)必須考慮的。

得分

上手難度

Angular

Angular一開始會(huì)讓人大呼過癮，因?yàn)榭梢岳盟珊枚嘁庀氩坏降氖?，比如雙向綁定，而且學(xué)習(xí)難度不高。乍一看讓人覺得很簡(jiǎn)單?？墒牵M(jìn)了門之后，你會(huì)發(fā)現(xiàn)后面的路還很長(zhǎng)。應(yīng)該說這個(gè)框架比較復(fù)雜，而且有不少標(biāo)新立異之處。想看著它的文檔上手并不現(xiàn)實(shí)，因?yàn)锳ngular制造的概念很多，而文檔中的例子又很少。

Backbone

Backbone的基本概念非常容易理解。但很快你會(huì)發(fā)現(xiàn)它對(duì)怎么更好地組織代碼并沒有太多主張。為此，你得觀摩或閱讀一些教程，才能知道在Backbone中怎么編碼最好。而且，你會(huì)發(fā)現(xiàn)在有了Backbone的基礎(chǔ)上，還得再找一個(gè)庫（比如Marionette或Thorax）跟它配合才能得心應(yīng)手。正因?yàn)槿绱?，我不認(rèn)為Backbone是個(gè)容易上手的框架。

CanJS

CanJS相對(duì)而言是這里面最容易上手的?？纯此挥幸豁摰木W(wǎng)站（http://canjs.com/），基本上就知道怎么做效率最高了。當(dāng)然，還得找其他一些資料看，不過我個(gè)人很少有這種需求（比如看其他教程、上論壇或討論組提問呀什么的）。

Ember

Ember的上手難度與Angular有一拼，我認(rèn)為學(xué)習(xí)Ember比學(xué)習(xí)Angular總體上容易一些，但它要求你一開始就要先搞懂一批基本概念。而Angular呢，一開始不需要這么費(fèi)勁也能做一些讓人興奮不已的事兒。Ember缺少這種前期興奮點(diǎn)。

得分

開發(fā)效率

比較全面地掌握了一個(gè)框架之后，重點(diǎn)就轉(zhuǎn)移到了產(chǎn)出上。什么意思呢？約定啊、戲法啊，反正要盡可能快。

Angular

熟悉Angular之后，你的效率會(huì)非常高，這一點(diǎn)毋庸置疑。之所以我沒給它打最高分，主要因?yàn)槲矣X得Ember的開發(fā)效率似乎更勝一籌。

Backbone

Backbone要求你寫很多樣板（boilerplate ）代碼，而我認(rèn)為這完全沒必要。要我說，這是直接影響效率的一個(gè)因素。

CanJS

CanJS的開發(fā)效率屬于不快不慢的那種。不過，考慮到學(xué)習(xí)難度很低，因此適合早投入早產(chǎn)出的項(xiàng)目。

Ember

Ember的開發(fā)效率首屈一指。它有很多強(qiáng)制性約束，可以幫你自動(dòng)完成的事很多。而開發(fā)人員要做的，就是學(xué)習(xí)和應(yīng)用這些約定，Ember會(huì)替你處理到位。

得分

#p#

    社區(qū)支持

能輕易找到參考資料和專家?guī)兔幔?/p>

Backbone的社區(qū)很大，這是人所共知的事實(shí)。關(guān)于Backbone的教程也幾乎汗牛充棟，StackOverflow和IRC社區(qū)非常熱鬧。

Angular和Ember社區(qū)也相當(dāng)大，教程什么的同樣不少，StackOverflow和IRC也很熱鬧，但還是比不上Backbone。

CanJS社區(qū)呢，相對(duì)小一些，好在社區(qū)成員比較活躍，樂于助人。我倒沒發(fā)現(xiàn)CanJS社區(qū)規(guī)模小有什么負(fù)面影響。

得分

生態(tài)系統(tǒng)

有沒有插件或庫構(gòu)成的生態(tài)系統(tǒng)？

說起插件和庫，Backbone的選擇是最多的，可用插件俯拾皆是，這一點(diǎn)讓其他框架都望塵莫及。Angular的生態(tài)圈加上Angular UI還是很令人矚目的。我覺得Ember的下游生態(tài)雖然欠發(fā)達(dá)，但Ember本身很受歡迎， 所以前景十分樂觀。CanJS的下游支脈比較少見。

得分

文件大小

這個(gè)因素有時(shí)候很重要，特別是對(duì)于移動(dòng)開發(fā)項(xiàng)目。

自身大?。o依賴，未壓縮）

Backbone最小，這一點(diǎn)也是最為人們所津津樂道的。但不能只看庫本身的體積。

包含依賴的大小

80KB的Angular是唯一不需要其他庫就能使用的。其他三個(gè)框架則都對(duì)其他庫有依賴。

Backbone至少需要Underscore和Zepto。雖然在Underscore中可以使用最小的模板來渲染視圖，但多數(shù)情況下，還要借助更好的模板引擎，比如Mustache。這樣它就增肥到了61KB。

CanJS至少需要Zepto，因此會(huì)達(dá)到57KB。

Ember需要jQuery和Handlebars，總共是269KB。

得分

性能

我不認(rèn)為性能是選擇框架的關(guān)鍵因素，因?yàn)檫@些框架在預(yù)期應(yīng)用領(lǐng)域中的性能都不差。當(dāng)然啦，具體還得看你做什么項(xiàng)目。要是想開發(fā)游戲，那性能是個(gè)重要因素。

雖然我見過，也親自做過一些性能對(duì)比（比如這個(gè)測(cè)試），但我并不完全相信測(cè)試結(jié)果。很難說這種測(cè)試的方法和結(jié)果與實(shí)際項(xiàng)目吻合。

不過，據(jù)我所見所聞，CanJS的性能是最高的，而且在視圖綁定上格外突出。相對(duì)來說，我覺得Angular性能稍差，因?yàn)樗鼒?zhí)行對(duì)象的臟檢查（dirty checking），這一點(diǎn)就拖了它的后腿了。參見這里。

得分

成熟度

這個(gè)框架成熟嗎，經(jīng)過實(shí)際檢驗(yàn)了嗎，有多少網(wǎng)站在用它呢？

使用Backbone的網(wǎng)站不計(jì)其數(shù)。最近兩年，它的核心代碼沒怎么改過，這是成熟的一個(gè)重要標(biāo)志。

Ember已經(jīng)不是新框架了，但它的重大變更還是經(jīng)常有，前幾月剛剛穩(wěn)定下來。因此，目前還不能說它是個(gè)成熟的框架。

Angular似乎比Ember更穩(wěn)定，驗(yàn)證的示例也更多，但不能與Backbone相提并論。

CanJS好像還未經(jīng)任何驗(yàn)證，因?yàn)椴恢烙惺裁淳W(wǎng)站在使用它。不過，CanJS其實(shí)也沒有看起來那么弱不經(jīng)風(fēng)，它可是從JavaScriptMVC精簡(jiǎn)來的。JavaScriptMVC是2008年就出現(xiàn)的一個(gè)庫，因此會(huì)有很多智慧結(jié)晶留傳下來。

得分

內(nèi)存泄漏隱患

如果你想開發(fā)每次打開都得運(yùn)行很長(zhǎng)時(shí)間的單頁應(yīng)用，這是必須得考慮的問題。你當(dāng)然不希望自己的應(yīng)用導(dǎo)致內(nèi)存泄漏，這個(gè)問題非常現(xiàn)實(shí)。不幸的是，內(nèi)存泄露很容易發(fā)生，而自己編寫的DOM事件監(jiān)聽器則是重災(zāi)區(qū)。

只要你守規(guī)矩，Angular、CanJS和Ember能把這個(gè)問題幫你解決好。Backbone則不然，它需要你自己手工來卸載。

得分

個(gè)人偏好

這恐怕是選擇框架時(shí)最重要的一個(gè)因素了。

• 你喜歡聲明式HTML嗎？-> Angular
• 你喜歡使用模板引擎嗎？-> Backbone、CanJS或Ember
• 你喜歡固執(zhí)已見的框架嗎？-> Ember
• 你希望框架與最初的SmallTalk MVC模式完全吻合嗎？-> 沒有完全吻合的，或許CanJS最接近
• 你希望使用目前看來很酷的框架嗎？-> Ember、Angular

本項(xiàng)沒辦法打分。

算總分

好啦，把各框架所得分?jǐn)?shù)做個(gè)匯總吧。別忘了這只是我個(gè)人看法，如果你覺得哪一項(xiàng)打分有失偏頗，請(qǐng)務(wù)必告訴我。

（此處只是一個(gè)靜態(tài)圖表，單擊可以打開）

如果每一個(gè)因素的權(quán)重都一樣，那么這幾個(gè)框架確實(shí)難分高下。因此，我覺得最終決定很大程度上還是取決于你的個(gè)人偏好，或者必須要給每個(gè)因素賦予不同的權(quán)重才行。

聊聊Backbone（公平到此為止！）

我在這篇文章里始終盡量做到“一碗水端平”?？墒?，最后針對(duì)Backbone我還想再多說兩句，因?yàn)檫@些話如鯁在喉，不吐實(shí)在不快。

Backbone在兩年前是一個(gè)不錯(cuò)的庫，但我知道：今天已經(jīng)有了更好的選擇了。我也知道，很多人選擇Backbone其實(shí)僅僅因?yàn)槭褂盟娜硕啵@是個(gè)惡性循環(huán)。

Backbone為追求靈活性而拋棄了開發(fā)的便利性。但我覺得它實(shí)在太過了，功能嚴(yán)重缺乏，導(dǎo)致開發(fā)效率很低。沒錯(cuò)，有一大堆插件可以實(shí)現(xiàn)這樣那樣的功能，可這樣一來你不僅要學(xué)習(xí)Backbone，還得不斷學(xué)習(xí)怎么使用那些插件。

Backbone的大型社區(qū)和生態(tài)系統(tǒng)也很誘人，但隨著其他框架越來越受歡迎，這個(gè)優(yōu)勢(shì)也將慢慢消失。

正因?yàn)槿绱?，我?qiáng)烈建議大家選擇Backbone時(shí)要三思而后行。

原文鏈接：http://www.admin10000.com/document/1922.html