JavaScript依然是2018年最受歡迎特漩、最流行的編程語(yǔ)言，所以它的生態(tài)系統(tǒng)也十分完善骨杂。

Underscore & Lodash(dah)

也許大多數(shù)童鞋都已經(jīng)知道它們涂身。Underscore提供了日常使用的基礎(chǔ)函數(shù)。Lodash, 作為NPM最多下載量和被依賴最多的包搓蚪，提供了更加支持跨環(huán)境一致性的對(duì)數(shù)組蛤售、字符串、對(duì)象和參數(shù)對(duì)象的支持妒潭。它已經(jīng)是Underscore的超集悴能。Underscore和Lodash有同一組核心開(kāi)發(fā)者維護(hù)。你日常開(kāi)發(fā)中絕對(duì)少不了要用到它雳灾。

Lodash

Underscore

Ramda

擁有超過(guò)12K的stars漠酿，Ramda庫(kù)可以用來(lái)在JavaScript中函數(shù)式編程，專門為函數(shù)式編程風(fēng)格而設(shè)計(jì)，更容易創(chuàng)建函數(shù)式 pipeline夫凸、且從不改變用戶已有數(shù)據(jù)。 摘自官方：

Ramda 主要特性如下：

Ramda 強(qiáng)調(diào)更加純粹的函數(shù)式風(fēng)格嚎花。數(shù)據(jù)不變性和函數(shù)無(wú)副作用是其核心設(shè)計(jì)理念啼止。這可以幫助你使用簡(jiǎn)潔滓窍、優(yōu)雅的代碼來(lái)完成工作即横。

Ramda 函數(shù)本身都是自動(dòng)柯里化的。這可以讓你在只提供部分參數(shù)的情況下桨嫁，輕松地在已有函數(shù)的基礎(chǔ)上創(chuàng)建新函數(shù)废境。

Ramda 函數(shù)參數(shù)的排列順序更便于柯里化。通常最后提供要操作的數(shù)據(jù)。

最后兩點(diǎn)一起，使得將多個(gè)函數(shù)構(gòu)建為簡(jiǎn)單的函數(shù)序列變得非常容易，每個(gè)函數(shù)對(duì)數(shù)據(jù)進(jìn)行變換并將結(jié)果傳遞給下一個(gè)函數(shù)。Ramda 的設(shè)計(jì)能很好地支持這種風(fēng)格的編程奸鸯。

Ramda

你也可以看看:immutable.js

MathJS

擁有超過(guò)6K的stars映跟，Math.js是一個(gè)Node.js和JavaScript的math擴(kuò)展庫(kù)，并且和內(nèi)置的Math庫(kù)兼容。該庫(kù)中包含一個(gè)靈活的表達(dá)式分析器优构，并且有非常多的內(nèi)置函數(shù)可以使用彪腔。你甚至可以自行做擴(kuò)展快毛。

Math.js

Moment/date-fns

擁有超過(guò)40K的stars贴铜，moment.js是一個(gè)JavaScript的時(shí)間處理庫(kù)，可以用來(lái)分析绍坝、驗(yàn)證陷嘴、處理和格式化時(shí)間。Moment被設(shè)計(jì)可以用于瀏覽器和Node.js環(huán)境下地技。對(duì)于V2.10.0庵芭，代碼完全用ECMAScript 6模塊實(shí)現(xiàn)双吆。 Date-fns也是一個(gè)非常流行(超過(guò)11K的stars)的時(shí)間處理庫(kù)眨唬，提供超過(guò)130多個(gè)函數(shù)，很多人把它當(dāng)做moment.js(

查看對(duì)比

)的替代品蔚万。Date-fns完全用純函數(shù)實(shí)現(xiàn)岭妖，并保證不可修改性。它可以很好的和webpack反璃，Browserify区转、或Rollup配合使用，并支持tree-shaking版扩。

moment

date-fns

Sugar

擁有超過(guò)3.5K個(gè)stars废离，Sugar是一個(gè)可以用來(lái)處理原生對(duì)象的庫(kù)。自定義的構(gòu)建和模塊化的npm包礁芦，使得你可以只需要加載你需要的包蜻韭。用戶也可以自定義方法或則使用插件處理特殊情況悼尾。

Sugar

Lazy

