用來簡(jiǎn)化開發(fā)任務(wù)的20個(gè)JavaScript類庫

所謂JS庫就是預(yù)先寫好的JS程序庫，用于簡(jiǎn)化以JS為基礎(chǔ)的開發(fā)程序，尤其是對(duì)AJAX和其他以Web為中心技術(shù)的JS代碼集。JS的首要用途是將編寫的功能內(nèi)嵌在HTML頁面，并與頁面的對(duì)象模型(DOM)進(jìn)行互動(dòng)。

很多JS庫很容易和其他Web開發(fā)技術(shù)進(jìn)行整合，例如CSS、 PHP、Ruby、和Java。許多程序庫可以檢測(cè)運(yùn)行環(huán)境之間的差異，刪除一些應(yīng)用程序，以滿足整合需求。文章搜集了20個(gè)JS庫，幫你處理與開發(fā)相關(guān)的問題，讓你的網(wǎng)站在競(jìng)爭(zhēng)中領(lǐng)先一步。

1. Tracking.js

Tracking.js是一個(gè)獨(dú)立的JS庫，可以跟蹤照相機(jī)實(shí)時(shí)收到的數(shù)據(jù)。跟蹤對(duì)象既可以是色彩也可以是人物，當(dāng)檢測(cè)到某個(gè)特定的顏色時(shí)或人物/臉龐/身體出現(xiàn)移動(dòng)的時(shí)候，我們可以觸發(fā)JS事件。

2. Aristochart

Aristochart是一個(gè)不依賴于其它庫的JS庫，它能夠使用Canvas創(chuàng)建靜態(tài)的2D線形圖表。這個(gè)庫專注于打造客戶化設(shè)計(jì)，提供多種選項(xiàng)用于更改設(shè)計(jì)、標(biāo)簽等等。

3. Hitch

Hitch是一個(gè)輕量級(jí)的JS庫，能夠向css文件添加表現(xiàn)能力。同時(shí)具備CSS預(yù)處理程序能力，比如添加前綴或變量，還有一些其他的功能。這個(gè)程序庫有多個(gè)隨時(shí)可用的表達(dá)方式，如“any of，all of，has...”，并允許我們定義任何一種方式(稱為hitches)。

4. Cesium

Cesium是基于WebGL的JS繪圖庫，支持3種不同的視圖：3D globe、2D map、2.5D Columbus View，相互轉(zhuǎn)換只要一行代碼而已！繪畫各種形狀，突出顯示特定區(qū)域以及使用鼠標(biāo)或觸摸板與地圖進(jìn)行互動(dòng)是非常簡(jiǎn)單的。Cesium作為一個(gè)獨(dú)立的js文件可以在所有主流瀏覽器上運(yùn)行，包括手機(jī)上。

5. Two.js

它是一個(gè)2D的繪圖API，一個(gè)優(yōu)秀的JS庫，用于較新的Web瀏覽器，可基于不同上下文繪制，包括svg、canvas和webgl。 這個(gè)庫目前只支持形狀（非文本或圖片），允許導(dǎo)入SVG數(shù)據(jù)。當(dāng)需要一起轉(zhuǎn)變的時(shí)候，Two.js可以聚合多個(gè)有用的元素。其中還有一個(gè)內(nèi)置動(dòng)畫循環(huán)方法來繪制各種圖形，還具有使之個(gè)性化的多個(gè)選項(xiàng)。

6. Sequel.js

Sequel.js是一個(gè)輕量級(jí)JS庫，有助于通過一個(gè)面向?qū)ο蟮腁PI來構(gòu)建SQL查詢字符串，既可以在瀏覽器上運(yùn)行，也可以在所有標(biāo)準(zhǔn)的SQL查詢上運(yùn)行。

7. Draggabilly

這是一個(gè)可以讓頁面元素可拖動(dòng)的獨(dú)立JS庫，Draggabilly能夠幫你輕松實(shí)現(xiàn)網(wǎng)頁上各種元素的拖放操作。可以在一個(gè)限制的容器范圍內(nèi)拖動(dòng)頁面元素，對(duì)于每一個(gè)事件（start，move，end）都有回調(diào)，可以返回當(dāng)前元素的位置。它可用于大部分瀏覽器（IE8+）并內(nèi)置支持觸摸事件。

8. Zebra

