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

2015-12-23 14:23:24

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

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

同時：

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

準(zhǔn)備好了吧，那么接下來逐個討論它們。

AngularJS

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

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

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

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

Current Version:1.4.7/1.2.29

Website: angularjs.org

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

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

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

什么時候使用 React？當(dāng)你想要有一個強(qiáng)大的 View 層，而應(yīng)用中的其它部分缺不需要一個復(fù)雜的框架時，或當(dāng)你想要一個 View 層和你的 Angular， Backbone，或者 Ember應(yīng)用一起使用。當(dāng)你試著構(gòu)建一個同構(gòu)的網(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 程序不大的那些團(tuán)隊，他們希望能使用小巧的框架，而不是像 Angular 或者 Ember 這樣的大型框架。

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

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

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

當(dāng)前版本:1.2.3

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

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

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

何時使用 Ember?適用于你需要一個框架馬上就能使用。對靈活性要求不高的時候可以選擇 Ember，因?yàn)槟阃ǔＪ穷A(yù)算緊張或者工期緊張。

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

當(dāng)前版本:2.1.0

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

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

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

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

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

當(dāng)前版本：v1.11.3 或 v2.1.4

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

Underscore 和 lodash

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

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

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

Underscore 當(dāng)前版本:1.8.3

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

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

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

Lodash 當(dāng)前的版本:v3.10.1

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

D3.js

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

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

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

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

當(dāng)前版本:3.5.6

網(wǎng)站: d3js.org

Babylon.js

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

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

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

當(dāng)前版本: 2.2

網(wǎng)站: babylonjs.com

Three.js

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

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

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

當(dāng)前版本: r73

網(wǎng)站: threejs.org

Mocha 和 Chai

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

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

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

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

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

Mocha 當(dāng)前版本: 2.3.3

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

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

Chai 當(dāng)前版本: v3.4.1

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

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

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

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

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

當(dāng)前版本: v0.13

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

PhantomJS

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

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

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

當(dāng)前版本: v2.0

網(wǎng)站: phantomjs.org

Grunt 和 Gulp

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

什么時候使用 Grunt?當(dāng)你更愿意編寫配置文件，而對于你的任務(wù)運(yùn)行器會生成什么中間文件并不關(guān)心時。

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

Grunt 當(dāng)前版本: v0.4.5

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

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

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

Gulp 當(dāng)前版本: v3.9.0

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

Babel

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

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

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

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

當(dāng)前版本: 6.1.2

網(wǎng)站: babeljs.io

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

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

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