JavaScript 前端框架、庫和工具

AngularJS

Angular 是流行的企業級框架，許多開發人員都在使用它來構建和維護複雜的 web 應用程序。Angular 的人氣很是高，包括 Domino’s Pizza, Ryanair, iTunes Connect, PayPal Checkout, 谷歌等企業都在使用它。Angular 是一個由谷歌支持的開源框架。Angular 自稱是 HTML 的一個擴展，用來構建複雜的 web 應用程序。另外若是你熟悉 TypeScript， Angular 2就是用它構建的。

這個做者的更多文章

• 構建一個基於 Node.js 的聊天室 Web App：遠程調試

• 構建一個基於 Node.js 的聊天室 Web App：經過 WebSockets 鏈接

Angular 是一個 MVC 類型的框架。它提供了模型和視圖之間的雙向數據綁定。該數據綁定容許每當數據改變時，兩邊自動更新。 它使你可以構建可複用的視圖組件。它提供了一個服務框架，使得後端-前端服務通訊更容易。最後，它只是普通的 JavaScript。

什麼時候使用 AngularJS？當你正在構建一個複雜的 web 前端應用程序，同時須要一個模塊化的框架來處理一切時。

GitHub: https://github.com/angular/angular.js

當前版本： 1.4.7/1.2.29

網址： angularjs.org

React

React 是今年最受歡迎的 JavaScript 項目！每一個人都彷佛在談論 ReactJS。去年我參加的每個會議，至少有好幾個議題是關於 React 和同家族的其餘庫（Flux, Redux）的。React 是開源軟件，主要由 Facebook 開發，其餘大型科技公司也有貢獻。React 自稱是一個用於構建用戶界面的 JavaScript 庫。

React 主要是 MVC 中的 V。它的重點徹底在 MVC 的 V 部分，忽視應用程序架構的其他部分。它提供了一個組件層，使得建立 UI 元素，組合元素變得更容易。它使用虛擬 DOM，所以優化了渲染，且容許從 node.js 渲染 React。此外，它實現了單向響應的數據流，所以比其餘框架更容易理解和使用。

做爲 MVC 中的 V，不少項目將 React 結合 Angular 或 Ember 這樣的框架使用。

什麼時候使用 React？當你想要一個強大的視圖層，但不須要在應用程序的其他部分使用一個複雜的框架，或者你在 Angular、Backbone 或 Ember 應用上須要一個視圖層時。當你正試圖創建一個同構 web 框架時。

GitHub: https://github.com/facebook/react

當前版本: v0.14.0

網址: Facebook.github.io/react/

Backbone

Backbone 是一個著名的簡易框架，適合單個 JavaScript 文件。Backbone 已經存在有一段時間了，是以 CoffeeScript 和 Underscore 聞名的 Jeremy Ashkenas 所開發的。對於一些爲小型 web 應用尋找一個結構簡單的框架，而不想引入如 Angular 或 Ember 這些大型框架的團隊，Backbone 特別受歡迎。

Backbone 提供一個完整的 MVC 框架以及路由。模型容許鍵-值綁定和數據變化的事件處理。模型（和集合）能夠鏈接到RESTful API。視圖具備聲明式事件處理，路由在處理 URL 和狀態管理上作的很出色。它包含你建立一個單頁面應用程序所須要的一切，且沒有提供太多東西，沒有沒必要要的複雜度。

什麼時候使用 Backbone？Backbone 是我建立簡單 web 應用程序的首選框架。

GitHub: https://github.com/jashkenas/backbone/

當前版本: 1.2.3

網站: backbonejs.org

Ember

Ember 是一個執拗的 web 應用程序框架，關注程序員的工做效率。Ember 比較流行，它的核心團隊包括像曾是 Ruby on Rails 和 jQuery 核心團隊成員的 Yehuda Katz 的聰明人。Ember 自稱是「一個用於建立大規模 web 應用程序的框架」，且不浪費你的時間。它很執拗，爲你提供了不少選擇。

Ember 也是一個 MVC 框架。它包括一個模板和視圖引擎，當數據變化時自動更新，就像 Angular，Backbone 和 React 同樣。它包含 web組件 的思想，讓你使用本身標籤擴展 HTML（就像 Angular 同樣）。它也有一個知道如何與你的 RESTful API 一塊兒工做的路由和模型引擎。

什麼時候使用 Ember？當你只須要一個能夠運行的框架時。當你由於預算緊張或工期很短而不須要靈活性時，請使用 Ember。

GitHub: https://github.com/emberjs/ember.js

當前版本: 2.1.0

網站: emberjs.com

jQuery

jQuery 是一個無需介紹的庫。它憑一己之力讓跨瀏覽器網站使用成爲現實，同時把 web 帶到今天的位置。Web 標準已經被大多數瀏覽器製造商採納並真正地尊重，jQuery 是其中的緣由之一。jQuery 基金會的使命是「經過開源軟件的開發和支持，以及開發社區的合做，改善開放的 web，讓每個人均可以訪問它。」

