本文來(lái)自于：葡萄城控件技術(shù)團(tuán)隊(duì)博客

幾乎每隔一個(gè)星期崔列，就有一個(gè)新的 JavaScript 庫(kù)席卷網(wǎng)絡(luò)社區(qū)梢褐！Web 社區(qū)日益活躍、多樣赵讯，并在多個(gè)領(lǐng)域快速成長(zhǎng)盈咳。想要研究每一個(gè)重要的 JavaScript 框架和庫(kù)，是個(gè)不可能完成的任務(wù)瘦癌。接下來(lái)猪贪，我會(huì)分享一些前端開(kāi)發(fā)的最著名和最有影響力的框架和庫(kù)。下面讯私，就讓我們一起來(lái)看看，頂級(jí)的 JavaScript web 前端框架西傀、庫(kù)和工具及其使用斤寇。

請(qǐng)注意：

如果沒(méi)有包括你最喜歡的 JavaScript 的框架和庫(kù)，請(qǐng)多包涵拥褂。

請(qǐng)實(shí)時(shí)更新你的框架和庫(kù)娘锁，最新版本往往有更好的跨瀏覽器和跨設(shè)備支持〗染椋可以使用檢測(cè)設(shè)備一樣的工具莫秆，來(lái)幫助確定一個(gè)舊版本间雀，是否可以和配置最好的設(shè)備兼容。

接下來(lái)镊屎，讓我們看看下面的列表惹挟！

AngularJS

AngularJS 是一種流行的企業(yè)框架，許多開(kāi)發(fā)人員使用其構(gòu)建和維護(hù)復(fù)雜的 Web 應(yīng)用程序缝驳。AngularJS 是十分受歡迎的连锯，許多公司都使用它，像達(dá)美樂(lè)披薩用狱、瑞安航空运怖、iTunes Connect，PayPal 支付夏伊，谷歌等摇展。AngularJS 是由谷歌支持的開(kāi)源框架。AngularJS 把自己描述為一個(gè) HTML 的擴(kuò)展溺忧，可用來(lái)構(gòu)建復(fù)雜的 Web 應(yīng)用程序咏连。此外，如果你熟悉 TypeScript砸狞，將會(huì)很清楚 AngularJS 是如何編寫的奏赘。

AngularJS 是一個(gè) MVC 類型的框架随抠，它提供了雙向的數(shù)據(jù)模型和視圖之間的綁定。這種數(shù)據(jù)綁定，允許在雙方只要有一個(gè)數(shù)據(jù)變化時(shí)徽级，自動(dòng)進(jìn)行更新。它使你可以構(gòu)建可重用的 View 組件畜吊。同時(shí)步清，它也提供了一個(gè)服務(wù)框架，以便前后端服務(wù)的輕松通信榜晦。最后冠蒋，它只是普通的 JavaScript。

什么時(shí)候使用 AngularJS乾胶？當(dāng)你正在建立一個(gè)復(fù)雜的 web 前端應(yīng)用程序抖剿，并且需要一個(gè)模塊化的框架來(lái)處理一切時(shí)。

React

React 是今年最受喜愛(ài)的 JavaScript 的工程识窿！每個(gè)人似乎都在談?wù)?ReactJS斩郎。每一個(gè)會(huì)議上，去年出席的會(huì)議喻频，至少有兩個(gè)人是在討論 React缩宜。React 是開(kāi)源的，主要是由 facebook 借助其它公司的主要技術(shù)開(kāi)發(fā)出來(lái)的。React 描述自己是一個(gè) JavaScript 庫(kù)锻煌，用于構(gòu)建用戶界面妓布。

React 在 MVC 中，主要是 View宋梧。它完全專注于 MVC 那部分匣沼，無(wú)視應(yīng)用程序的其它部分。它提供了一個(gè)成分層乃秀，可以更容易使用UI元素肛著，并將它們組合在一起。它抽象了 DOM跺讯，使其擅長(zhǎng)于優(yōu)化渲染枢贿，并允許使用 node.js 來(lái)表述 React ; 它實(shí)現(xiàn)了一個(gè)單向靈活的數(shù)據(jù)流，使得它更容易理解和使用其它框架刀脏。

