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

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

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

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

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

1. Angular.js

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

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

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

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

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

最近發(fā)布的 ReactJS 有超越 Angular 的勢(shì)頭，不過(guò) Angular 牢牢地把持著領(lǐng)先地位，人們對(duì)它的需求有增無(wú)減。Angular 能夠不斷地成長(zhǎng)是因?yàn)?br> 每一個(gè)版本都會(huì)有優(yōu)化和先進(jìn)的功能。

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

2. React.js

Facebook 和 Instagram 的用戶界面為什么這么給力呢？因?yàn)樗鼈冇玫氖?React.js。我們借此可以感受到 ReactJS 在創(chuàng)建大規(guī)模動(dòng)態(tài)應(yīng)用方面的強(qiáng)大能力。

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

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

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

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

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

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

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

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

3. Ember.js

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

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

Ember 可以躋身優(yōu)秀的框架之列，是因?yàn)樗粩嗟卦鎏韽?qiáng)大的功能。它引入的 Fastboot.js 模塊提供了服務(wù)端渲染的能力，這個(gè)思路有點(diǎn)類似 React。

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

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

4. Aurelia.js

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

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

雖然 AureliaJS 剛發(fā)布不久，但是如果你在尋找 JavaScript 框架，請(qǐng)認(rèn)真考慮它。因?yàn)樗滋N(yùn)深厚，并由一只非常專業(yè)的團(tuán)隊(duì)維護(hù)著。

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

AureliaJS 不依賴其他的庫(kù)，除了一些必要的 polyfill 沒(méi)有額外的依賴。

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

5. Meteor.js

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

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

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

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

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

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

我們?cè)诠倬W(wǎng)了解到更多的信息-meteor.com

6. Backbone.js

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

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

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

backbone 非常靈活，因?yàn)樗峁┝艘粋€(gè)最小的功能集合，開發(fā)者在此基礎(chǔ)上二次開發(fā)，自己寫代碼或者使用第三方的庫(kù)都可以。還可以在 backbone 的基礎(chǔ)上構(gòu)建一個(gè)全功能的框架。

過(guò)去的幾個(gè)月中，backbone 使用者的增長(zhǎng)速度緩慢，遠(yuǎn)遠(yuǎn)落后Angular， Ember 還有新出道的 React 的增速。

主要是因?yàn)?backbone 版本迭代慢，缺少其他框架提供的強(qiáng)大功能。

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

Backbone 的更多信息請(qǐng)看 backbonejs.org

7. Polymer.js

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

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

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

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

8.Knockout.js

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

Knockout 曾經(jīng)流行過(guò)，不過(guò)現(xiàn)在與 Angular, Ember 還有 Backbone 相比，用戶增速非常緩慢。原因很簡(jiǎn)單，因?yàn)樵谠黾有碌墓δ芎透倪M(jìn)現(xiàn)有功能方面相差太多。

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

9.Vue.js

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

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

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

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

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

10.Mercury.js

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

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

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

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

了解更多請(qǐng)看-githubcom/Raynos/mercury

總結(jié)

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

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

文章中提到的框架是當(dāng)今市場(chǎng)中最優(yōu)秀的框架。請(qǐng)?jiān)谠u(píng)論中寫下你的經(jīng)驗(yàn)和你所用的框架。

關(guān)于作者：

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

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