作者： noeticsunil | 最后更新：2016.03.05 | 譯者：CoolTiger
原文鏈接

多年以來，我們苦逼地使用原生 JavaScirpt 和 jQuery 開發復雜的界面，開發和維護的苦真是一言難盡。

框架能夠讓開發者抽出更多的精力專注在交互功能上，不用太操心代碼的結構和組織。

大多數框架使用了 MVC 模式，并增強了代碼的擴展性，重用性和可維護性。MVC 并不是唯一的準則，還有一些其他的模式，比如 MV＊， MVVM， MVP。 要根據項目的需求應用恰當的模式。

最近一段時間 JavaScirpt 框架層出不窮，其中有十個最棒的，它們高端大氣，功能豐富，廣受歡迎，讓我們可以搞定那些難搞的單頁應用。

1. Angular.js

AngularJS，Google 的親兒子，是 JavaScript 框架中一面旗幟，在2009年發布第一版，遵循 MIT 許可開源。發布以來，Angular 的生態圈就以驚人的速度壯大。它自稱擁有最大的開發者社區，也是最常用的框架。

Angular 為 HTML 增添了開發動態交互頁面時所需的全部功能，其中包括在 HTML 元素的屬性上添加 Angular 的指令。用 Angular 擴展 HTML 太方便了，把默認指令或者自定義指令放在某個 div 的屬性上就可以了。

Angular 負責編譯和渲染 HTML，并生成用戶界面， 在此過程中，它操作 DOM 并實現指令中的全部功能。不過，指令只是 Angular 強大功能的一部分。

雙向數據綁定是 Angular 的核心功能。用戶在界面上戳戳點點或是輸入點什么的時候，改變了應用中的 view，此時 model(JavaScript objects) 會跟隨著 view 一起發生變化，model 中的代碼邏輯得到執行，最終將更新 DOM 結構。

這個過程反過來也一樣的，當某些因素引起 model 變化時（比如使用服務端的消息推送），view 會重新渲染。這種方式大體上根治了手工維護 DOM 的痛苦。

最近發布的 ReactJS 有超越 Angular 的勢頭，不過 Angular 牢牢地把持著領先地位，人們對它的需求有增無減。Angular 能夠不斷地成長是因為
每一個版本都會有優化和先進的功能。

我們可以訪問 Angular 的官方網張了解更多的信息-angularjs.org

2. React.js

Facebook 和 Instagram 的用戶界面為什么這么給力呢？因為它們用的是 React.js。我們借此可以感受到 ReactJS 在創建大規模動態應用方面的強大能力。

React 在 2013 年發布了第一個的開源版本，它遵循 BSD 許可。一經發布社區規模就迅速擴大，必須承認它是當今發展最快 JavaScript 框架。隨手就可以找到非常多的資料，教程和 React 的組件庫。

ReactJS 最擅長高效地渲染復雜的用戶界面。它的基本原理是一個稱為 virtual DOM 的東西。virtual DOM 可以在客戶端或服務端渲染，并進行通信。

在數據處理變的復雜和動態之后，客戶端的 DOM 操作的性能受到影響。
React 的解決辦法是：

• 使用 virtual DOM 在服務端進行 DOM 渲染。
• 比較真實的 DOM 和 virtual DOM，并標記兩者的差異。
• 只更新那些發生變化的 DOM 節點而不是重繪完整的 DOM 樹。

React 另一個優勢在于響應式組件帶來了很好的重用性，React 組件庫創建后可以在多個項目中共用，也能供大眾使用。

一個很好的例子是 Material－UI，它用 React 組件實現了 Google 的 material design。

去 Instagram 看看會有更直觀的感受，它的界面完全由 React JS 生成。

官網有更多的信息－facebook.github.io/react

3. Ember.js

EmberJS 也是一個功能強大的 MVC 框架。Ember 由 Yehuda 在 2011 年發布了第一個開源版本，遵循MIT 許可。EmberJS 在創建交互應用方面可以同 Angular，React 一較高下，也擁有非常活躍的社區。