擁有5K個(gè)stars，lazy.js是一個(gè)函數(shù)式的JavaScript庫(kù)肖方。該庫(kù)的底層的實(shí)現(xiàn)都是懶執(zhí)行的闺魏，也就是說(shuō)盡量不做運(yùn)算，除非站的需要俯画。這個(gè)庫(kù)不依賴第三方庫(kù)析桥，這里有一個(gè)demo，這里是API文檔艰垂。 比如泡仗，我們要生成300個(gè)1到1000之間完全不同的隨機(jī)數(shù)，可以這樣寫：

Lazy.generate(Math.random)

? .map(function(e) { return Math.floor(e * 1000) + 1; })

? .uniq()

? .take(300)

? .each(function(e) { console.log(e); });

用JavaScript直接去寫猜憎，代碼就會(huì)復(fù)雜很多了娩怎。

lazy.js

CollectJS

擁有超過(guò)3.5K個(gè)stars，collect.js是一個(gè)非常有前景并且不依賴于任何第三方庫(kù)的庫(kù)胰柑。它提供了針對(duì)數(shù)組和對(duì)象的包裝截亦，使用非常方便。

const collection = collect([{

? name: 'JavaScript: The Good Parts', pages: 176

}, {

? name: 'JavaScript: The Definitive Guide', pages: 1096

}]);

collection.avg('pages');

//=> 636

collect.js

ChanceJS

Chance是一個(gè)用來(lái)隨機(jī)生成字符串柬讨、數(shù)字等的函數(shù)崩瓤，他可以減少一些非隨機(jī)性，在你需要寫自動(dòng)化測(cè)試或則其它你需要生成隨機(jī)的地方很有用踩官。雖然只要3K個(gè)stars谷遂，但是這個(gè)庫(kù)真的非常方便。

chancejs

ChartJS

擁有超過(guò)40K的stars卖鲤，chart.js是一個(gè)少即是多的的經(jīng)典例子。它只提供了8中可視化的類型畴嘶，每一種都有動(dòng)畫并且可以自定義蛋逾。Chart.js讓你可以使用<canvas>標(biāo)簽來(lái)作圖，并且在不同的瀏覽器上高效渲染窗悯。

chart.js

Polished

擁有超過(guò)3.5K個(gè)stars区匣，由styled-components團(tuán)隊(duì)開(kāi)發(fā)，Polished是一個(gè)用于寫css樣式的工具集蒋院，提供saas風(fēng)格的幫助函數(shù)和mixins亏钩。該庫(kù)和styled-components，Aphrodite欺旧，Radium兼容姑丑。

polished

11. Mout

Mout.js是一個(gè)JavaScript的模塊化工具集合，能夠以AMD模塊的形式在瀏覽器中使用或者在Node.js中辞友。Mout.js讓你可以只加載你需要的模塊或者函數(shù)栅哀，如下所示：

// you can load individual methods (recommended)

var map = require('mout/array/map');

map([1, 2], function(v){ return val * val; }); // [1, 4]

// a single package

var stringUtils = require('mout/string');

stringUtils.camelCase('Foo Bar'); // "fooBar"

// or the whole lib

var mout = require('mout');

console.log( mout.math.clamp(17, 0, 10) ); // 10

mout

Voca

一個(gè)用于處理字符串的JavaScript庫(kù)震肮，包含了很多的幫助函數(shù)，比如：change case, trim, pad, slugify, latinise, sprintf‘y, truncate, escape等等留拾。

voca

Licia

雖然只有500來(lái)個(gè)stars戳晌，但是Licia提供了非常多的工具函數(shù)，對(duì)于日常使用非常有幫助痴柔。 官方介紹：

Licia是一套在開(kāi)發(fā)中實(shí)踐積累起來(lái)的實(shí)用JavaScript工具庫(kù)沦偎。該庫(kù)目前擁有超過(guò)180個(gè)模塊，包括Dom操作咳蔚，cookie設(shè)置豪嚎，類創(chuàng)建，模板函數(shù)屹篓，日期格式化等實(shí)用模塊疙渣，同時(shí)配套有打包工具Eustia進(jìn)行定制化，使JS腳本加載量縮減在10KB以下堆巧，極大優(yōu)化移動(dòng)端頁(yè)面的加載速度妄荔。

Licia由RedHood開(kāi)發(fā)，詳細(xì)了解可以查看他本人在知乎上寫的對(duì)Licia的介紹: 超實(shí)用JavaScript工具庫(kù)谍肤。

licia

Three JS

42,569 ★

TODO 粘貼圖片在此

