14個優(yōu)秀 JS 前端框架、庫、工具及其使用時機

2015-12-23 14:23:24

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

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

同時：

如果該篇文章沒有包含你喜歡的 Javascript 框架，勿噴
在使用前端框架進行開發(fā)時，建議保持版本更新。***版本的一般都會提供給更好的跨瀏覽器，跨平臺效果。需檢測某個框架的舊版本是否對各種瀏覽器以及設備的兼容，請使用類似這個掃描器的工具

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

AngularJS

Angular 是一款流行的企業(yè)級框架，很多程序員都用它來構建和維護復雜的網(wǎng)頁應用。Angular 擁有巨大的人氣，使用它的公司跟 Domino 的 Pizza 種類一樣多，如 Ryanair, iTunes Connect, PayPal Checkout, Google。Angular 是一個由 Google 支持的開源框架。Angular 稱自己為構建復雜網(wǎng)頁應用而對 HTML 的擴展。如果你也對 TypeScript 很熟悉，那么可以看看怎樣寫 Angular 2 .

Angular 采用 MVC 架構。它提供了 Model 層和 View 層之間雙重數(shù)據(jù)綁定。這種數(shù)據(jù)綁定方式的好處是不管哪邊數(shù)據(jù)改變，都會自動的更新兩邊的數(shù)據(jù)。這有助于你構建可服用的 View 組件。它還提供了一個前后端服務易于交互的服務框架。最重要的是，它是簡單的 JavaScript。

什么時候使用 AngularJS? 當你構建一個復雜的網(wǎng)頁前端應用并需要一個單獨的模塊框架去處理一切時。

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

Current Version:1.4.7/1.2.29

Website: angularjs.org

React 是今年***的 JavaScript 項目！幾乎人人都在談論 ReactJS。去年，我參加的每一個會幾乎都會有一兩個話題探討 React 和相同體系下的其它庫( Flux ， Redux ) 。React 是一個開源項目，幾乎是由 Fackbook 和其它主要的技術公司貢獻開發(fā)的。React 稱自己為為構建用戶接口而提供的 JavaScript 庫。

React 基本上用來作為 MVC 中的 V。它完全專注于 MVC 中的 V 部分，而忽略了應用中的其它部分架構。它提供了一個組件層，這讓我們易于制作UI元素并將這些UI元素組合在一起。它抽象出了DOM，因此而優(yōu)化了渲染，并允許你使用 node.js 渲染 React。另外，它實現(xiàn)了單向數(shù)據(jù)交互流，這使它比其它的框架更易于理解和使用。

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

什么時候使用 React？當你想要有一個強大的 View 層，而應用中的其它部分缺不需要一個復雜的框架時，或當你想要一個 View 層和你的 Angular， Backbone，或者 Ember應用一起使用。當你試著構建一個同構的網(wǎng)頁框架。

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

目前版本:v0.14.0

網(wǎng)址: Facebook.github.io/react/

Backbone

Backbone 是一個出名的精簡的框架，所有內(nèi)容都可以放到一個單一的文件里。Backbone 已經(jīng)流行了一段時間，其作者是 Jeremy Ashkenas，曾經(jīng)由于開發(fā)了 CoffeeScript 和 Underscore 而為大家所知。Backbone 特別適用于需要開發(fā)的 web 程序不大的那些團隊，他們希望能使用小巧的框架，而不是像 Angular 或者 Ember 這樣的大型框架。

Backbone 提供了全功能的 MVC 框架和路由。它的 Model 可以實現(xiàn) key-value 綁定和數(shù)據(jù)更新的事件處理。Model(及 Collection)可以與 RESTful 的 API 協(xié)同工作。View 可以聲明事件處理，Router 在 URL 處理和狀態(tài)管理方面做的很好。對于開發(fā)一個單頁面應用，所有需要的功能都可以支持，不需要額外引入不需要的復雜性。

何時使用 Backbone?對于小型的 web 程序，Backbone 是我必選的框架。

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

當前版本:1.2.3

官方網(wǎng)站: backbonejs.org

Ember 作為一個 web應用框架，非常專注于程序員的效率上。Ember 相對比較流行，核心團隊有不少很聰明的成員，包括 Yehuda Katz，他是 Ruby on Rails 和 jQuery 的核心團隊的成員。Ember 對自己的定位是“一個用來創(chuàng)建震撼的 web 應用的框架”，它也確實不會浪費你的時間。它在這方面非常專注，為你提供很多的選擇。

