前端高效開發必備的 js 庫

之前端需要學習哪些 js 庫, 主流架構應該學 vue 還是 react ? 針對這些問題, 筆者來說說自己的看法和學習總結。

前端由于入行門檻低, 更新換代很快, 每年都會有大量新的架構和庫出現, 也有大量庫被淘汰。是以我們大可不必擔心, 保持自己的學習步伐, 按需學習即可。接下來筆者也是按照不同前端業務的需求, 來整理一份能快速應用到工作中的js庫, 以提高大家的開發效率.

js常用工具類

1. lodash 一個一緻性、子產品化、高性能的 JavaScript 實用工具庫。
2. ramda 一個很重要的庫，提供了許多有用的方法，每個 JavaScript 程式員都應該掌握這個工具
3. day.js 一個輕量的處理時間和日期的 JavaScript 庫，和 Moment.js 的 API 設計保持完全一樣, 體積隻有2kb
4. big.js 一個小型，快速的JavaScript庫，用于任意精度的十進制算術運算
5. qs 一個 url參數轉化 (parse和stringify)的輕量級js庫

dom庫

1. JQuery 封裝了各種dom/事件操作, 設計思想值得研究借鑒
2. zepto jquery的輕量級版本, 适合移動端操作
3. fastclick 一個簡單易用的庫，它消除了移動端浏覽器上的實體點選和觸發一個 click 事件之間的 300ms 的延遲。目的就是在不幹擾你目前的邏輯的同時，讓你的應用感覺不到延遲，反應更加靈敏。

檔案處理

1. file-saver 一個在用戶端儲存檔案的解決方案，非常适合在用戶端上生成檔案的Web應用程式
2. js-xlsx 一個強大的解析和編寫excel檔案的庫

網絡請求

1. Axios 一個基于 Promise 的 HTTP 庫，可用在 Node.js 和浏覽器上發起 HTTP 請求，支援所有現代浏覽器，甚至包括 IE8+
2. Superagent 基于Ajax的優化, 可以與 Node.js HTTP 用戶端搭配使用
3. fly.js 一個基于promise的http請求庫, 可以用在node.js, Weex, 微信小程式, 浏覽器, React Native中

動畫庫

1. Anime.js 一個JavaScript動畫庫，可以處理CSS屬性，單個CSS轉換，SVG或任何DOM屬性以及JavaScript對象
2. Velocity 一個高效的 Javascript 動畫引擎，與jQuery的 $.animate() 有相同的API, 同時還支援彩色動畫、轉換、循環、畫架、SVG支援和滾動等效果
3. Vivus 一個零依賴的JavaScript動畫庫，可以讓我們用SVG制作動畫，使其具有被繪制的外觀
4. GreenSock JS 一個JavaScript動畫庫，用于建立高性能、零依賴、跨浏覽器動畫，已在超過400萬個網站上使用, 并且可以在React、Vue、Angular項目中使用
5. Scroll Reveal 零依賴，為 web 和移動浏覽器提供了簡單的滾動動畫，以動畫的方式顯示滾動中的内容
6. Kute.js 一個強大高性能且可擴充的原生JavaScript動畫引擎，具有跨浏覽器動畫的基本功能
7. Typed.js 一個輕松實作打字效果的js插件
8. fullPage.js 一個可輕易建立全屏滾動網站的js滾動動畫庫, 相容性無可替代
9. iscroll 移動端使用的一款輕量級滾動插件

滑鼠/鍵盤相關

1. KeyboardJS 一個在浏覽器中使用的庫（與node.js相容）.它使開發人員可以輕松設定鍵綁定和使用組合鍵來設定複雜的綁定.
2. SortableJS 功能強大的JavaScript 拖拽庫

圖形/圖像處理庫

1. html2canvas 一個強大的使用js開發的浏覽器網頁截圖工具
2. dom-to-image 一個可以将任意DOM節點轉換為用JavaScript編寫的矢量（SVG）或光栅（PNG或JPEG）圖像的庫
3. pica 一個在浏覽器中調整圖像大小，而不會出現像素失真，處理速度非常快的圖檔處理庫
4. Lena.js 一個輕量級的可以給你圖像加各種濾鏡的js庫
5. Compressor.js 一個使用本地canvas.toBlob API進行圖像有損壓縮的js庫
6. Fabric.js 一個易于使用的基于HTML5 canvas元素的圖檔編輯器
7. merge-images 一個将多張圖檔合并成一張圖的js插件
8. cropperjs 一款強大的圖檔裁切庫, 支援靈活的圖檔裁切方式
9. Grade 一個基于圖像中的前2種主要顔色生成互補漸變背景的庫

以上這些js庫不必每一樣都去了解和深究, 技術都是為業務服務的, 是以我們按需使用和學習即可. 至于像react或者vue這種架構的相關生态, 筆者這裡就不一一介紹了, 官網文檔上都有非常詳細的生态集, 感興趣的朋友自行了解即可。