jQuery 是世界上最經常使用的 JavaScript 庫，全部應用程序都應該使用它，除非你不在乎程序員的工做效率。它使得 DOM 遍歷、事件處理、動畫、AJAX 在全部瀏覽器上變得更簡單、更容易。

什麼時候使用 jQuery？一直使用，除非你想使用一個像 Zepto 的輕量級版本。

GitHub: https://github.com/jquery/jquery

當前版本: v1.11.3 or v2.1.4

網站: jquery.com

Underscore &lodash

有時候 JavaScript 內置的功能致使程序員的效率並不高。老是缺乏一個工具函數或一個能夠簡化代碼的函數。Underscore（和 lodash）是一個 JavaScript 庫，它提供了一整套工具函數，不須要對內置 JavaScript 對象打補丁。兩個庫均提供超過 100 個功能助手和其餘專用功能，包括 map，filter，invoke，reduce，template, throttle, bind, extend, pick, clone 等更多的函數。

什麼時候使用 Underscore？當你須要一個單獨的 JavaScript 文件，來當即提高程序員的工做效率時。

Underscore GitHub: https://github.com/jashkenas/underscore

Underscore 當前版本: 1.8.3

Underscore 網站: underscorejs.org

什麼時候使用 lodash？當你須要模塊化和性能稍強版本的 Underscore，同時更容易地支持 AMD 和社區插件時。

LodashGitHub: https://github.com/lodash/lodash

Lodash 當前版本: v3.10.1

Lodash 網站: lodash.com

D3.js

數據可視化和圖表是一種常見的 web 應用程序需求。D3.js 是任何數據操做和可視化的事實標準。它是 GitHub上最受歡迎的項目之一，被數以百計的組織使用。大量的圖形，圖表和可視化庫在 D3 上構建。

D3 容許你操做任何來源的數據文檔，轉換成 DOM 或/和 SVG 或/和 CSS。D3 關注現代 web 標準，確保你不受任何專有格式的約束，好比 Flash 和 Silverlight。

什麼時候使用 D3.js？在你須要任何形式的可視化的時候。

GitHub: https://github.com/mbostock/d3

當前版本: 3.5.6

網站: d3js.org

Babylon.js

想要構建徹底符合現代 web 標準且跨瀏覽器的視頻遊戲嗎？看看 Babylon.js，它是基於 WebGL 和 JavaScript 的 3d 遊戲引擎。你能夠建立使人難以置信的包含物理、音頻和粒子系統等等的高質量遊戲。

什麼時候使用 Babylon.js？不管什麼時候，只要你想作一個視頻遊戲或任何類型的複雜三維場景，都能用上。

GitHub: https://github.com/BabylonJS/Babylon.js

當前版本: 2.2

網站: babylonjs.com

Three.js

想要構建一個 3D 可視化場景，但不須要一個完整的遊戲引擎？three.js 提供了一個輕量級的 3d 庫，容許渲染 3d 爲 HTML5 畫布、SVG 和 WebGL。它是至關簡單的庫，在 three.js 的展現裏有數百個優美的例子。

什麼時候使用Three.js？當你須要一個能輸出爲 Canvas 的簡單的 3D 可視化場景時。

GitHub: https://github.com/mrdoob/three.js/

當前版本: r73

網站: threejs.org

Mocha& Chai

JavaScript 在很長一段時間內是很是煩人的。測試任何代碼一般都被認爲是惱人的，但它倒是每一個開發人員都應該作的事情。每一個開發人員彷佛老是蔑視和忽略它，而不測試他們的代碼。這個惱人的東西有一個解決辦法，那就是 Mocha 和 Chai。兩個庫的名字都來自美味的熱飲料，它們都能幫你測試代碼，但方式不一樣。

Mocha 是一個 JavaScript 測試框架，使得你在 node 模塊和瀏覽器 app 中測試異步代碼變得更容易。Mocha 測試能夠串聯運行，能夠爲正確的測試用例添加異常跟蹤的能力。

Chai 是一個行爲驅動開發/測試驅動開發的斷言庫，能夠搭配 Mocha 使用。它能夠把你須要測試的東西用可讀的風格簡單地表達出來。

什麼時候使用 Mocha & Chai？老是！請測試你的代碼，讓世界變得更美好。

Mocha 當前版本: 2.3.3

Mocha 網址: mochajs.org

Chai GitHub: https://github.com/chaijs/chai

Chai 當前版本: v3.4.1

Chai 網址: chaijs.com

Karma

既然已經把 Mocha 和 Chai 包含在這個列表中了，若是不包含用來運行這些測試或設置持續集成測試的測試運行器，那將是不完整的。Karma 是一款旨在幫助你在不一樣的瀏覽器上自動運行測試的工具。它能夠幫助你在全部瀏覽器上運行 Mocha 和 Chai 測試。