Ember 同樣也是一個 MVC 的框架。它包含一個模板和視圖引擎，在數(shù)據(jù)更新時可以自動更新，這方面與Angular, Backbone, 和 React 類似。它還有一個 web 組件的概念，允許你用自己的標簽擴展HTML，(如Angular)。它還有一個路由及 model 引擎，可以與 RESTful API 一起工作的很好。

何時使用 Ember?適用于你需要一個框架馬上就能使用。對靈活性要求不高的時候可以選擇 Ember，因為你通常是預算緊張或者工期緊張。

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

當前版本:2.1.0

官方網(wǎng)站: emberjs.com

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

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

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

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

當前版本：v1.11.3 或 v2.1.4

官方網(wǎng)站: jquery.com

Underscore 和 lodash

有時內(nèi)置的 JavaScript 對于讓程序員真正的有生產(chǎn)力還遠遠不夠?？偸菚绷艘粋€工具函數(shù)，又或者是一個能簡化代碼的函數(shù)。Underscore (還有 lodash) 就是這樣的一個 JavaScript 庫，它提供了一整套工具函數(shù)，無需經(jīng)驗不足的程序員再去給內(nèi)置的 JavaScript 對象打補丁。兩個庫都提供了超過 100 個輔助函數(shù)，還有其它特別的好東西；包括了像 map, filter, invoke, reduce, template, throttle, bind, extend, pick, clone 等等這些函數(shù)。

什么時候使用 Underscore?當你想要擁有一個立即能增強程序員效率的 JavaScript 文件時。

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

Underscore 當前版本:1.8.3

Underscore 網(wǎng)站: underscorejs.org

什么時候使用 lodash?當你想要一個模塊化的，性能更好好一點的，并附帶有對于 AMD 和社區(qū)插件支持的 Underscore 版本時。

Lodash GitHub: https://github.com/lodash/lodash

Lodash 當前的版本:v3.10.1

Lodash 網(wǎng)站: lodash.com

D3.js

數(shù)據(jù)可視化和圖表是web應用程序的一種常規(guī)需求。當涉及到任何數(shù)據(jù)操作和可視化時，D3.js 就是事實上的標準。它是 GitHub 上***的項目之一，并被數(shù)百個組織機構所采用。大量的圖形、圖標和可視化庫都是構件于 D3 之上的。

D3 讓你可以操作任何來源的數(shù)據(jù)文檔，并將數(shù)據(jù)進行轉換后應用到 DOM、SVG 和 CSS上。D3 專注于現(xiàn)代的 web 標準，以及確保你可以不受到任何像 Flash 或者 Silverlight 這樣的專有格式的限制。

什么時候使用 D3.js?當你需要任何類型的視覺效果的時候。

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

當前版本:3.5.6

網(wǎng)站: d3js.org

Babylon.js

想要構建一個完全運行于現(xiàn)代瀏覽器上，并且能跨瀏覽器運行的視頻游戲嗎？那就看看 Babylon.js 吧，它是一個 3D 游戲引擎，基于 WebGL 和 JavaScript。你可以使用其物理、音頻和粒子系統(tǒng)創(chuàng)造出超乎預期的高質量游戲來。

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

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

當前版本: 2.2

網(wǎng)站: babylonjs.com

Three.js

想要構建一個 3D 視覺特效，但是又不需要一個功能完整的游戲？Three.js 提供了一個輕量級的 3D 庫，讓你可以將 3D 效果渲染成一個 HTML5 的 canvas, SVG, 和 WebGL。這是一個詳單簡單的庫，在 three.js 陳列站點上可以看到數(shù)百個漂亮的示例。

什么時候使用 Three.js?當你需要一個簡單的能輸出為 Canvas 的 3D 視覺效果時。

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

當前版本: r73

網(wǎng)站: threejs.org

Mocha 和 Chai

長久以來測試 JavaScript 一直都令人不甚反感。說起來，測試任何代碼都是令人反感的，但又卻是每個開發(fā)者應該做的事情。每個開發(fā)者似乎總是對此不屑，忽視掉針對它們的代碼的測試工作。現(xiàn)在有了治愈這種反感的辦法了，那就是 Mocha 和 Chai。而兩個庫都以美味的熱飲命名，都能幫助你測試代碼，不過方式不同而已。

Mocha 是一個 JavaScript 測試框架，它使得針對你的node模塊或者瀏覽器應用中的異步代碼的測試變得容易起來。Mocha 測試可以串起來運行，并且對于針對合適的測試案例進行異常跟蹤的質量不錯。

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

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

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