作為在 MVC 中的 V局荚，許多工程結(jié)合 React 和 AngularJS 或 Ember 一起使用。

什么時(shí)候使用 React愈污？當(dāng)你想要一個(gè)強(qiáng)大的 View 層耀态，但應(yīng)用的其它部分卻不需要詳盡的框架時(shí)，或者當(dāng)你的應(yīng)用中想要一個(gè)結(jié)合 了Angular暂雹、Backbone 或 Ember 的視圖層時(shí)首装，又或者是創(chuàng)建一個(gè)同構(gòu)的 Web 框架時(shí)。

Backbon

Backbone 是一個(gè)很著名的簡(jiǎn)單的框架杭跪，融入了一個(gè)單一的 JavaScript 文件仙逻。Backbone 流行了一段時(shí)間。由 Jeremy Ashkenas 從CoffeeScript 和 Underscore 框架中開(kāi)發(fā)出來(lái)的涧尿。對(duì)于追尋小型架構(gòu)的團(tuán)隊(duì)來(lái)說(shuō)系奉，Backbone 是特別受歡迎的。因?yàn)樗麄冃⌒偷?Web 應(yīng)用是不需要使用像 AngularJS 和 Ember 這樣的大型框架的姑廉。

Backbone 提供了一個(gè)完整的 MVC 框架和路由缺亮。該模型允許鍵-值綁定和處理數(shù)據(jù)變化的事件。Models（和 Collections）可以連接到 RESTful API 中桥言。Views 可以聲明事件處理萌踱，而路由器則可以非常出色地處理 URL 和狀態(tài)管理。在建立一個(gè)不提供太多功能和非必要復(fù)雜功能的單頁(yè)面應(yīng)用時(shí)号阿，能提供你所需的所有功能虫蝶。

什么時(shí)候使用 Backbone？Backbone 是適用于簡(jiǎn)單 Web 應(yīng)用的 GOTO 框架倦西。

Ember

Ember 是一個(gè)獨(dú)立的 Web 應(yīng)用程序框架，專注于編碼效率赁严。Ember 是比較受歡迎的扰柠，核心團(tuán)隊(duì)包括牛人 Yehuda Katz粉铐，他是 Ruby on Rails 和 jQuery 的核心團(tuán)隊(duì)之一。Ember 描述自己為一個(gè)不浪費(fèi)你的時(shí)間卤档，能用于創(chuàng)建偉大 Web 應(yīng)用程序的框架蝙泼。 這是非常有主見(jiàn)，這也使你有了很多選擇劝枣。

Ember 也是一個(gè) MVC 框架汤踏。它包括一個(gè)模板和視圖引擎，保證了數(shù)據(jù)變化時(shí)的自動(dòng)更新舔腾，就像 AngularJS溪胶，Backbone 和 React 一樣。它包括的概念 web 組件稳诚，讓你用自己的標(biāo)簽來(lái)擴(kuò)展 HTML（就像 AngularJS）哗脖。它也有一個(gè)路由和模型引擎，能夠和 RESTful API 協(xié)同工作扳还。

什么時(shí)候使用 Ember才避？如果你只是想要一個(gè)能夠工作的框架時(shí)、或者你的預(yù)算緊張氨距、又或者最后期限將近時(shí)桑逝，不追求太多的靈活性，可以使用 Ember俏让。

JQuery

jQuery 是一個(gè)不需要過(guò)多介紹的框架楞遏。它憑一己之力使得跨瀏覽器站點(diǎn)成為現(xiàn)實(shí)并促使 Web 發(fā)展到今天。Web 標(biāo)準(zhǔn)被大多數(shù)主要瀏覽器廠商所采納真正的尊重舆驶，jQuery 是其原因之一橱健。jQuery 的基金會(huì)的使命是“通過(guò)開(kāi)發(fā)和支持開(kāi)源軟件，提高開(kāi)放的網(wǎng)絡(luò)沙廉，使之為所有人開(kāi)放拘荡，并與開(kāi)發(fā)社區(qū)合作∏肆辏”

