12 款優秀的 JavaScript MVC 架構評估

在最近的幾個月中，作者（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應用。

優點：強大的社區，還有大量的實力支援。例如它本身就較多地使用了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伺服器的程度。

優點：程式碼程式庫十分清晰，Binder 方法優良又簡單，耐用，流程化。

缺點：作者非常不喜歡這種“獨行俠”式的作風，更不用說這種加強單一控制器的主意了。與Knockout和Angular一樣，在組件嵌套的時候 遭受同樣的折磨。作者需要的不僅僅是模板，還更想要陳述式的可重用的模板架構。相比，Ember在架構之上擁有的是一個基於EMBER他們自己的邏輯（可 能是在控制器層上的）的整套組件能陳述式重用的方法。

贏家

最終，Ember.js是能滿足作者全部需求的唯一一款架構。最近作者將一個小的Backbone應用轉換成了Ember來實驗，除了一些效能方面的小問題之外，作者對於產生的程式碼程式庫更為欣慰。由Yehuda Katz支援，整個圍繞Ember.js技術討論社區也十分奇妙：這一定會是一個值得期待的好架構。

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

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

原文：The Top 10 Javascript MVC Frameworks Reviewed

來自: Web App Trend