Mocha 當前版本: 2.3.3

Mocha 網(wǎng)站: mochajs.org

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

Chai 當前版本: v3.4.1

Chai 網(wǎng)站: chaijs.com

我們已經(jīng)在這份清單中囊括了 Mocha 和 Chai ，如果不去把可以運行這些測試或者也許可以設定持續(xù)集成測試的測試運行器拉進來的話，那么這份清單就不會是完整的。Karma 是一個用來幫助你在不同的瀏覽器中自動運行你的測試的工具。它將會幫助你在時下所有的瀏覽器上運行你的 Mocha 和 Chai 測試。

并不是每個瀏覽器都會運行于每個平臺之上，不過幸運的是有許多免費的工具可供你用來測試其它的瀏覽器，可以在瀏覽器截屏上看一看。如果你是在 OS X 上運行的話，并且要測試的是 Edge 或者 IE 的話，你就可以免費使用這個工具。

什么時候使用 Karma?當你想要擁有一個功能全面的測試套件，并像確保測試能在所有的瀏覽器上通過時。

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

當前版本: v0.13

網(wǎng)站: karma-runner.github.io

PhantomJS

運行全部的瀏覽器來測試你的代碼是要密集消耗內(nèi)存和 CPU 的。PhantomJS 讓你可以運行一個純粹的 WebKit —— Safari 和之前版本的 Chrome 中的渲染引擎(現(xiàn)在是 Blink)。它能讓你通過一個 JavaScript API 來運行測試、截屏、模擬網(wǎng)絡以及自動的瀏覽頁面。

什么時候使用 PhantomJS ?當你需要進行更多的測試、操作網(wǎng)頁和模擬網(wǎng)絡請求的操作時。

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

當前版本: v2.0

網(wǎng)站: phantomjs.org

Grunt 和 Gulp

構建用于生產(chǎn)環(huán)境的網(wǎng)站一般還涉及到一些提升性能這方面的任務，像 JavaScript 和 CSS 的最小化，CoffeeScript/TypeScript 的編譯，單元測試，代碼精簡。也許你已經(jīng)有了一個工具鏈，用于準備你生產(chǎn)版本上的網(wǎng)站，而如果你還沒有的話，就會想要擁有一個像 Grunt 或者 Gulp 這樣的任務運行器。它們都無數(shù)的插件，能為你的網(wǎng)站進行任何的轉換，以使其能投入生產(chǎn)環(huán)境。

什么時候使用 Grunt?當你更愿意編寫配置文件，而對于你的任務運行器會生成什么中間文件并不關心時。

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

Grunt 當前版本: v0.4.5

Grunt 網(wǎng)站: gruntjs.com

何時使用 Gulp?當你更愿意編寫配置代碼，并且想利用 node.js 的流處理能力實現(xiàn)更快的任務執(zhí)行時。

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

Gulp 當前版本: v3.9.0

Gulp 網(wǎng)站: gulpjs.com

Babel

JavaScript 作為一門語言發(fā)展很快速。ECMAScript 2015 在去年夏天發(fā)布，而它的許多新特性正在許多***的瀏覽器中被實現(xiàn)。如果你想要了解有關瀏覽器對 ECMAScript 2015 兼容信息，可以看看這個來自于 @kangax 的表格。你會注意到***版本的 Edge，F(xiàn)irefox 和 Chrome 已經(jīng)幾乎是完全的兼容了。

我們并不是生活在一個***的世界中。作為開發(fā)者，我們將會需要繼續(xù)支持老版本的瀏覽器，它們不具有***和最棒的 JavaScript 功能特性。而我們實在是想要發(fā)展我們的 web 并提升我們的代碼庫。Babel 就是一個 JavaScript 編譯器，它可以將***的 JavaScript 標準編譯成兼容 ES5 的JavaScript，讓你可以在 IE9 那么老的瀏覽器上運行它們。它擁有一些插件，讓使用 React 開發(fā)更加容易，設置會使用那些并不是規(guī)范 (例如 ES7) 的組成部分的功能特性。

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

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

當前版本: 6.1.2

網(wǎng)站: babeljs.io

更多 Web 開發(fā)的實踐

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

我們鼓勵您在所有的瀏覽器和設備，包括作為 Windows 10 默認瀏覽器的 Microsoft Edge 上進行測試 —— 使用 dev.microsoftedge.com 上的免費工具：