jQuery 是世界上最常用的 JavaScript 庫(kù)珊皿，沒(méi)有應(yīng)用程序不去使用它，除非不在乎編碼效率巨税。它使得在所有瀏覽器中蟋定，DOM traversal、事件處理草添、動(dòng)畫(huà)驶兜、AJAX 是如此的簡(jiǎn)單和容易。

什么時(shí)候使用 jQuery？除你想使用像 Zepto 這樣的輕量級(jí)版本之外抄淑，都可以使用 jQuery屠凶。

Wijmo

Wijmo Enterprise 是為企業(yè)應(yīng)用程序開(kāi)發(fā)而推出的一系列包含 HTML5 和 JavaScript 的開(kāi)發(fā)控件集。包含有先進(jìn)的 JavaScript 控件肆资、經(jīng)典的 jQuery 小部件矗愧、金融圖標(biāo)、以及 FlexSheet 和 OLAP郑原，能夠滿足移動(dòng)端唉韭、PC 端和支持 IE6 等應(yīng)用程序的需求。同時(shí)犯犁，Wijmo 還支持其它流行的框架属愤，如 Angular、Angular2栖秕、KnockOut春塌、Vue、React 等簇捍。

什么時(shí)候使用 Wijmo只壳？當(dāng)你想為應(yīng)用程序構(gòu)建具有良好用戶體驗(yàn)的用戶界面時(shí)。

Underscore＆lodash

對(duì)于程序開(kāi)發(fā)者來(lái)說(shuō)暑塑，一些 JavaScript 的內(nèi)置吼句，效率是不夠高的∈赂瘢總有缺少實(shí)用的功能或?qū)⒋a化簡(jiǎn)的函數(shù)惕艳。Underscore（和 lodash）是一個(gè) JavaScript 庫(kù)，提供了實(shí)用功能驹愚，同時(shí)不需要 JavaScript 對(duì)象內(nèi)置的猴子補(bǔ)丁远搪。這兩個(gè)庫(kù)提供超過(guò) 100 個(gè)幫助函數(shù)和其它特別好用的功能;，包括像地圖逢捺，過(guò)濾器谁鳍，調(diào)用，縮減劫瞳，模板倘潜，調(diào)節(jié)，綁定志于，擴(kuò)展涮因，挑選，克隆和更多的功能伺绽。

什么時(shí)候使用 Underscore养泡？當(dāng)你需要一個(gè)單一 JavaScript 文件來(lái)提高編碼效率時(shí)嗜湃。

什么時(shí)候使用 lodash？當(dāng)你需要一個(gè)模塊和輕量高效的瓤荔，容易被 AMD 和社區(qū)插件支持 Underscore 版本時(shí)净蚤。

D3.js

數(shù)據(jù)可視化和圖表是 Web 應(yīng)用程序的常見(jiàn)需求。當(dāng)涉及到任何數(shù)據(jù)操作和可視化输硝，D3.js 是事實(shí)上的標(biāo)準(zhǔn)。它是在 GitHub 上最受歡迎的項(xiàng)目之一程梦，并在被數(shù)百個(gè)組織使用点把。大量的圖形，圖表和可視庫(kù)建立在 D3 上屿附。

D3 允許操作任何數(shù)據(jù)源的文件郎逃，并且可以轉(zhuǎn)換為 DOM、SVG 或 CSS挺份。D3 專注于現(xiàn)代網(wǎng)絡(luò)標(biāo)準(zhǔn)褒翰，并確保像 Flash 或 Silverlight 等專有格式的免費(fèi)。

什么時(shí)候使用 D3.JS匀泊？當(dāng)你需要任何形式的可視化時(shí)优训。

Babylon.js

想要?jiǎng)?chuàng)建一個(gè)完全運(yùn)行在現(xiàn)代 Web 標(biāo)準(zhǔn)和跨瀏覽器上的視頻游戲？可以考慮 Babylon.js各聘，Babylon.js 是一個(gè)建立在 WebGL 和 JavaScript 上的 3D 游戲引擎揣非。你可以創(chuàng)建一個(gè)難以置信的高質(zhì)量的游戲引擎，包括物理躲因，音頻和粒子系統(tǒng)早敬。

