之前有很多人問(wèn)學(xué)好前端需要學(xué)習(xí)哪些 js 庫(kù), 主流框架應(yīng)該學(xué) vue 還是 react ? 針對(duì)這些問(wèn)題, 筆者來(lái)說(shuō)說(shuō)自己的看法和學(xué)習(xí)總結(jié).

首先我覺(jué)得在學(xué)習(xí)任何知識(shí)之前必須要有一個(gè)明確的學(xué)習(xí)目標(biāo), 知道自己為什么要學(xué)它, 而不是看網(wǎng)上說(shuō)的一股腦的給你灌輸各種知識(shí), 讓你學(xué)習(xí)各種庫(kù), 從而不斷的制造大家的焦慮感.

前端由于入行門檻低, 更新?lián)Q代很快, 每年都會(huì)有大量新的框架和庫(kù)出現(xiàn), 也有大量庫(kù)被淘汰(比如JQuery, 但是學(xué)習(xí)它的設(shè)計(jì)思想很有必要). 所以我們大可不必?fù)?dān)心, 保持自己的學(xué)習(xí)步伐, 按需學(xué)習(xí)即可. 比如說(shuō)你對(duì)移動(dòng)端比較感興趣, 工作中也剛好涉及到一些技術(shù)的應(yīng)用,那么我可以專門研究移動(dòng)端相關(guān)的技術(shù)和框架, 又或者你對(duì)企業(yè)后臺(tái)/中臺(tái)產(chǎn)品感興趣, 比較喜歡開(kāi)發(fā)PC端項(xiàng)目, 那么我們可以專門研究這種類型的js庫(kù)或者框架, 接下來(lái)筆者也是按照不同前端業(yè)務(wù)的需求, 來(lái)整理一份能快速應(yīng)用到工作中的js庫(kù), 以提高大家的開(kāi)發(fā)效率.

js常用工具類

1. 一個(gè)一致性、模塊化、高性能的 JavaScript 實(shí)用工具庫(kù)。

2. ramda?一個(gè)很重要的庫(kù)，提供了許多有用的方法，每個(gè) JavaScript 程序員都應(yīng)該掌握這個(gè)工具

3. day.js?一個(gè)輕量的處理時(shí)間和日期的 JavaScript 庫(kù)，和 Moment.js 的 API 設(shè)計(jì)保持完全一樣, 體積只有2kb

4. big.js?一個(gè)小型，快速的JavaScript庫(kù)，用于任意精度的十進(jìn)制算術(shù)運(yùn)算

5. qs?一個(gè) url參數(shù)轉(zhuǎn)化 (parse和stringify)的輕量級(jí)js庫(kù)

dom庫(kù)

1. JQuery?封裝了各種dom/事件操作, 設(shè)計(jì)思想值得研究借鑒

2. zepto?jquery的輕量級(jí)版本, 適合移動(dòng)端操作

3. fastclick?一個(gè)簡(jiǎn)單易用的庫(kù)，它消除了移動(dòng)端瀏覽器上的物理點(diǎn)擊和觸發(fā)一個(gè) click 事件之間的 300ms 的延遲。目的就是在不干擾你目前的邏輯的同時(shí)，讓你的應(yīng)用感覺(jué)不到延遲，反應(yīng)更加靈敏。

文件處理

1. file-saver?一個(gè)在客戶端保存文件的解決方案，非常適合在客戶端上生成文件的Web應(yīng)用程序

2. js-xlsx?一個(gè)強(qiáng)大的解析和編寫excel文件的庫(kù)

網(wǎng)絡(luò)請(qǐng)求

1. Axios?一個(gè)基于 Promise 的 HTTP 庫(kù)，可用在 Node.js 和瀏覽器上發(fā)起 HTTP 請(qǐng)求，支持所有現(xiàn)代瀏覽器，甚至包括 IE8+