此JS庫帶有一串富用戶界面組件，可以創(chuàng)建類似于桌面效果布局。UI元素由HTML5 canvas構(gòu)建，由CSS著色，預(yù)期在所有瀏覽器中渲染出相同的效果。擁有30多個(gè)UI元素，包括grid、tabs、menu、form elements、menu等等。

9. Formula.js

這個(gè)JS庫為Web開發(fā)者帶來了大多數(shù)公式，公式列舉了多重分類——日期/時(shí)間，文本，邏輯，金融等等。此外，除了在客戶端運(yùn)行，還在服務(wù)端（即將發(fā)布）上運(yùn)行。

10. Chart.js

這是一個(gè)給人印象深刻的JS獨(dú)立圖表庫，大小不足5kb的程序包，建立在HTML5 canvas之上。目前支持6種圖表類型：直線圖、條形圖、雷達(dá)圖、餅狀圖、柱狀圖和地區(qū)區(qū)域圖。顏色、字體、邊框、大小都可以根據(jù)用戶需求自定義。

11. Flippant.js

這是一個(gè)迷你JS和CSS庫，允許自動(dòng)翻轉(zhuǎn)桌面上的東西。不依賴任何其它類庫，便于自定義，翻轉(zhuǎn)功能效果好。

12. React

React是一個(gè)用來構(gòu)建用戶界面的JS庫，可以高效靈活地與你之前使用的類庫和框架結(jié)合使用。

13. PathFinding.js

PathFinding.js是JS里一個(gè)綜合路徑尋找類庫，其目的是提供一個(gè)可以方便結(jié)合到網(wǎng)絡(luò)游戲里的路徑尋找類庫。它可以在服務(wù)端運(yùn)行，也可以在瀏覽器上運(yùn)行。提供在線演示算法是怎樣執(zhí)行的。當(dāng)具體使用路徑尋找器時(shí)，你可以通過其它的參數(shù)來指示該用哪一個(gè)策略。

14. Reactor.js

這是一個(gè)用于響應(yīng)式編程的輕量級(jí)類庫。它提供的反應(yīng)變量，當(dāng)它們所依賴的的事物發(fā)生改變的時(shí)候可以實(shí)現(xiàn)自動(dòng)更新。這和電子數(shù)據(jù)表的運(yùn)作方式有點(diǎn)相似，當(dāng)一個(gè)單元格的數(shù)值有所變化的時(shí)候，與其有聯(lián)系的其他單元格數(shù)值也會(huì)變化。

15. Bootbox.js

Bootbox.js是一個(gè)很小的JS庫，允許使用Twitter的Bootstrap模式創(chuàng)建程序?qū)υ挻翱�，不需要�?dān)心創(chuàng)建、管理或刪除任何任何需要的DOM元素或JS事件處理程序。

16. Parallel.js

Parallel.js在JS里是一個(gè)用于多核處理的微型庫，它的創(chuàng)建充分發(fā)揮了成熟的Web-workers API，JS的確是很快，但由于它的單線程計(jì)算模式，它缺乏了與其對(duì)等語言的平行計(jì)算功能。

17. SVG.js

SVG.js可以通過SVG進(jìn)行操作和手動(dòng)繪畫，此庫輕便獨(dú)立，功能豐富，有內(nèi)置方法可以創(chuàng)建各種形狀——三角形、圓形、多邊形，或自定義圖形。

18. Packery

這是一個(gè)使用“裝箱算法”的JS布局庫，這是“補(bǔ)漏”的體面說法。Packery的布局可以是井然有序的，也可以是錯(cuò)亂無序的。元素可以被固定在相應(yīng)的位置，也可以隨意拖放。

19. FPS Meter

FPS Meter是一個(gè)簡(jiǎn)單的JS庫，用來制作迷人的、快速的、可主題化的FPS儀表。他可以測(cè)量出每秒的幀數(shù)，幀之間的毫秒數(shù)，以及使用.tickStart()方法時(shí)，渲染一幀所需要的毫秒數(shù)。

20. Howler.js

Howler.js一個(gè)是JS庫，通過默認(rèn)方式運(yùn)行在網(wǎng)頁音頻API上，當(dāng)瀏覽器不支持時(shí)退回到HTML5音頻。為了保證跨瀏覽器的兼容性，它允許接收多種文件格式。該庫能同時(shí)緩存和播放多個(gè)聲音，還有循環(huán)播放功能，淡入淡出效果和標(biāo)準(zhǔn)的多媒體控制功能。