14個優秀 JS 前端框架、庫、工具及其使用時機

　　這篇文章主要描述現今流行的一些 Javascript web 前端框架，庫以及它們的適用場景。

　　新的 Javascript 庫層出不窮，從而Web 社區愈發活躍、多樣、在多方面快速發展。詳細去描述每一種主流的 Javascript 框架和庫近乎不可能，因此在這篇文章中主要介紹一些對前端發展最具影響力的前端框架。接下來讓咱們來共同研究一些主流前端框架、庫和工具，並討論它們的適 用場景。

　　同時：

　　若是該篇文章沒有包含你喜歡的 Javascript 框架，勿噴

　　在使用前端框架進行開發時，建議保持版本更新。最新版本的通常都會提供給更好的跨瀏覽器，跨平臺效果。 需檢測某個框架的舊版本是否對各類瀏覽器以及設備的兼容，請使用 相似這個掃描器 的工具

　　準備好了吧，那麼接下來逐個討論它們。

　　AngularJS

　　Angular 是一款流行的企業級 框架，不少程序員都用它來構建和維護複雜的網頁應用。Angular 擁有巨大的人氣，使用它的公司跟 Domino 的 Pizza 種類同樣多，如 Ryanair, iTunes Connect, PayPal Checkout, Google。Angular 是一個由 Google 支持的開源框架。Angular 稱本身爲構建複雜網頁應用而對 HTML 的擴展。若是你也對 TypeScript 很熟悉，那麼能夠看看 怎樣寫 Angular 2 .

　　Angular 採用 MVC 架構。它提供了 Model 層和 View 層之間雙重數據綁定。這種數據綁定方式的好處是無論哪邊數據改變，都會自動的更新兩邊的數據。這有助於你構建可服用的 View 組件。它還提供了一個先後端服務易於交互的服務框架。最重要的是，它是簡單的 JavaScript。

　　何時使用 AngularJS? 當你構建一個複雜的網頁前端應用並須要一個單獨的模塊框架去處理一切時。

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

　　Current Version:1.4.7/1.2.29

　　Website: angularjs.org

　　二：React 是15年最受歡迎的 JavaScript 項目!幾乎人人都在談論 ReactJS。去年，我參加的每個會幾乎都會有一兩個話題探討 React 和相同體系下的其它庫( Flux ， Redux ) 。React 是一個開源項目，幾乎是由 Fackbook 和其它主要的技術公司貢獻開發的。React 稱本身爲爲構建用戶接口而提供的 JavaScript 庫。

　　React 基本上用來做爲 MVC 中的 V。它徹底專一於 MVC 中的 V 部分，而忽略了應用中的其它部分架構。它提供了一個組件層，這讓咱們易於製做UI元素並將這些UI元素組合在一塊兒。它抽象出了DOM，所以而優化了渲染， 並容許你使用 node.js 渲染 React。另外，它實現了單向數據交互流，這使它比其它的框架更易於理解和使用。

　　多個項目例如 Angular ，Ember 綁定使用 React 成爲 MVC 中的 V。

　　何時使用 React?當你想要有一個強大的 View 層，而應用中的其它部分缺不須要一個複雜的框架時，或當你想要一個 View 層和你的 Angular， Backbone，或者 Ember應用一塊兒使用。當你試着構建一個同構的網頁框架。

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

　　目前版本:v0.14.0

　　網址: Facebook.github.io/react/

　　Backbone

　　Backbone 是 一個出名的精簡的框架，全部內容均可以放到一個單一的文件裏。Backbone 已經流行了一段時間，其做者是 Jeremy Ashkenas，曾經因爲開發了 CoffeeScript 和 Underscore 而爲你們所知。Backbone 特別適用於須要開發的 web 程序不大的那些團隊，他們但願能使用小巧的框架，而不是像 Angular 或者 Ember 這樣的大型框架。