Three JS 是這里面排名第一啦租、最受歡迎的動(dòng)畫庫(kù)（該項(xiàng)目有900多位的貢獻(xiàn)者）。八年了荒揣，Three JS 仍是一個(gè)強(qiáng)大的動(dòng)畫工具篷角。Three JS 依賴于WebGL，可以用來(lái)構(gòu)建瀏覽器端酷炫的3D計(jì)算機(jī)圖形系任。Three JS的功能包括但不限于浮雕效果恳蹲，透視和正交相機(jī)落追，幾何工具骏全，如平面，立方體芋类，球體霜旧，環(huán)面错忱。然而，這個(gè)庫(kù)的一個(gè)缺點(diǎn)是一些開(kāi)發(fā)人員發(fā)現(xiàn)它使用起來(lái)很慢挂据。

安裝:

使用NPM以清，可以使用以下命令安裝Three JS。

npm install three

更多信息可從官方網(wǎng)站或npm獲取崎逃。

Anime JS

21,084 ★

Anime JS作為Three JS的潛在替代方案掷倔，居于列表第二位。Anime JS由Julian Garnier創(chuàng)建个绍，是您遇到過(guò)最快的動(dòng)畫庫(kù)之一今魔。Anime JS可以與DOM一起順利運(yùn)行勺像，并且支持Chrome，F(xiàn)irefox错森，Opera吟宦，Safari，IE10+等的主流瀏覽器涩维。此庫(kù)包括但不限于以下功能：用于CSS動(dòng)畫的的CSS transform殃姓，用于線的SVG動(dòng)畫，用于同步多個(gè)實(shí)例的時(shí)間軸瓦阐。Anime JS最吸引開(kāi)發(fā)者的原因之一就它非常輕量級(jí)蜗侈。

安裝:

使用NPM，可以使用以下命令安裝Anime JS睡蟋。

npm install animejs

更多信息可從官方網(wǎng)站或npm獲取踏幻。

Particles JS

15,612 ★

接下來(lái)我們要看的第三個(gè)動(dòng)畫庫(kù)是Particles JS。Particles JS由Vincent Garreau創(chuàng)建戳杀，是一款特定動(dòng)畫的JavaScript庫(kù)该面，用于創(chuàng)建點(diǎn)和線組成的精彩動(dòng)畫。如前所述信卡，該庫(kù)用于創(chuàng)建看起來(lái)像粒子的動(dòng)畫隔缀。因此，它允許開(kāi)發(fā)人員切換諸如粒子的密度傍菇，顏色猾瘸，不透明度，形狀和大小之類的東西丢习。但是牵触，由于它僅適用于粒子背景，因此不適合用來(lái)創(chuàng)建其他類型的動(dòng)畫咐低。

安裝:

使用NPM揽思，可以使用以下命令安裝Particles JS。

npm install particlesjs

更多信息可從官方網(wǎng)站或npm獲取渊鞋。

ScrollReveal JS

15,499 ★

ScrollReveal JS居于列表第四位，與前面討論的Particles JS一樣瞧挤，也是一款特定動(dòng)畫的JavaScript庫(kù)锡宋。ScrollReveal JS用于創(chuàng)建十分酷炫的滾動(dòng)特效，是一個(gè)輕量級(jí)的工具（沒(méi)有任何依賴）特恬，而且非常容易使用执俩，因?yàn)樗褂米匀徽Z(yǔ)言來(lái)發(fā)送創(chuàng)建動(dòng)畫的指令。ScrollReveal JS適用于DOM節(jié)點(diǎn)癌刽，多個(gè)容器役首，異步內(nèi)容尝丐，并且支持3D旋轉(zhuǎn)。ScrollReveal JS可能是創(chuàng)建滾動(dòng)特效最好用的工具衡奥，它支持大量的瀏覽器爹袁，只要它們支持CSS Transform和CSS Transition特性。

安裝:

使用NPM矮固，可以使用以下命令安裝ScrollReveal JS失息。

npm install scrollreveal

更多信息可從官方網(wǎng)站或npm獲取。

Velocity JS

14,692 ★

