前端的一些瑞士軍刀 - JS 庫

每個開發都需要熟練掌握或者熟悉一些常用庫,來豐富自己的開發百寶箱。本文只需要 6 分鐘,好好享用。

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

首先我覺得在學習任何知識之前必須要有一個明確的學習目標, 知道自己爲什麼要學它, 而不是看網上說的一股腦的給你灌輸各種知識, 讓你學習各種庫, 從而不斷的製造大家的焦慮感.

前端由於入行門檻低, 更新換代很快, 每年都會有大量新的框架和庫出現, 也有大量庫被淘汰 (比如 JQuery, 但是學習它的設計思想很有必要). 所以我們大可不必擔心, 保持自己的學習步伐, 按需學習即可. 比如說你對移動端比較感興趣, 工作中也剛好涉及到一些技術的應用, 那麼我可以專門研究移動端相關的技術和框架, 又或者你對企業後臺 / 中臺產品感興趣, 比較喜歡開發 PC 端項目, 那麼我們可以專門研究這種類型的 js 庫或者框架, 接下來筆者也是按照不同前端業務的需求, 來整理一份能快速應用到工作中的 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 這種框架的相關生態, 筆者這裏就不一一介紹了, 官網文檔上都有非常詳細的生態集, 感興趣的朋友自行了解即可.

本文由 Readfog 進行 AMP 轉碼,版權歸原作者所有。
來源https://mp.weixin.qq.com/s/AwfKnQqnbQdBxSI5ZQ9fkA