　　Backbone 提供了全功能的 MVC 框架和路由。它的 Model 能夠實現 key-value 綁定和數據更新的事件處理。Model(及 Collection)能夠與 RESTful 的 API 協同工做。View 能夠聲明事件處理，Router 在 URL 處理和狀態管理方面作的很好。對於開發一個單頁面應用，全部須要的功能均可以支持，不須要額外引入不須要的複雜性。

　　什麼時候使用 Backbone?對於小型的 web 程序，Backbone 是我必選的框架。

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

　　當前版本:1.2.3

　　官方網站: backbonejs.org

　　Ember 做爲一個 web應用框架，很是專一於程序員的效率上。Ember 相對比較流行，核心團隊有很多很聰明的成員，包括 Yehuda Katz，他是 Ruby on Rails 和 jQuery 的核心團隊的成員。Ember 對本身的定位是「一個用來建立震撼的 web 應用的框架」，它也確實不會浪費你的時間。它在這方面很是專一，爲你提供不少的選擇。

　　Ember 一樣也是一個 MVC 的框架。它包含一個模板和視圖引擎，在數據更新時能夠自動更新，這方面與Angular, Backbone, 和 React 相似。它還有一個 web 組件 的概念，容許你用本身的標籤擴展HTML，(如Angular)。它還有一個路由及 model 引擎，能夠與 RESTful API 一塊兒工做的很好。

　　什麼時候使用 Ember?適用於你須要一個框架立刻就能使用。對靈活性要求不高的時候能夠選擇 Ember，由於你一般是預算緊張或者工期緊張。

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

　　當前版本:2.1.0

　　官方網站: emberjs.com

　　JQuery 這個庫就不用多作介紹了。它獨立承擔了讓跨瀏覽器網站成爲現實的重任，是它使得整個 web 成爲今天這個樣子。Web 標準的制定以及瀏覽器廠家對標準的接受方面，jQuery 功不可沒。jQuery 基金會的目標是"經過開源軟件的開發和支持，以及社區的協做，增進開放的網絡，讓每一個人都能訪問"

　　JQuery 是世界上應用最廣的 JavaScript 庫，沒有應用能夠離開它，除非你對開發效率不感興趣。它使得 DOM 遍歷、事件處理、動畫和 AJAX 在全部瀏覽器上都變得如此的簡單易用。

　　什麼時候使用 jQuery?任什麼時候候，除非你打算使用更輕量級的版本，例如 Zepto 。

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

　　當前版本：v1.11.3 或 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?當你想要一個模塊化的，性能更好好一點的，並附帶有對於 AMD 和社區插件支持的 Underscore 版本時。

　　Lodash GitHub: 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

　　想要構建一個徹底運行於現代瀏覽器上，而且能跨瀏覽器運行的視頻遊戲嗎?那就看看 Babylon.js 吧，它是一個 3D 遊戲引擎，基於 WebGL 和 JavaScript。你可使用其物理、音頻和粒子系統創造出超乎預期的高質量遊戲來。

　　何時使用 Babylon.js?當你正在構建一個視頻遊戲或者一個某種類型的 3D 場景時。

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

　　當前版本: 2.2

　　網站: babylonjs.com

　　Three.js

　　想要構建一個 3D 視覺特效，可是又不須要一個功能完整的遊戲?Three.js 提供了一個輕量級的 3D 庫，讓你能夠將 3D 效果渲染成一個 HTML5 的 canvas, 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模塊或者瀏覽器應用中的異步代碼的測試變得容易起來。Mocha 測試能夠串起來運行，而且對於針對合適的測試案例進行異常跟蹤的質量不錯。

　　Chai 是一個行爲驅動開發和測試驅動開發的斷言庫，可與 Mocha 比肩。它以一種可讀性好的風格來描述你所要測試的東西，用起來簡單。

　　何時使用 Mocha 和 Chai?用他們就對了! 請測試你的代碼，讓這個世界變得更好。

　　Mocha GitHub: https://github.com/mochajs/mocha