什么時(shí)候使用 Babylon.js？當(dāng)你正在構(gòu)建一個(gè)包含任何復(fù)雜 3D 場(chǎng)景的視頻游戲時(shí)大脉。

three.js

想要?jiǎng)?chuàng)建一個(gè) 3D 可視化搞监，卻又不需要完整的游戲引擎？Three.js 提供了一個(gè)輕量的 3D 庫(kù)來(lái)將 3D 渲染成一個(gè) HTML5 canvas镰矿、SVG 和 WebGL琐驴。這確實(shí)是一個(gè)明確的庫(kù)，在 Three.js 的用例展示中衡怀，有幾百個(gè)效果很好的例子棍矛。

什么時(shí)候使用 three.js？每當(dāng)你需要一個(gè)簡(jiǎn)單的三維可視化抛杨，可以輸出到畫(huà)布上時(shí)够委。

Mocha & Chai

在很長(zhǎng)一段時(shí)間里，JavaScript 的測(cè)試令人難以置信的煩惱怖现。從頭開(kāi)始茁帽，測(cè)試任何代碼通常被視為令人討厭的玉罐，但它是每一個(gè)開(kāi)發(fā)者應(yīng)該做的。同時(shí)潘拨，測(cè)試他們的代碼吊输，每個(gè)開(kāi)發(fā)者似乎總是很不屑，而選擇忽略它铁追。有一個(gè)辦法來(lái)改善這個(gè)問(wèn)題季蚂，就是使用 Mocha & Chai 的形式。雖然這兩個(gè)庫(kù)從美味的熱飲中得名的琅束，但是它們都可以以不同的方式測(cè)試你的代碼扭屁。

Mocha 是一個(gè) JavaScript 測(cè)試框架，可以很輕松地在 node 模型和瀏覽器應(yīng)用程序中測(cè)試異步代碼涩禀。Mocha 測(cè)試可以串聯(lián)運(yùn)行料滥，并且對(duì)于正確的測(cè)試用例具有高質(zhì)量的跟蹤異常。

Chai 是一個(gè)行為驅(qū)動(dòng)的開(kāi)發(fā)/測(cè)試驅(qū)動(dòng)開(kāi)發(fā)斷言庫(kù)艾船，可以與 Mocha 配套使用葵腹。它使得可以很容易的以一種可讀的方式去表達(dá)你的測(cè)試內(nèi)容。

什么時(shí)候使用 Mocha 和Chai屿岂？ 永遠(yuǎn)都可以践宴！請(qǐng)測(cè)試你的代碼，使世界變得更美好雁社。

Karma

這個(gè)列表上包含了 Mocha 和 Chai浴井，如果不包含運(yùn)行這些測(cè)試和設(shè)定持續(xù)集成測(cè)試的運(yùn)行者，那么這將是不完整的霉撵。Karma 是一個(gè)旨在幫助針對(duì)不同的瀏覽器自動(dòng)運(yùn)行測(cè)試的工具磺浙。這將幫助你在所有的瀏覽器上運(yùn)行 Mocha 和 Chai。

并不是每一個(gè)瀏覽器都可以在每個(gè)平臺(tái)上運(yùn)行徒坡，幸運(yùn)的是撕氧，有一些免費(fèi)的工具，你可以用來(lái)測(cè)試其他瀏覽器喇完， 例如瀏覽器截圖伦泥。如果你在 OS X 上運(yùn)行，并希望測(cè)試 Edge 或 Internet Explorer锦溪，您可以使用這種免費(fèi)工具不脯。

什么時(shí)候使用 Karma？當(dāng)你的應(yīng)用程序有一個(gè)完整的測(cè)試套件刻诊，并想要確保在所有的瀏覽器上測(cè)試通過(guò)時(shí)防楷。

PhantomJS

運(yùn)行全功能瀏覽器，以測(cè)試你的代碼內(nèi)存和 CPU 密集型则涯。PhantomJS 允許你在 Safari 和 Chrome 上運(yùn)行 headless WebKit 的渲染引擎复局。這樣你就可以運(yùn)行你的測(cè)試冲簿，捕捉屏幕截圖，監(jiān)視網(wǎng)絡(luò)亿昏，使用 JavaScript API 自動(dòng)瀏覽頁(yè)面峦剔。