接下來(lái)在這個(gè)精彩的動(dòng)畫庫(kù)列表上的就是Velocity JS了档址。它深得許多UI設(shè)計(jì)師的喜愛(ài)盹兢。通過(guò)使用HTML和SVG，該工具可以輕松創(chuàng)建功能強(qiáng)大的Web動(dòng)畫守伸。Velocity JS可用于滾動(dòng)瀏覽器窗口绎秒，甚至撤消以前的動(dòng)畫。Velocity JS盡管使用與jQuery的$.animate（）相同的API尼摹，您會(huì)發(fā)現(xiàn)它是少數(shù)獨(dú)立于強(qiáng)大的jQuery框架的動(dòng)畫工具之一见芹。像WhatsApp和MailChimp就是該優(yōu)秀工具的知名用戶。

安裝:

使用NPM窘问，可以使用以下命令安裝Velocity JS辆童。

npm install velocity-animate

更多信息可從官方網(wǎng)站或npm獲取。

Popmotion JS

13,777 ★

Popmotion JS排行第六惠赫，是一款與Anime JS類似的動(dòng)畫庫(kù)把鉴，可用于創(chuàng)建精彩的瀏覽器動(dòng)畫。該庫(kù)還具有指針跟蹤儿咱，彈簧物理庭砍，3D動(dòng)畫等功能，并可用于創(chuàng)建功能型混埠，反應(yīng)型的動(dòng)畫怠缸。

安裝:

使用NPM，可以使用以下命令安裝Popmotion JS钳宪。

npm install popmotion

更多信息可從官方網(wǎng)站或npm獲取揭北。

Mo JS

13,461 ★

與Popmotion JS類似，Mo JS排名第七吏颖，是一款用于創(chuàng)建Web動(dòng)畫的簡(jiǎn)單庫(kù)搔体。Mo JS簡(jiǎn)單易學(xué)，它的創(chuàng)建者Oleg Solomka已經(jīng)創(chuàng)建了很多教程和demo半醉，來(lái)幫助初學(xué)者快速上手疚俱。Mo JS還具有創(chuàng)建圓形，多邊形缩多，矩形呆奕，線條等功能养晋。Mo JS看起來(lái)很簡(jiǎn)單，卻可以構(gòu)建出非常復(fù)雜的動(dòng)態(tài)圖形的Web動(dòng)畫梁钾。

安裝:

使用NPM绳泉，可以使用以下命令安裝Mo JS。

npm install mo-js

更多信息可從官方網(wǎng)站或npm獲取陈轿。

Vivus JS

10,365 ★

Vivus JS在這個(gè)名單上排名第八圈纺。如果您在此列表中尋找一個(gè)使用SVG的優(yōu)秀庫(kù)，那么Vivus JS是最佳之選麦射，尤其適合初學(xué)者蛾娶。這個(gè)庫(kù)也很快、很輕量級(jí)潜秋，因?yàn)樗鼪](méi)有任何依賴蛔琅。除了使用SVG之外，Vivus JS還可用于創(chuàng)建漂亮的按鈕峻呛，也有其他令人驚嘆的動(dòng)畫可供使用罗售。

安裝:

使用NPM，可以使用以下命令安裝Vivus JS钩述。

npm install vivus

更多信息可從官方網(wǎng)站或npm獲取寨躁。

GreenSock JS

7,767 ★

GreenSock，通常被稱為GSAP（GreenSock動(dòng)畫平臺(tái)）牙勘，我們忽略它在列表中的排名职恳，它是列表中最受歡迎的庫(kù)之一。GreenSock的速度和高效率是它受人喜愛(ài)的原因之一方面。這個(gè)強(qiáng)大的庫(kù)也支持各式瀏覽器放钦，并且沒(méi)有任何依賴。

安裝:

使用NPM恭金，可以使用以下命令安裝GreenSock JS操禀。

npm install gsap

更多信息可從官方網(wǎng)站或npm獲取。

AOS

6,613 ★

因此横腿，雖然本文中討論的其它庫(kù)大力依賴于JavaScript颓屑，但是AOS（Animate On Scroll）卻更多地依賴于CSS。使用AOS耿焊，開(kāi)發(fā)人員可以在向下滾動(dòng)時(shí)為頁(yè)面元素添加動(dòng)畫揪惦，然后在向上滾動(dòng)時(shí)恢復(fù)之前的動(dòng)畫狀態(tài)。這個(gè)庫(kù)還附帶了許多可由滾動(dòng)事件觸發(fā)的預(yù)定義事件搀别。

安裝:

使用NPM丹擎，可以使用以下命令安裝Animate On Scroll尾抑。

npm install aos

更多信息可從官方網(wǎng)站或npm獲取歇父。