2. Superagent?基于Ajax的優(yōu)化, 可以與 Node.js HTTP 客戶端搭配使用

3. fly.js?一個(gè)基于promise的http請(qǐng)求庫(kù), 可以用在node.js, Weex, 微信小程序, 瀏覽器, React Native中

動(dòng)畫庫(kù)

1. Anime.js?一個(gè)JavaScript動(dòng)畫庫(kù)，可以處理CSS屬性，單個(gè)CSS轉(zhuǎn)換，SVG或任何DOM屬性以及JavaScript對(duì)象

2. Velocity?一個(gè)高效的 Javascript 動(dòng)畫引擎，與jQuery的 $.animate() 有相同的API, 同時(shí)還支持彩色動(dòng)畫、轉(zhuǎn)換、循環(huán)、畫架、SVG支持和滾動(dòng)等效果

3. Vivus?一個(gè)零依賴的JavaScript動(dòng)畫庫(kù)，可以讓我們用SVG制作動(dòng)畫，使其具有被繪制的外觀

4. GreenSock JS?一個(gè)JavaScript動(dòng)畫庫(kù)，用于創(chuàng)建高性能、零依賴、跨瀏覽器動(dòng)畫，已在超過(guò)400萬(wàn)個(gè)網(wǎng)站上使用, 并且可以在React、Vue、Angular項(xiàng)目中使用

5. Scroll Reveal?零依賴，為 web 和移動(dòng)瀏覽器提供了簡(jiǎn)單的滾動(dòng)動(dòng)畫，以動(dòng)畫的方式顯示滾動(dòng)中的內(nèi)容

6. Kute.js?一個(gè)強(qiáng)大高性能且可擴(kuò)展的原生JavaScript動(dòng)畫引擎，具有跨瀏覽器動(dòng)畫的基本功能

7. Typed.js?一個(gè)輕松實(shí)現(xiàn)打字效果的js插件

8. fullPage.js?一個(gè)可輕易創(chuàng)建全屏滾動(dòng)網(wǎng)站的js滾動(dòng)動(dòng)畫庫(kù), 兼容性無(wú)可替代

9. iscroll?移動(dòng)端使用的一款輕量級(jí)滾動(dòng)插件

鼠標(biāo)/鍵盤相關(guān)

1. KeyboardJS?一個(gè)在瀏覽器中使用的庫(kù)（與node.js兼容）.它使開(kāi)發(fā)人員可以輕松設(shè)置鍵綁定和使用組合鍵來(lái)設(shè)置復(fù)雜的綁定.

2. SortableJS?功能強(qiáng)大的JavaScript 拖拽庫(kù)

圖形/圖像處理庫(kù)

1. html2canvas?一個(gè)強(qiáng)大的使用js開(kāi)發(fā)的瀏覽器網(wǎng)頁(yè)截圖工具

2. dom-to-image?一個(gè)可以將任意DOM節(jié)點(diǎn)轉(zhuǎn)換為用JavaScript編寫的矢量（SVG）或光柵（PNG或JPEG）圖像的庫(kù)

3. pica?一個(gè)在瀏覽器中調(diào)整圖像大小，而不會(huì)出現(xiàn)像素失真，處理速度非?？斓膱D片處理庫(kù)

4. Lena.js?一個(gè)輕量級(jí)的可以給你圖像加各種濾鏡的js庫(kù)

5. Compressor.js?一個(gè)使用本地canvas.toBlob API進(jìn)行圖像有損壓縮的js庫(kù)

6. Fabric.js?一個(gè)易于使用的基于HTML5 canvas元素的圖片編輯器

7. merge-images?一個(gè)將多張圖片合并成一張圖的js插件

8. cropperjs?一款強(qiáng)大的圖片裁切庫(kù), 支持靈活的圖片裁切方式

9. Grade?一個(gè)基于圖像中的前2種主要顏色生成互補(bǔ)漸變背景的庫(kù)