【JavaScript】對比12 款優秀的JavaScript MVC/MVVC框架 你最喜歡Backbone or Ember

http://codebrief.com/2012/01/the-top-10-javascript-mvc-frameworks-reviewed/

目前基本因此後臺程序都是面向對象MVC模式開發，做爲Web前端開發的人來講，也是很須要的，那麼目前有沒有能夠借鑑的呢？
做者（Gordon L.Hempton）一直在尋求哪一種MVC框架最爲完美，他將目前能獲取到的全部框架都粗略地試了試，而後在文章中列出了每一種框架的狀況概要，在文末分享了做者通過對比以後最終的推薦產品。 

首先要特別說明一下，做者認爲如下四個功能是十分重要的： 
 

• UI Bindings（UI綁定）：做者想說的不只僅是模板，而是想談一種在底層模型出現變化時，視圖層可以自動相應地更新的陳述性方法。一旦您用過了支持UI Binding的框架（例如Flex）就很難放手回頭了。
• Composed Views（模塊化視圖）：與全部的軟件開發者同樣，做者也喜歡編寫模塊化、可重用的代碼。基於這樣的緣由，當給UI編程的時候，做者喜歡使用視圖的方法來創做（我的更偏好在模板層時使用），固然這樣也就須要擁有足夠豐富的視圖組件來支持。關於這一點有一個可重用的頁面小工具的範例。
• Web Presentation Layer（web表示層）：咱們是在爲web編寫程序，最不想要的就是Native風格的小工具；可是也沒有什麼理由來爲一個web框架來建立它本身的佈局管理器。HTML和CSS是目前解決樣式與佈局的最好的方法，他們被這樣應用着，框架也應該以這一點爲核心。
• Play Nicely With Others（兼容，友好）：不得不認可，jQuery是十分犀利的。做者不喜歡那種綁定着一個sub-par jQuery副本的框架，而直接推薦使用jQuery的那種框架纔是做者須要的。

候選方案 

下面這個表格列出了12個框架對於上述幾種特性的支持關係，在後面的部分會詳細敘述，您也能夠在以後的文章中點擊相應的連接來獲取更多的信息。 
 

1.  Backbone.js 

Backbone.js是web最火的框架，若是不瞭解它將步履維艱，衆多知名品牌均支持該框架，使人印象深入，天然地成爲做者最早進行嘗試的框架。做者用它來建造了一個Group Talent內部用行政管理方面功能的feature應用。 

Backbone（也稱爲 Backbone.js）是由 Jeremy Ashkenas 建立的一個輕量級庫，可用於建立 MVC 類應用程序。Backbone：

• 強制依賴於 Underscore.js，Underscore.js 是一個實用型庫
• 非強制依賴於 jQuery/Zepto
• 根據模型的變動自動更新應用程序的 HTML，有助於代碼維護
• 促進客戶端模板使用，避免了在 JavaScript 中嵌入 HTML 代碼

模型、視圖、集合和路由器是 Backbone 框架中的主要組件。在 Backbone 中，模型會存儲經過 RESTful JSON 接口從服務器檢索到的數據。模型與視圖密切關聯，負責爲特定 UI 組件渲染 HTML 並處理元素上觸發的事件，這也是視圖自己的一部分。

優勢：強大的社區，還有大量的實力支持。例如它自己就較多地使用了Underscore.js（也是一個強大的框架）。 

缺點：抽象功能不夠強，以及一些須要的功能還沒實現。整個框架十分輕量級，產出的結果是一大堆引用文件和樣板：並且應用的規模越大這一點就會越明顯。 

2.  SproutCore 1.x 

SproutCore最開始是蘋果公司用於其iCloud上面的。除了名字起得很很差以外，它其實是一個很是優秀的框架，也是最大的框架之一。 

優勢：支持綁定，忠實的社區粉絲，優秀的feature不少。 

缺點：過於死板，難以去除無用的feature，強制使用一種Native風格的範例，嚴重的問題在於該框架不容許使用HTML來作佈局。 

3.  Sammy.js 

Sammy是做者偶然發現的一個比較小的框架，由於它太簡化了，基本不能佔據列表的席位。其核心feature是一個路由系統，讓應用與AJAX進行交換。 

優勢：簡單的學習曲線，與服務器端的app集成更加容易。 

缺點：太過於簡單，對於大型應用就有些捉襟見肘。 

4.  Spine.js 

器如其名，Spine顯然是受到Backbone的強烈影響，像Backbone同樣也是一個很是輕量級的框架，遵循類似的模型。 

優勢：輕量級，文檔作得很好。 

缺點：從根本上就有缺陷。Spine的一個核心概念是「一個堅果外殼中的一堆異步的UI集，這意味着UI應該是在理想化條件下永遠不會阻塞的」。而作了一系列的非阻塞式實時應用以後，做者能夠說這簡直是不現實的，除非後端是像Operational Transformation之類的。 