　　Mocha 當前版本: 2.3.3

　　Mocha 網站: mochajs.org

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

　　Chai 當前版本: v3.4.1

　　Chai 網站: chaijs.com

　　咱們已經在這份清單中囊括了 Mocha 和 Chai ，若是不去把能夠運行這些測試或者也許能夠設定持續集成測試的測試運行器拉進來的話，那麼這份清單就不會是完整的。Karma 是一個用來幫助你在不一樣的瀏覽器中自動運行你的測試的工具。它將會幫助你在時下全部的瀏覽器上運行你的 Mocha 和 Chai 測試。

　　並非每一個瀏覽器都會運行於每一個平臺之上，不過幸運的是有許多免費的工具可供你用來測試其它的瀏覽器，能夠在 瀏覽器截屏 上看一看。若是你是在 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 做爲一門語言發展很快速。ECMAScript 2015 在去年夏天發佈，而它的許多新特性正在許多最新的瀏覽器中被實現。若是你想要了解有關瀏覽器對 ECMAScript 2015 兼容信息，能夠看看這個來自於 @kangax 的 表格 。你會注意到最新版本的 Edge，Firefox 和 Chrome 已經幾乎是徹底的兼容了。

　　咱們並非生活在一個完美的世界中。做爲開發者，咱們將會須要繼續支持老版本的瀏覽器，它們不具備最新和最棒的 JavaScript 功能特性。而咱們實在是想要發展咱們的 web 並提高咱們的代碼庫。Babel 就是一個 JavaScript 編譯器，它能夠將最新的 JavaScript 標準編譯成兼容 ES5 的JavaScript，讓你能夠在 IE9 那麼老的瀏覽器上運行它們。它擁有一些插件，讓使用 React 開發更加容易，設置會使用那些並非規範 (例如 ES7) 的組成部分的功能特性。

　　何時使用 Babel?當你想要使用新的 JavaScript 語言特性而且還要支持老的瀏覽器時。

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

　　當前版本: 6.1.2

　　網站: babeljs.io

　　更多 Web 開發的實踐

　　這篇文章是 web 開發系列的一部分，來自於 Microsoft 技術的傳道者和工程師，內容都是關於實用的 JavaScript 學習、開源項目，還有互操做性最佳實踐這些方面，包括了 Microsoft Edge 瀏覽器和新的 EdgeHTML 渲染引擎 。

　　咱們鼓勵您在全部的瀏覽器和設備，包括做爲 Windows 10 默認瀏覽器的 Microsoft Edge 上進行測試 —— 使用 dev.microsoftedge.com 上的免費工具：

　　掃描你的站點上的過期的庫，佈局問題以及可訪問性

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

　　在全部的瀏覽器，包括在 Microsoft Edge 上檢查 Web 平臺的狀態

　　在你本身的設備上遠程測試 Microsoft Edge

　　更深刻了解咱們的工程師和傳道者：

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

　　Microsoft Edge Web 大會 2015 (來自於咱們的工程團隊和 JS 社區)

　　哇哦，我能在 Mac 和 Linux 上測試 IE 和 Edge 了! (來自於 Rey Bango)

　　沒有破話 Web 的先進的 JavaScript (來自於)

　　能讓 Web 馬上起做用的 Edge 渲染引擎 (來自於 Jacob Rossi)

　　使用 WebGL 發揮 3D 渲染的潛能 (來自於 David Catuhe)

　　託 管web 應用和web平臺方面的創新 (來自於 Kevin Hill 和 Kiril Seksenov)

　　咱們的社區開放源代碼項目：

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

　　manifoldJS (部署跨平臺託管 Web 應用)

　　babylonJS (讓 3D 圖形這些東西更平易近人)

　　更多免費的工具和後端web開發的東西：

　　Linux, MacOS, 和 Window s 上使用的 Visual Studio Code

　　嘗試在 Azure Cloud 上 使用 node.JS 編寫代碼