不是每一個瀏覽器都運行在全部平臺，但幸運的是可使用一些免費工具來測試其餘瀏覽器，看看 Browser Screenshots。若是你正在 OS X 上運行代碼，想測試 Edge 或 IE，能夠 免費 使用這個工具。

什麼時候使用 Karma？當你的應用程序有一個完善的測試套件，並但願確保測試在全部瀏覽器上經過時。

GitHub: https://github.com/karma-runner/karma

當前版本: v0.13

網址: karma-runner.github.io

PhantomJS

運行完整的瀏覽器來測試你的代碼比較耗內存和 CPU。PhantomJS 容許你運行一個輕量的 WebKit —— Safari 和Chrome（如今是 Blink）後臺的渲染引擎。它容許你經過 JavaScript API 運行測試，捕捉截圖，監控網絡和自動瀏覽頁面。

什麼時候使用 PhantomJS ?當你須要進行更多的測試，操做頁面和監視網絡請求時。

GitHub: https://github.com/ariya/phantomjs

當前版本: v2.0

網址: phantomjs.org

Grunt & Gulp

爲生產環境構建網站，一般涉及到提升性能的任務，好比 JavaScript 和 CSS 的壓縮， CoffeeScript/TypeScript 的編譯，單元測試，語法檢查。也許你已經有一個爲網站發佈到生產環境的工具鏈，若是沒有，你可使用任務運行器，好比 Grunt 或Gulp。二者都有大量關於網站的任何轉換的插件，爲發佈到生產環境作好準備。

什麼時候使用 Grunt？當你喜歡寫配置文件同時不介意你的任務運行器生成中間文件時。

Grunt GitHub: https://github.com/gruntjs/grunt

Grunt 當前版本: v0.4.5

Grunt 網址: gruntjs.com

什麼時候使用 Gulp？當你喜歡在配置上寫代碼和利用 node.js 的流功能來加快任務執行時。

Gulp GitHub: https://github.com/gulpjs/gulp

Gulp 當前版本: v3.9.0

Gulp 網址: gulpjs.com

Babel

JavaScript 語言正在迅速發展。ECMAScript2015 於去年夏天發佈，它的許多新特性在最新的瀏覽器上實現了。若是你想看看 ECMAScript 2015 的兼容性，你能夠看看來自 @kangax 的這個 表。你會注意到，最新版本的 Edge，Firefox 和 Chrome 已經幾乎徹底兼容了。

咱們並非生活在一個完美的世界。做爲開發人員，咱們須要繼續支持舊的瀏覽器，它們沒有最新最好的 JavaScript 特性。咱們要推動 web 和改善咱們的代碼庫。Babel 是一個 JavaScript 編譯器，用於把最新的 JavaScript 標準編譯成可在 IE9 等老瀏覽器上運行的兼容ES5的 JavaScript。它有一些插件，使得 React 開發更容易，甚至可使用一些不屬於該規範的特性（例如ES7）。

什麼時候使用 Babel？當你想使用新的 JavaScript 語言特性，同時還要支持老版本瀏覽器時。

GitHub: https://github.com/babel/babel

當前版本: 6.1.2

網址: babeljs.io

更多 Web 開發實踐

本文來自微軟技術佈道師 Web 開發系列，裏面有實用的 JavaScript 學習，開源項目和互操做性的最佳實踐（包括與 微軟Edge 瀏覽器和新的 EdgeHTML渲染引擎）。

咱們鼓勵你跨瀏覽器和設備進行測試，包括微軟的Edge——Windows 10的默認瀏覽器——在 dev.modern.IE 上有免費工具:

• 掃描你的網站中過期的庫，佈局問題和可訪問性

• 下載 Mac, Linux 和 Windows 下的免費虛擬機

• 跨瀏覽器檢查 Web 平臺狀態，包括微軟 Edge 的路線圖

• 在你的設備上遠程測試微軟 Edge

來自咱們工程師和佈道者的更深刻學習：

• GitHub 上的編碼實驗室： 跨瀏覽器測試和最佳實踐

• 2015 微軟 Edge Web 峯會 (來自咱們的工程師團隊和JS社區)

• 很棒，我能夠在 Mac 和 Linux 上測試 Edge 和 IE 了！ (來自Rey Bango)

• 推動 JavaScript 同時不破壞 Web (來自Christian Heilmann)

• Edge 渲染引擎讓 Web 工做 (來自Jacob Rossi)

• 基於 WebGL 的 3D 渲染 (來自David Catuhe)

• 託管 web app 和 web 平臺的革新 (來自Kevin Hill和Kiril Seksenov)

咱們的社區開源項目：

• vorlon.JS (跨設備遠程 JavaScript 測試)

• manifoldJS (部署跨平臺託管 web app)

• babylonJS (讓 3D 圖形制做更簡單)