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

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

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

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

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

1. Angular.js

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

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

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

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

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

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

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

2. React.js

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

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

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

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

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

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

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

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

官網(wǎng)有更多的信息－facebook.github.io/react

3. Ember.js

EmberJS 也是一個功能強大的 MVC 框架。Ember 由 Yehuda 在 2011 年發(fā)布了第一個開源版本，遵循MIT 許可。EmberJS 在創(chuàng)建交互應用方面可以同 Angular，React 一較高下，也擁有非?；钴S的社區(qū)。

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

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

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

關(guān)于更多 Ember 的信息請看 emberjs.com

4. Aurelia.js

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

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

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

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

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

通過官網(wǎng)我們可以了解更多的信息－aurelia.io

5. Meteor.js

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

Meteor 是 Meteor 開發(fā)組創(chuàng)造的，在 2012 年發(fā)布了一個開源版本，遵循 MIT 許可。

發(fā)布以來，MeteorJS 的生態(tài)圈迅速的發(fā)展壯大，它的社區(qū)業(yè)非常地活躍，相關(guān)的資料，教程和第三方的包很多，這些讓 MeteorJS 變的非常強力。

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

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

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

我們在官網(wǎng)了解到更多的信息-meteor.com

6. Backbone.js

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

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

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

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

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

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

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

Backbone 的更多信息請看 backbonejs.org

7. Polymer.js

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

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

Polymer 使用的是包含 web components 在內(nèi)的瀏覽器技術(shù)，它開創(chuàng)了自定義 HTML 標簽的一套體系。

有關(guān) Polymer 的更多信息請看 polymer-project.org

8.Knockout.js

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

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

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

9.Vue.js

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

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

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

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

關(guān)于 VueJs 的更多信息請看-vuejs.org

10.Mercury.js

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

Mercury 由Raynos 創(chuàng)建，遵循 MIT 許可。它迅速的火了起來，吸引了大量的開發(fā)者關(guān)注。

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

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

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

總結(jié)

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

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

文章中提到的框架是當今市場中最優(yōu)秀的框架。請在評論中寫下你的經(jīng)驗和你所用的框架。

關(guān)于作者：

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

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