【JavsScript】JavaScript MVC框架PK：Angular、Backbone、CanJS與Ember

摘要：選擇JavaScript MVC框架很難。一方面要考慮的因素很是多，另外一方面這種框架也很是多，而要從中選擇一個合適的，還真得費一番心思。本文對JavaScript MVC框架Angular、Backbone、CanJS和Ember做了比較，供你們參考。

選擇JavaScript MVC框架很難。一方面要考慮的因素很是多，另外一方面這種框架也很是多，而要從中選擇一個合適的，還真得費一番心思。想知道有哪些JavaScript MVC框架能夠選擇？看看 TodoMVC吧。 

我用過其中4個框架：Angular、Backbone、CanJS和Ember。所以，能夠對它們做一比較，供你們參考。本文會涉及框架選型過程當中須要考慮的一系列因素，咱們逐一討論。 

 

每個因素咱們都會按照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

 

靈活性

有時候，框架配合一些現成的插件和庫來使用，可能要比使用框架原生同類功能效果更好，而這種插件和庫幾乎遍地都是（不下數百個），又各有特點。所以，可以把這些庫和插件整合到MVC框架中也很是重要。

Backbone是其中最靈活的一個框架，由於它的約定和主張最少。使用Backbone須要你本身做出不少決定。

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

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

得分

 

 

Angular	Backbone	CanJS	Ember
3	5	4	3

 

上手難度

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

 

開發效率

比較全面地掌握了一個框架以後，重點就轉移到了產出上。什麼意思呢？約定啊、戲法啊，反正要儘量快。

Angular

熟悉Angular以後，你的效率會很是高，這一點毋庸置疑。之因此我沒給它打最高分，主要由於我以爲Ember的開發效率彷佛更勝一籌。

Backbone 

Backbone要求你寫不少樣板（boilerplate ）代碼，而我認爲這徹底不必。要我說，這是直接影響效率的一個因素。

CanJS 

CanJS的開發效率屬於不快不慢的那種。不過，考慮到學習難度很低，所以適合早投入早產出的項目。

Ember 

Ember的開發效率數一數二。它有不少強制性約束，能夠幫你自動完成的事不少。而開發人員要作的，就是學習和應用這些約定，Ember會替你處理到位。

得分

 

 

Angular	Backbone	CanJS	Ember
4	2	4	5

 

 

社區支持

 

 

能輕易找到參考資料和專家幫忙嗎？

 

Backbone的社區很大，這是人所共知的事實。關於Backbone的教程也幾乎汗牛充棟，StackOverflow和IRC社區很是熱鬧。

 

Angular和Ember社區也至關大，教程什麼的一樣很多，StackOverflow和IRC也很熱鬧，但仍是比不上Backbone。

 

CanJS社區呢，相對小一些，好在社區成員比較活躍，樂於助人。我倒沒發現CanJS社區規模小有什麼負面影響。

得分

 

Angular	Backbone	CanJS	Ember
4	5	3	4

 

 

生態系統

 

 

有沒有插件或庫構成的生態系統？

 

提及插件和庫，Backbone的選擇是最多的，可用插件俯拾皆是，這一點讓其餘框架都可望不可即。Angular的生態圈加上Angular UI仍是很使人矚目的。我以爲Ember的下游生態雖然欠發達，但Ember自己很受歡迎， 因此前景十分樂觀。CanJS的下游支脈比較少見。

得分

 

Angular	Backbone	CanJS	Ember
4	5	2	4

 

 

文件大小

 

 

這個因素有時候很重要，特別是對於移動開發項目。

 

自身大小（無依賴，未壓縮）

 

 

 

Angular	Backbone	CanJS	Ember
80KB	18KB	33KB	141KB

 

 

 

 

 

Backbone最小，這一點也是最爲人們所津津樂道的。但不能只看庫自己的體積。

包含依賴的大小

 

80KB的Angular是惟一不須要其餘庫就能使用的。其餘三個框架則都對其餘庫有依賴。

 

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

 

CanJS至少須要Zepto，所以會達到57KB。

 

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

 

 

 

Angular	Backbone	CanJS	Ember
80KB	61KB	57KB	269KB

得分

 

Angular	Backbone	CanJS	Ember
4	5	5	2

性能

 

 

 

 

 

我不認爲性能是選擇框架的關鍵因素，由於這些框架在預期應用領域中的性能都不差。固然啦，具體還得看你作什麼項目。要是想開發遊戲，那性能是個重要因素。

 

雖然我見過，也親自作過一些性能對比（好比這個測試），但我並不徹底相信測試結果。很難說這種測試的方法和結果與實際項目吻合。

 

不過，據我所見所聞，CanJS的性能是最高的，並且在視圖綁定上格外突出。相對來講，我以爲Angular性能稍差，由於它執行對象的髒檢查（dirty checking），這一點就拖了它的後腿了。參見這裏。

 

得分

 

 

 

 

 

Angular	Backbone	CanJS	Ember
3	4	5	4

成熟度

 

 

 

 

 

這個框架成熟嗎，通過實際檢驗了嗎，有多少網站在用它呢？

 

使用Backbone的網站不可勝數。最近兩年，它的核心代碼沒怎麼改過，這是成熟的一個重要標誌。

 

Ember已經不是新框架了，但它的重大變動仍是常常有，前幾月剛剛穩定下來。所以，目前還不能說它是個成熟的框架。

 

Angular彷佛比Ember更穩定，驗證的示例也更多，但不能與Backbone相提並論。

 

CanJS好像還未經任何驗證，由於不知道有什麼網站在使用它。不過，CanJS其實也沒有看起來那麼弱不經風，它但是從JavaScriptMVC精簡來的。JavaScriptMVC是2008年就出現的一個庫，所以會有不少智慧結晶留傳下來。

得分

 

Angular	Backbone	CanJS	Ember
4	5	4	3

 

 

內存泄漏隱患

 

若是你想開發每次打開都得運行很長時間的單頁應用，這是必須得考慮的問題。你固然不但願本身的應用致使內存泄漏，這個問題很是現實。不幸的是，內存泄露很容易發生，而本身編寫的DOM事件監聽器則是重災區。

 

只要你守規矩，Angular、CanJS和Ember能把這個問題幫你解決好。Backbone則否則，它須要你本身手工來卸載。

 

得分

 

 

 

Angular	Backbone	CanJS	Ember
5	3	5	5

 

 

 

這恐怕是選擇框架時最重要的一個因素了。

 

本項沒辦法打分。

 

 

 

• 你喜歡聲明式HTML嗎？-> Angular
• 你喜歡使用模板引擎嗎？-> Backbone、CanJS或Ember
• 你喜歡執拗已見的框架嗎？-> Ember
• 你但願框架與最初的SmallTalk MVC模式徹底吻合嗎？-> 沒有徹底吻合的，或許CanJS最接近
• 你但願使用目前看來很酷的框架嗎？-> Ember、Angular

 

 

 

算總分

 

好啦，把各框架所得分數作個彙總吧。別忘了這只是我我的見解，若是你以爲哪一項打分有失偏頗，請務必告訴我。

 

（此處只是一個靜態圖表，單擊能夠打開） 

 

若是每個因素的權重都同樣，那麼這幾個框架確實難分高下。所以，我以爲最終決定很大程度上仍是取決於你的我的偏好，或者必需要給每一個因素賦予不一樣的權重才行。

 

英文：Sebastian's Blog

 

譯文：圖靈社區

 http://www.csdn.net/article/2013-04-25/2815032-A-Comparison-of-Angular-Backbone-CanJS-and-Ember