5.  Cappuccino 

Cappuccino是一款更加獨特的框架，自帶編程語言Objective-J，還能嘗試着在瀏覽器中仿真Cocoa。 

優勢：大型的構想出的框架，良好的社區環境，強大的繼承模型。 

缺點：在您全部能用Javascript仿真的語言以外，Objective-C是做者最不想選用的。它起源一位iOS開發人員，做者到如今還沒想明白用瀏覽器編寫Objective-J是什麼意思。 

6.  Knockout.js 

K.O.是一個MVVM框架，受到其支持者的大量好評。它強調陳述式UI綁定和自動UI刷新。 

優勢：支持綁定，文檔作得出色，引導系統超級贊。 

缺點：綁定語法晦澀，缺少堅實的視圖組件層次結構。做者但願可以輕鬆地重用組件，也以爲定義成一個MVVM框架是有害的。這些框架中基本沒有MVC，但都是（MVP,MVVM之類的）的變種。 

7.  Javascript MVC 

做者的興趣是充分地披露各類框架，對Js MVC並無花太多時間來評估。 

優勢：堅實的社區基礎和積累。 

缺點：基於Strings的繼承模型很尷尬，控制器太接近視圖又缺少綁定機制。命名方式太不受保護了，至關於這樣的狀況：若是RoR能夠說是「Rudy web Framework」的簡寫。 

8.  Google Web Toolkit 

GWT是一系列的客戶端工具包，除了框架以外還包含不少其餘工具。它能夠把java語言編譯成Javascript，支持標準Java庫的一個子集，最初是Google公司使用在Wave上面的。 

優勢：綜合寬泛的框架，擁有強大的社區支持。基於Java的堅實組件繼承模型，在巨型客戶端應用上表現出色。 

缺點：除了Google說的以外，GWT將經不住時間的檢驗。就好像最初DART那樣，很明顯Java不是web的將來。更嚴重的是，客戶端對於Java的抽象有一點不合適。 

9.  Google Closure 

若是說Google Closure僅僅是一個js框架，倒不如說更像是一個工具包。附帶編譯器和優化器。 

優勢：由Google用在其不少主流app上面。良好的基於組件的UI編寫系統。 

缺點：不支持UI綁定。 

10.  Ember.js 

Ember（以前是SproutCore 2.0）是競爭者中的新丁。它是一個嘗試：從SproutCore2.0中抽取分離其核心feature並轉變成爲一個更加緊湊的模型框架，更加適合web。 

優勢：特別豐富的模板系統，擁有可編寫的視圖和UI綁定。 

缺點：因爲太新，文檔跟不上。 

11.  Angular.js 

Angular是在做者發佈評估結果以後才發現的一個很好的框架，由Googler開發，包含了不少有趣的設計選擇。 

優勢：關於模板的範圍和控制器的設計考慮的很周到。具備依賴注入系統（做者本人是一個iOS粉絲）。支持豐富的UI綁定語法，從而使得過濾和轉換這樣的工做開銷很小。 

缺點：代碼庫很不健全，也不夠模塊化。視圖也不夠模塊化（關於這點在Batman.js的缺陷中討論的更加細緻） 

12.  Batman.js 

Batman由Shopify創做，是另外一款與Knockout和Angular具備類似脈絡的框架。Batman擁有良好的UI綁定系統，是基於HTML屬性的。Batman是惟一的一款使用慣用語法Coffeescript編寫的框架，而且緊密地與NODE.Js集成在一塊兒，甚至能夠到擁有其（可選的）Node.js服務器的程度。 

優勢：代碼庫十分清晰，綁定方法優良又簡單，耐用，流程化。 

缺點：做者很是不喜歡這種「獨行俠」式的做風，更不用說這種增強單一控制器的主意了。與Knockout和Angular同樣，在組件嵌套的時候遭受一樣的折磨。做者須要的不只僅是模板，還更想要陳述式的可重用的模板框架。相比，Ember在框架之上擁有的是一個基於EMBER他們本身的邏輯（多是在控制器層上的）的整套組件能陳述式重用的方法。 

贏家 

最終，Ember.js是能知足做者所有需求的惟一一款框架。最近做者將一個小的Backbone應用轉換成了Ember來實驗，除了一些性能方面的小問題以外，做者對於產生的代碼庫更爲欣慰。由Yehuda Katz支持，整個圍繞Ember.js技術討論社區也十分奇妙：這必定會是一個值得期待的好框架。 

固然這個列表仍是不夠全面。幾乎全部這些框架都被發現被人罵得臭名昭著體無完膚，或者被Hacker News點名。 

你用的MVC框架是哪一款呢？ 

原文：The Top 10 Javascript MVC Frameworks Reviewed
via