Ember 和 Angular 一樣使用了雙向數據綁定，也就是說，當 model 變化時更新 view；當 view 變化時更新 model，view 和 model 一直保持同步。

Ember 可以躋身優秀的框架之列，是因為它不斷地增添強大的功能。它引入的 Fastboot.js 模塊提供了服務端渲染的能力，這個思路有點類似 React。

Ember 想要將 Angular 雙向綁定和 React 服務端渲染的優點繼承過來。Ember 社區使用這種方式持續不斷地給它增加優秀地功能，我十分確信 Ember 會一直流行下去。

關于更多 Ember 的信息請看 emberjs.com

4. Aurelia.js

AureliaJS 由 Rob Eisenberg 為首的團隊創建，團隊中大部分的人來自 Angular 和 Durandal。它是 Durandal 公司旗下的一個開源的產品。該公司是一個創業公司，提供下一代 web 開發所用的庫，工具和框架。

AureliaJS 是 2015 年 1 月發布的，不過已經在用于生產環境。它是 Durandal 的繼承者，據 Eisenberg 說其實就是 Durandal 的下一個版本。 Durandal，Angular 1還有Angualr 2 的開發者可以輕松地遷移到 Aurelia 。

雖然 AureliaJS 剛發布不久，但是如果你在尋找 JavaScript 框架，請認真考慮它。因為它底蘊深厚，并由一只非常專業的團隊維護著。

AureliaJS 的模塊化程度非常高，由眾多相互獨立的，規模較小的庫組成。我們可以在項目中使用整個框架，也可以僅使用一些必備的庫，或者是擴展所用包來構建自己的框架。

AureliaJS 不依賴其他的庫，除了一些必要的 polyfill 沒有額外的依賴。

通過官網我們可以了解更多的信息－aurelia.io

5. Meteor.js

喜歡只使用 JavaScript 開發完整的 web 應用嗎？MeteorJS 正是這個神奇的全棧開發平臺，讓我們可以迅速地開發移動應用和網頁應用。MeteorJS非常給力，擁有我們需要的所有功能，包括前端渲染，后端開發，業務邏輯處理和數據庫管理。

Meteor 是 Meteor 開發組創造的，在 2012 年發布了一個開源版本，遵循 MIT 許可。

發布以來，MeteorJS 的生態圈迅速的發展壯大，它的社區業非常地活躍，相關的資料，教程和第三方的包很多，這些讓 MeteorJS 變的非常強力。

MeteorJS 最棒的地方是僅 javaScript 開發就夠了，不用花費時間去學習其他的語言。另外 MetrorJS 是模塊化的，包和庫可以按需加載。

服務端的代碼運行在 nodejs 上，使用 MeteorJS 就能操作數據庫，全都是 JavsScript， MeteorJS 是實時的 web 應用。

性能方面，數據庫中的改變都會實時得反映在 UI 上，避免了不同語言間切換，減少了服務器的響應時間。

我們在官網了解到更多的信息-meteor.com

6. Backbone.js

是不是想要一個輕量又包含所有功能的 JavaScript 框架呢？Backone.JS 正是這樣的。 Jeremy Ashkenas 在 2010 年發布了它的一個開源版本，遵循 MIT 協議。

backbone 功能強大并應用廣泛，Pinterest，Foursquare，Walmart，DIsqus 和 Delicious 這些大公司都在使用它。這僅是用戶中的一小部分，由于用戶數量巨大，無法羅列出來。

backbone 的優勢是它比較簡單，很小并容易上手。使用 backbone 開發可以說干就干。

backbone 非常靈活，因為它提供了一個最小的功能集合，開發者在此基礎上二次開發，自己寫代碼或者使用第三方的庫都可以。還可以在 backbone 的基礎上構建一個全功能的框架。

過去的幾個月中，backbone 使用者的增長速度緩慢，遠遠落后Angular， Ember 還有新出道的 React 的增速。

