MVC框架PK:Angular、Backbone、CanJS與Ember
我用過其中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的參數反映出來，并監聽這些變化以便執行相應的操作。
- 視圖綁定：在視圖中使用可觀察對象，讓視圖隨著可觀察對象的變化而自動刷新。
- 雙向綁定：讓視圖也能把變化（如表單輸入）自動推送到可觀察對象。
- 部分視圖：包含其他視圖的視圖。
- 篩選列表視圖：用于顯示根據某些條件篩選出來的對象的視圖。
得分
根據上述功能，我打出的分數如下：
| Angular | Backbone | CanJS | Ember |
|---|---|---|---|
| 5 | 2 | 4 | 5 |
有一點必須指出，使用Backbone也能實現上述大多數功能，只是手工編碼量挺大的，有時候還要借助插件。這里的打分只考慮了框架核心是否支持某一功能。
靈活性
有時候，框架配合一些現成的插件和庫來使用，可能要比使用框架原生同類功能效果更好，而這種插件和庫幾乎遍地都是（不下數百個），又各有特色。因此，能夠把這些庫和插件整合到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相對而言是這里面最容易上手的?？纯此挥幸豁摰木W站（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 |
#p#
社區支持
能輕易找到參考資料和專家幫忙嗎？
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 |
文件大小
這個因素有時候很重要，特別是對于移動開發項目。
自身大?。o依賴，未壓縮）
| 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 |
內存泄漏隱患
如果你想開發每次打開都得運行很長時間的單頁應用，這是必須得考慮的問題。你當然不希望自己的應用導致內存泄漏，這個問題非?，F實。不幸的是，內存泄露很容易發生，而自己編寫的DOM事件監聽器則是重災區。
只要你守規矩，Angular、CanJS和Ember能把這個問題幫你解決好。Backbone則不然，它需要你自己手工來卸載。
得分
| Angular | Backbone | CanJS | Ember |
|---|---|---|---|
| 5 | 3 | 5 | 5 |
個人偏好
這恐怕是選擇框架時最重要的一個因素了。
- 你喜歡聲明式HTML嗎？-> Angular
- 你喜歡使用模板引擎嗎？-> Backbone、CanJS或Ember
- 你喜歡固執已見的框架嗎？-> Ember
- 你希望框架與最初的SmallTalk MVC模式完全吻合嗎？-> 沒有完全吻合的，或許CanJS最接近
- 你希望使用目前看來很酷的框架嗎？-> Ember、Angular
本項沒辦法打分。
算總分
好啦，把各框架所得分數做個匯總吧。別忘了這只是我個人看法，如果你覺得哪一項打分有失偏頗，請務必告訴我。
（此處只是一個靜態圖表，單擊可以打開）
如果每一個因素的權重都一樣，那么這幾個框架確實難分高下。因此，我覺得最終決定很大程度上還是取決于你的個人偏好，或者必須要給每個因素賦予不同的權重才行。
聊聊Backbone（公平到此為止?。?/h2>
我在這篇文章里始終盡量做到“一碗水端平”?？墒牵詈筢槍ackbone我還想再多說兩句，因為這些話如鯁在喉，不吐實在不快。
Backbone在兩年前是一個不錯的庫，但我知道：今天已經有了更好的選擇了。我也知道，很多人選擇Backbone其實僅僅因為使用它的人多，這是個惡性循環。
Backbone為追求靈活性而拋棄了開發的便利性。但我覺得它實在太過了，功能嚴重缺乏，導致開發效率很低。沒錯，有一大堆插件可以實現這樣那樣的功能，可這樣一來你不僅要學習Backbone，還得不斷學習怎么使用那些插件。
Backbone的大型社區和生態系統也很誘人，但隨著其他框架越來越受歡迎，這個優勢也將慢慢消失。
正因為如此，我強烈建議大家選擇Backbone時要三思而后行。
原文鏈接：http://www.admin10000.com/document/1922.html
