多年來(lái)，業(yè)界已經(jīng)發(fā)布了大量 JavaScript 框架，怎樣進(jìn)行選擇可能是一個(gè)挑戰(zhàn)。如果你感到困惑，不知道應(yīng)該選哪個(gè)或者究竟哪個(gè)適合你，那么我已經(jīng)幫你解決了問(wèn)題。在本文中，千鋒廣州前端小編將列出用來(lái)構(gòu)建 Web 應(yīng)用程序的前10個(gè) JavaScript 框架。

10. Aurelia

Aurelia 是一個(gè)開(kāi)源的現(xiàn)代 JavaScript 模塊工具箱，其有助于 Web 和移動(dòng)應(yīng)用程序的發(fā)展。它也被稱為“下一代框架”。該框架自推出以來(lái)一直受到廣泛認(rèn)可。 Fileee、Freska、Ordami 和 BTEK Software 等公司以及800多個(gè)網(wǎng)站都使用了 Aurelia。

不要忘記，Aurelia 是唯一允許開(kāi)發(fā)人員使用原生 TypeScript 或 JavaScript 構(gòu)建組件的框架。

下面我列出了 Aurelia 的一些主要功能：

多語(yǔ)言支持：Aurelia 的 API 經(jīng)過(guò)精心設(shè)計(jì)，可以用于當(dāng)今和未來(lái)最實(shí)用的 Web 編程語(yǔ)言。 Aurelia 支持 ES5、ES2015、ES2016 和 Typescript，它非常有用，并能夠?yàn)槟闾峁└叨鹊撵`活性。

模塊框架：Aurelia 不是采用單一框架的方式，而是由較小的、專注的模塊組成。把它們放在一起可以組成功能齊全的框架，也可以通過(guò)自定義構(gòu)建可選擇的方案。

整潔的文檔：Aurelia 提供了一個(gè)非常詳細(xì)并有用的文檔集，可以幫助所有的開(kāi)發(fā)人員。它以良好的文檔維護(hù)而聞名。

可擴(kuò)展的 HTML：Aurelia 的可擴(kuò)展 HTML 編譯器允許你創(chuàng)建自定義 HTML 元素，可以向現(xiàn)有元素中添加自定義屬性并控制模板生成，所有這些都完全支持動(dòng)態(tài)加載、數(shù)據(jù)綁定和高性能批量渲染。

9. Polymer

Polymer 是一個(gè)由 Google 維護(hù)的開(kāi)源 JavaScript 庫(kù)，用于使用 Web 組件構(gòu)建 Web 應(yīng)用。目前，有超過(guò)3000個(gè)網(wǎng)站正在使用聚合物，比如virustotal.com、rogers.com、zeplin.io等。

與其他 JavaScript 框架不同，Polymer 讓開(kāi)發(fā)人員構(gòu)建組件時(shí)去利用 Web 中存在的功能。它是第一個(gè)利用 Web 組件來(lái)對(duì)應(yīng)用進(jìn)行交互式構(gòu)建的庫(kù)。

Polymer 的關(guān)鍵特性：

Web 組件：Polymer 構(gòu)建在 Web 組件的思想之上。 Web 組件是一組 w3c 標(biāo)準(zhǔn)，由幾種不同的 Web 技術(shù)組成，其中包括自定義元素。這些組件是瀏覽器的一部分，所以你不需要任何第三方工具和庫(kù)，比如 jQuery。

單向和雙向數(shù)據(jù)綁定：它提供單向和雙向數(shù)據(jù)綁定。Polymer 旨在支持在單向和雙向流動(dòng)的數(shù)據(jù)。

本機(jī)瀏覽器：Polymer 使用本機(jī)瀏覽器技術(shù)，而不是依賴于自定義 JavaScript 庫(kù)。Polymer 的 DOM 層最接近本機(jī) JavaScript 層。

自定義元素：它允許使用 HTML、CSS 和 JavaScript 輕松創(chuàng)建自定義元素，以便向元素添加交互。 Polymer.js 提供了創(chuàng)建自定義 HTML 元素的最簡(jiǎn)單方法，因?yàn)樗膸?kù)是基于 Web 標(biāo)準(zhǔn) API 構(gòu)建的。

8. Meteor

Meteor 是一個(gè)用 NodeJS 編寫的免費(fèi)開(kāi)源 JavaScript 框架。它允許進(jìn)行快速原型設(shè)計(jì)并生成跨平臺(tái)代碼。它在市場(chǎng)上越來(lái)越受歡迎，超過(guò) 13,000 個(gè)網(wǎng)站使用了 Meteor。像mtv.com、meteofrance.com等網(wǎng)站利用 Meteor 來(lái)構(gòu)建他們的用戶界面。

Meteor 的主要特性：

全棧：Meteor 為開(kāi)發(fā)和部署 Web 應(yīng)用提供了全棧解決方案。 Meteor 捆綁了幾個(gè)內(nèi)置功能，如反應(yīng)式模板、自動(dòng) CSS 等。

智能包：為你的應(yīng)用開(kāi)發(fā)登錄系統(tǒng)可能會(huì)很麻煩。但 Meteor 不會(huì)。 Meteor 軟件包可以輕松添加用戶帳戶，還有 React 之類的 JavaScript 庫(kù)等。最好方便的是，添加這些類型的智能包很容易，只需在終端中敲幾下鍵盤就可以了。

實(shí)時(shí)網(wǎng)絡(luò)應(yīng)用：Meteor 是構(gòu)建實(shí)時(shí)程序的完美解決方案。從數(shù)據(jù)庫(kù)到模板所有的層都會(huì)自動(dòng)更新。這意味著無(wú)需刷新頁(yè)面即可查看更新。對(duì)文檔的任何修改都會(huì)立即保存。這使得 Meteor 成為實(shí)時(shí)協(xié)作的完美解決方案。

單一語(yǔ)言開(kāi)發(fā)：Meteor 允許在前端和后端使用相同的代碼，可用于移動(dòng)和 Web 應(yīng)用。它可以杜絕安裝和配置不同的庫(kù)、模塊管理器、API、驅(qū)動(dòng)程序等。這大大的節(jié)省了開(kāi)發(fā)人員的時(shí)間，因?yàn)樗麄儾恍枰诜?wù)器語(yǔ)言和 JavaScript 之間執(zhí)行上下文切換。

7. Ember

Ember是一個(gè)開(kāi)源的 JavaScript Web 框架，它允許開(kāi)發(fā)人員通過(guò)將最佳實(shí)踐合并到框架中來(lái)構(gòu)建可伸縮的單頁(yè)面 Web 應(yīng)用。 Ember 被評(píng)為最佳的 JavaScript 客戶端框架，其主要競(jìng)爭(zhēng)對(duì)手是 React 和 AngularJS。目前超過(guò) 6000 個(gè)網(wǎng)站正在使用 ember。僅舉幾例：nasa.gov、tutorialspoint.com 等。

Ember 的一些主要特性：

Web開(kāi)發(fā)的未來(lái)：在 Babel JavaScript 轉(zhuǎn)換器的幫助下，Ember 允許開(kāi)發(fā)人員使用未來(lái)的 JavaScript 標(biāo)準(zhǔn)并將其進(jìn)行轉(zhuǎn)換為目前瀏覽器支持的代碼。不知道 Babel 是什么？ Babel 是一個(gè) JavaScript 轉(zhuǎn)換器，允許開(kāi)發(fā)人員現(xiàn)在使用下一代 JavaScript 代碼。另外 Babel 受益于眾多插件，并且與 Ember、Rails、Sails 和 Meteor 等框架兼容。

Ember cli：Ember 和 Ember-CLI 完全是兩個(gè)不同的東西，但如果沒(méi)有另一個(gè)則兩者都不完整。 Ember-CLI 是一個(gè)命令行實(shí)用程序，它與 Ember 框架的軟件棧一起提供。 Ember-CLI 是一種強(qiáng)大的生產(chǎn)力工具，支持CoffeeScript、Handlebars、LESS 和 Sass 等。

Ember 模板：Ember 的模板內(nèi)置于 Ember 的 UI 中，這些模板使用 Handlebars 模板語(yǔ)言編寫。 Handlebars 以其使用雙花括號(hào)命名，它可以使開(kāi)發(fā)人員寫更少的代碼。模板在 Ember 中提供了許多功能，例如組件、插口和表達(dá)式等。

CoC：它的唯一目的是速度和“把事情搞定”的理念，這對(duì)于那些總是努力超越競(jìng)爭(zhēng)對(duì)手的初創(chuàng)公司來(lái)說(shuō)是一個(gè)巨大的推動(dòng)力。Ember 有關(guān)于其結(jié)構(gòu)的最佳實(shí)踐，這意味著開(kāi)發(fā)人員可以更專注于實(shí)現(xiàn)業(yè)務(wù)，而不是通過(guò)繁瑣的代碼重新發(fā)明輪子。有更多的成果，而不是藍(lán)圖。

6. NodeJS

Node.js 是一個(gè)基于 Google Chrome 的 JavaScript 引擎構(gòu)建的開(kāi)源服務(wù)器端平臺(tái)。使用 NodeJS 的網(wǎng)站數(shù)量已超過(guò) 84,000 個(gè)。它是下載量最大的用于執(zhí)行 JavaScript 代碼的跨平臺(tái)運(yùn)行時(shí)環(huán)境之一。

Node.js 的主要特性：

非阻塞：Node.js 庫(kù)的所有API都是異步的，即非阻塞的。這意味著基于 Node.js 的服務(wù)器永遠(yuǎn)不會(huì)等待 API 返回?cái)?shù)據(jù)。服務(wù)器在調(diào)用它之后移動(dòng)到下一個(gè) API，并且事件的通知機(jī)制幫助服務(wù)器從先前的 API 調(diào)用獲得響應(yīng)。

單線程：Node.js 使用帶有事件循環(huán)的單線程模型。事件機(jī)制可幫助服務(wù)器以非阻塞方式響應(yīng)，從而使服務(wù)器具有高度可伸縮性，而傳統(tǒng)服務(wù)器則創(chuàng)建有限的線程來(lái)處理請(qǐng)求。與 Apache HTTP Server 等傳統(tǒng)服務(wù)器相比，Node.js 使用的單線程程序可以為更多的請(qǐng)求提供服務(wù)。

快速：NodeJS 建立在Google Chrome 的 V8 引擎之上。 Google 的 V8 引擎確保 Node.js 庫(kù)以極快的速度執(zhí)行其代碼。

數(shù)據(jù)流：NodeJS 程序從不緩沖任何數(shù)據(jù)，它們只是以數(shù)據(jù)塊的形式輸出數(shù)據(jù)。這樣 NodeJS 可以提供更快的服務(wù)。

5. BackboneJS

BackboneJS 是一個(gè)輕量級(jí) JavaScript 庫(kù)，用來(lái)開(kāi)發(fā)和構(gòu)建在 Web 瀏覽器中運(yùn)行的客戶端應(yīng)用。與其他框架不同，Backbone 讓開(kāi)發(fā)人員負(fù)責(zé)選擇最適合當(dāng)前項(xiàng)目的工具。目前，超過(guò)50萬(wàn)個(gè)網(wǎng)站正在使用 Backbone，其中包括tumblr.com、espn.com、soundcloud.com等等。

Backbone 的主要特性：

分離的業(yè)務(wù)和UI邏輯：Backbone 可以幫助你把自己的業(yè)務(wù)邏輯與用戶界面分開(kāi)，這是非常重要的一點(diǎn)。當(dāng)兩者糾纏在一起時(shí)，修改將會(huì)變得很難。當(dāng)邏輯不依賴于 UI 時(shí)，你的界面會(huì)變得更加易用。

事件驅(qū)動(dòng)的通信：當(dāng)項(xiàng)目不斷增長(zhǎng)時(shí)，jQuery 聲明和回調(diào)將變得更加復(fù)雜，代碼變得更加混亂。 Backbone.js 通過(guò)在視圖和模型之間提供事件驅(qū)動(dòng)的通信來(lái)克服這個(gè)問(wèn)題。

更少的代碼：約定是引入通用編碼風(fēng)格的好方法，而無(wú)需提供大量的編碼標(biāo)準(zhǔn)。你遵守的 backbone 約定越多，編寫代碼的次數(shù)就越少，反過(guò)來(lái)代碼也會(huì)變得更加標(biāo)準(zhǔn)化，并具有可讀性。

與后端同步：由于其對(duì) RESTful API 的出色支持，BackboneJS 中的模型可以輕松地與后端綁定。如果 API 設(shè)計(jì)正確，則 backbone 可以直接通過(guò)訪問(wèn)這些操作來(lái)進(jìn)行讀取、寫入和刪除操作。

4. jQuery

Jquery 是最古老的 JS 框架之一。這個(gè)框架已經(jīng)存在了 13 年之久，而且它仍然很強(qiáng)大。那么什么是 jQuery？

jQuery 是一個(gè)快速而簡(jiǎn)潔的 JavaScript 庫(kù)，由 John Resig 在2006年創(chuàng)建，它有一個(gè)很好宗旨：寫得少，做得多。它是一個(gè)跨瀏覽器的 JavaScript 庫(kù)，旨在簡(jiǎn)化 HTML 的客戶端腳本。目前有超過(guò) 1900 萬(wàn)個(gè)網(wǎng)站正在使用jQuery！WordPress、Facebook、Google、IBM 和其他許多公司都依賴 jQuery 提供獨(dú)一無(wú)二的網(wǎng)絡(luò)瀏覽體驗(yàn)。

jQuery的主要特性：

DOM操作：它使對(duì) DOM 的操作變得非常容易，使開(kāi)發(fā)人員可以通過(guò)易于學(xué)習(xí)的API（基于頂層 JavaScript）充分利用他們的創(chuàng)造力來(lái)創(chuàng)建令人驚嘆的東西。

大型社區(qū)：其貢獻(xiàn)者的社區(qū)比任何其他 JavaScript 庫(kù)更加龐大和多樣化。它有廣泛而全面的文檔支持，不要忘記，它會(huì)不斷得到維護(hù)，并且會(huì)越來(lái)越強(qiáng)大。

AJAX支持：簡(jiǎn)而言之，AJAX（異步 JavaScript 和 XML）是關(guān)于在后臺(tái)加載數(shù)據(jù)并將其顯示在網(wǎng)頁(yè)上，而無(wú)需重新加載整個(gè)頁(yè)面的技術(shù)。 jQuery 為 AJAX 功能提供了好幾種方法。通過(guò) jQuery AJAX，你可以用 HTTP Get 和 HTTP Post 從遠(yuǎn)程服務(wù)器請(qǐng)求文本、HTML、XML或JSON。

跨瀏覽器支持：jQuery 具有跨瀏覽器支持特性，適用于 IE 6.0 +，F(xiàn)F 2.0 +，Safari 3.0 +，Chrome 和 Opera 9.0+等。

3. Vue

Vue是一個(gè)用于構(gòu)建 UI 的開(kāi)源 JavaScript 框架。由于它的設(shè)計(jì)具有適應(yīng)性，Vue 簡(jiǎn)化了與其他 JavaScript 庫(kù)的項(xiàng)目集成。目前超過(guò) 36,000 個(gè)網(wǎng)站正在使用 Vue。像 stackoverflow、playstation 等公司依賴 Vue 開(kāi)發(fā)他們的網(wǎng)站界面。

VueJS的主要特性：

模板：Vue.js 提供基于 HTML 的模板，將 DOM 與 Vue.js 實(shí)例數(shù)據(jù)綁定。 Vue.js 將模板編譯為虛擬 DOM 渲染函數(shù)。 Web 開(kāi)發(fā)人員可以使用渲染函數(shù)的模板，并可以使用渲染函數(shù)替換模板。

體積小：JavaScript 框架的成功取決于它的大小。個(gè)頭越小用的人越多。 Vue.js 最大的優(yōu)勢(shì)之一是體積小。該框架的大小為 18-21 KB。

適應(yīng)性：Vue 允許用戶用虛擬節(jié)點(diǎn)把模版寫在 HTML 文件、JavaScript 文件和純 JavaScript 文件中。這種靈活性還容易讓使用 React.js，Angular.js 和任何其他新 JavaScript 框架的開(kāi)發(fā)人員理解。它基于 JavaScript 框架，可以集成到基于 JavaScript 構(gòu)建的其他程序中。

詳細(xì)的文檔：開(kāi)發(fā)人員總是喜歡使用帶有詳細(xì)文檔的框架，因?yàn)樗麄兛偸呛苋菀拙帉懽约旱牡谝粋€(gè)應(yīng)用程序。Vue.js 的文檔非常全面，任何對(duì) JavaScript 和 HTML 有所了解的用戶都可以用它開(kāi)發(fā)自己的應(yīng)用或網(wǎng)頁(yè)。

2. ReactJS

React 是 Facebook 維護(hù)的另一個(gè) JavaScript 庫(kù)，用于構(gòu)建交互式和復(fù)雜的 UI。它是最熱門的框架之一，有超過(guò) 3 萬(wàn)個(gè)網(wǎng)站使用 React 實(shí)現(xiàn) UI。舉幾個(gè)網(wǎng)站：Microsoft.com、yahoo.com 等。

ReactJS 的主要特性：

Virtual DOM：在React中，對(duì)于每個(gè) DOM 對(duì)象，都有一個(gè)對(duì)應(yīng)的“虛擬 DOM 對(duì)象”。虛擬 DOM 對(duì)象創(chuàng)建原始 DOM 的虛擬副本。這是一種單向數(shù)據(jù)綁定，由于修改時(shí)不需要實(shí)時(shí)向屏幕渲染，因此操作虛擬 DOM 比更新原始 DOM 快很多。

JSX：React 使用了 JSX，這是一個(gè)使用 HTML 引用的簡(jiǎn)單 JavaScript，而不是用于模板的 JavaScript。你也可以使用 HTML 語(yǔ)法來(lái)渲染子組件，或使用老式的 JavaScript 編寫，這意味著無(wú)論采用哪種方式，你都可以靈活地進(jìn)行編碼。

單向數(shù)據(jù)流：React.js 的設(shè)計(jì)方式使其只支持在一個(gè)流程中向下游傳遞的數(shù)據(jù)。如果數(shù)據(jù)必須向另一個(gè)方向流動(dòng)，則需要其他功能支持。

組件：在React中，所有內(nèi)容都被視為組件，因此你可以輕松導(dǎo)入 React 支持的組件，而不是編碼或構(gòu)建整個(gè)功能，你可以方便的導(dǎo)入并使用它。

1. AngularJS

Angular 是最強(qiáng)大、最高效、最開(kāi)源的 JavaScript 框架之一。在這個(gè)列表中不可能不提及 Angular。該框架由Google 運(yùn)營(yíng)，用于開(kāi)發(fā)單頁(yè)應(yīng)用（SPA）。這個(gè)開(kāi)發(fā)框架之所以出名，主要是因?yàn)樗鼮殚_(kāi)發(fā)人員提供了將JavaScript 與 HTML 和 CSS 結(jié)合起來(lái)的最佳條件。有超過(guò)五十萬(wàn)個(gè)網(wǎng)站如 google.com、youtube.com 等正在使用 Angular。

Angular 的主要特性：

MVC 架構(gòu)：AngularJS 最重要的特性之一是 MVC 架構(gòu)。 MVC 架構(gòu)分為三個(gè)元素，即模型、視圖和控制器。

Model：它是 MVC 架構(gòu)的最低層級(jí)，用來(lái)存儲(chǔ)數(shù)據(jù)。

View：負(fù)責(zé)向用戶展示你的所有數(shù)據(jù)。

控制器：它基本上是用來(lái)控制模型與視圖之間整個(gè)交互的代碼。

雙向綁定：這是一個(gè)令人驚嘆的功能，它將 AngularJS 與其他 JavaScript 框架區(qū)分開(kāi)來(lái)。 Angular Data-Binding 在模型和視圖之間建立鏈接。在雙向數(shù)據(jù)綁定過(guò)程中，視圖會(huì)顯示在模型中所做的更改，反過(guò)來(lái)模型反映了在視圖中所做的更改。

單頁(yè)應(yīng)用：使用 AngularJS 框架，你可以構(gòu)建完全響應(yīng)式的單頁(yè)應(yīng)用，可以輕松完美地適應(yīng)不同的屏幕尺寸。與其他網(wǎng)絡(luò)應(yīng)用相比，它還能改善用戶體驗(yàn)。由于基于 AngularJS 的單頁(yè)應(yīng)用是在客戶端渲染的，因此它們通過(guò)減少 Web 服務(wù)器上壓力來(lái)減少網(wǎng)絡(luò)流量。

HTML UI：AngularJS 的另一個(gè)重要特性是它使用 HTML 語(yǔ)言來(lái)構(gòu)建用戶界面。 HTML 語(yǔ)言是一種常見(jiàn)的聲明性語(yǔ)言，標(biāo)簽很短，易于理解。這導(dǎo)致了更簡(jiǎn)單、更有條理的UI。 JavaScript 接口通常更難以開(kāi)發(fā)和組織。如果你正在尋找一種快速，簡(jiǎn)單且易于使用的解決方案，那么應(yīng)該就是它了。