主要是因為 backbone 版本迭代慢，缺少其他框架提供的強大功能。

盡管還有人使用 backbone，不過更多的作為輔助框架而不是主要的框架。

Backbone 的更多信息請看 backbonejs.org

7. Polymer.js

Polymer.js 是一個與眾不同的框架，由 google 在 2013 年發布。Polymer 使用了 web components 來增強 HTML 的功能。

Web Components 是由 W3C 發布的一項瀏覽器技術，用來創建定制的 HTML 標簽。比如 <audio> 是一個標準的 HTML5 元素，通過使用 web components 和相關的技術可以生成一個自定義的標簽，比如說<my-audio>。

Polymer 使用的是包含 web components 在內的瀏覽器技術，它開創了自定義 HTML 標簽的一套體系。

有關 Polymer 的更多信息請看 polymer-project.org

8.Knockout.js

knockoutJS 由 Steve Sanderson 在 2010 年發布了第一個開源版本，遵循 MIT 許可。Knockout 依照的是 MVVM 模式，這讓它變的與 Ember 還有 Angular 不太一樣。

Knockout 曾經流行過，不過現在與 Angular, Ember 還有 Backbone 相比，用戶增速非常緩慢。原因很簡單，因為在增加新的功能和改進現有功能方面相差太多。

社區的開發者正在慢慢地轉向 React 還有 Angular 的方向發展。Knockout 底蘊深厚，如果有人愿意接手它，并為它增加最新的技術，它還有希望重現輝煌。
我們可以了解更多的信息－knockoutjs.com

9.Vue.js

Vue.js 的開發者是尤小右，2014 年發布了第一個開源版本，遵循 MIT 許可。

VueJs 是個小鮮肉，吸引了很多開發者關注。VueJs 使用了 MVVM 模式，它的API 非常簡單。VueJs 的設計精簡至極，為開發者精心準備了幾個必需的模塊。

VueJs 參考了 AngularJS, ReactiveJs, konckoutJS 和 RivetsJS，使用雙向的數據綁定更新 model 和 view。

目前來說，Vue 并不能同 Angular 還有 Ember 一較高下，但它很有潛力成為日后的主流框架，屆時將獲得相應的占有率。發布 10 個月以來它牢牢地站穩了腳跟，現在由尤小右維護。

關于 VueJs 的更多信息請看-vuejs.org

10.Mercury.js

我們身處 JavaScript 框架大發展的時期，這種狀況前所未有。我的 top ten 名單里也給新晉者留著一個位置，這就是 Mercury.js，它剛剛發布但前景廣闊。

Mercury 由Raynos 創建，遵循 MIT 許可。它迅速的火了起來，吸引了大量的開發者關注。

Mercury 應該是借鑒 react 并使用了虛擬 DOM。它是現代化的框架，完全模塊化，也可以按照需要擴展。

想一下這幾個概念，壓縮體積小，模塊化，高效還有廣受歡迎，Mercury 因此占據了當今十佳 JavaScript 框架的一個位置。

了解更多請看-githubcom/Raynos/mercury

總結

雖然 JavaScript 框架出現的時間不長，但在過去的幾年中發展迅速。JavaScript 框架是創建復雜用戶界面的首選，尤其是創建單頁應用時。

不同的框架間有不同的概念和方法，但殊途同歸，都在試圖解決構建復雜應用時的通用問題，讓單頁應用變的更易用和便捷。

文章中提到的框架是當今市場中最優秀的框架。請在評論中寫下你的經驗和你所用的框架。

關于作者：

Sunil 是 noeticforce.com 的創始人和特約編輯。他的文章里包含了所有能夠使移動應用，web 應用，網站變的更現代化。是一位富有激情的開發者，他使用 Python, Swift, JavaScript, PHP, Java, Android & iOS ，也包括 HTML/CSS。

如果你喜歡這個文章，可以在 Twitter 上關注 noeticforce，也可以訂閱 RSS。