什么時(shí)候使用 PhantomJS? 當(dāng)你需要做更多的測(cè)試，操作頁(yè)面并監(jiān)視網(wǎng)絡(luò)請(qǐng)求時(shí)角钩。

Grunt & Gulp

產(chǎn)品網(wǎng)站建設(shè)通常會(huì)涉及到一些提高性能的任務(wù)吝沫，例如縮小 JavaScript 和 CSS，CoffeeScript/TypeScript 的編譯彤断，單元測(cè)試野舶，性能 lintin。也許你已經(jīng)為產(chǎn)品網(wǎng)站準(zhǔn)備好了工具鏈宰衙，但是如果還沒(méi)有，那么你可以使用 Grunt 和 Gulp 這樣的工具睹欲。這兩個(gè)工具都有很多插件供炼，來(lái)幫助你完善產(chǎn)品網(wǎng)站。

什么時(shí)候使用 Grunt窘疮？如果你喜歡寫配置文件袋哼，并且不介意任務(wù)運(yùn)行期間產(chǎn)生中間文件時(shí)。

什么時(shí)候使用 Gulp闸衫？如果對(duì)比于寫配置文件涛贯，你更喜歡寫代碼，并且想要使用 node.js 的流媒體功能來(lái)更快的執(zhí)行任務(wù)時(shí)蔚出。

Babel

JavaScript 作為一門語(yǔ)言弟翘，發(fā)展地很快。2015年夏天的 ECMAScript 發(fā)布了它的許多在最新的瀏覽器中實(shí)現(xiàn)的新功能骄酗。如果你想看看2015年的 ECMAScript 兼容稀余，你可以看看來(lái)自原 @kangax 的列表。你會(huì)發(fā)現(xiàn)最新版本的 Edge趋翻，F(xiàn)irefox 和 Chrome睛琳，具有近乎完全的兼容性。

我們不是生活在一個(gè)完美的世界踏烙。作為開(kāi)發(fā)人員师骗，我們需要繼續(xù)支持那些沒(méi)有最新 JavaScript 特性的舊版瀏覽器。我們要推進(jìn)網(wǎng)絡(luò)并提高我們的代碼庫(kù)讨惩。Babel 是一個(gè) JavaScript 編譯器辟癌，可以將最新的 JavaScript 標(biāo)準(zhǔn)編譯成 ES5 兼容的 JavaScript，這樣就允許在像 IE9 這樣較老的瀏覽器上運(yùn)行步脓。它有一些插件愿待，使得很容易的使用 React 去開(kāi)發(fā)浩螺，甚至使用一些規(guī)格之外的特性去開(kāi)發(fā)。

什么時(shí)候使用 Babel仍侥？當(dāng)你要使用新的 JavaScript 語(yǔ)言特性要出，同時(shí)繼續(xù)支持舊版瀏覽器時(shí)。

更多的Web開(kāi)發(fā)實(shí)踐

本文來(lái)自于 JavaScript 學(xué)習(xí)文章中微軟技術(shù)布道者和工程師的系列文章之一农渊，同時(shí)最好的文章里也包含微軟的 Edge 瀏覽器和新的 EdgeHTML 渲染引擎患蹂。

我們鼓勵(lì)大家測(cè)試跨瀏覽器和設(shè)備，例如微軟的 Edge（Windows10 默認(rèn)的瀏覽器）

文章來(lái)源：by Rami Sayar

原文鏈接：http://www.codeproject.com/Articles/1066408/Top-JavaScript-Frameworks-Libraries-Tools-and-Wh

轉(zhuǎn)載請(qǐng)注明出自：葡萄城控件

關(guān)于葡萄城

葡萄城是全球控件行業(yè)領(lǐng)導(dǎo)者砸紊，世界領(lǐng)先的企業(yè)應(yīng)用定制工具传于、企業(yè)報(bào)表和商業(yè)智能解決方案提供商，為超過(guò)75%的全球財(cái)富500強(qiáng)企業(yè)提供服務(wù)醉顽。