前端的一些瑞士軍刀 - JS 庫
每個開發都需要熟練掌握或者熟悉一些常用庫,來豐富自己的開發百寶箱。本文只需要 6 分鐘,好好享用。
之前有很多人問學好前端需要學習哪些 js 庫, 主流框架應該學 vue 還是 react ? 針對這些問題, 筆者來說說自己的看法和學習總結.
首先我覺得在學習任何知識之前必須要有一個明確的學習目標, 知道自己爲什麼要學它, 而不是看網上說的一股腦的給你灌輸各種知識, 讓你學習各種庫, 從而不斷的製造大家的焦慮感.
前端由於入行門檻低, 更新換代很快, 每年都會有大量新的框架和庫出現, 也有大量庫被淘汰 (比如 JQuery
, 但是學習它的設計思想很有必要). 所以我們大可不必擔心, 保持自己的學習步伐, 按需學習即可. 比如說你對移動端比較感興趣, 工作中也剛好涉及到一些技術的應用, 那麼我可以專門研究移動端相關的技術和框架, 又或者你對企業後臺 / 中臺產品感興趣, 比較喜歡開發 PC 端項目, 那麼我們可以專門研究這種類型的 js 庫或者框架, 接下來筆者也是按照不同前端業務的需求, 來整理一份能快速應用到工作中的 js 庫, 以提高大家的開發效率.
js 常用工具類
-
lodash 一個一致性、模塊化、高性能的 JavaScript 實用工具庫。
-
ramda 一個很重要的庫,提供了許多有用的方法,每個 JavaScript 程序員都應該掌握這個工具
-
day.js 一個輕量的處理時間和日期的 JavaScript 庫,和 Moment.js 的 API 設計保持完全一樣, 體積只有 2kb
-
big.js 一個小型,快速的 JavaScript 庫,用於任意精度的十進制算術運算
-
qs 一個 url 參數轉化 (parse 和 stringify) 的輕量級 js 庫
dom 庫
-
JQuery 封裝了各種 dom / 事件操作, 設計思想值得研究借鑑
-
zepto jquery 的輕量級版本, 適合移動端操作
-
fastclick 一個簡單易用的庫,它消除了移動端瀏覽器上的物理點擊和觸發一個 click 事件之間的 300ms 的延遲。目的就是在不干擾你目前的邏輯的同時,讓你的應用感覺不到延遲,反應更加靈敏。
文件處理
-
file-saver 一個在客戶端保存文件的解決方案,非常適合在客戶端上生成文件的 Web 應用程序
-
js-xlsx 一個強大的解析和編寫 excel 文件的庫
網絡請求
-
Axios 一個基於 Promise 的 HTTP 庫,可用在 Node.js 和瀏覽器上發起 HTTP 請求,支持所有現代瀏覽器,甚至包括 IE8+
-
Superagent 基於 Ajax 的優化, 可以與 Node.js HTTP 客戶端搭配使用
-
fly.js 一個基於 promise 的 http 請求庫, 可以用在 node.js, Weex, 微信小程序, 瀏覽器, React Native 中
動畫庫
-
Anime.js 一個 JavaScript 動畫庫,可以處理 CSS 屬性,單個 CSS 轉換,SVG 或任何 DOM 屬性以及 JavaScript 對象
-
Velocity 一個高效的 Javascript 動畫引擎,與 jQuery 的 $.animate() 有相同的 API, 同時還支持彩色動畫、轉換、循環、畫架、SVG 支持和滾動等效果
-
Vivus 一個零依賴的 JavaScript 動畫庫,可以讓我們用 SVG 製作動畫,使其具有被繪製的外觀
-
GreenSock JS 一個 JavaScript 動畫庫,用於創建高性能、零依賴、跨瀏覽器動畫,已在超過 400 萬個網站上使用, 並且可以在 React、Vue、Angular 項目中使用
-
Scroll Reveal 零依賴,爲 web 和移動瀏覽器提供了簡單的滾動動畫,以動畫的方式顯示滾動中的內容
-
Kute.js 一個強大高性能且可擴展的原生 JavaScript 動畫引擎,具有跨瀏覽器動畫的基本功能
-
Typed.js 一個輕鬆實現打字效果的 js 插件
-
fullPage.js 一個可輕易創建全屏滾動網站的 js 滾動動畫庫, 兼容性無可替代
-
iscroll 移動端使用的一款輕量級滾動插件
鼠標 / 鍵盤相關
-
KeyboardJS 一個在瀏覽器中使用的庫(與 node.js 兼容). 它使開發人員可以輕鬆設置鍵綁定和使用組合鍵來設置複雜的綁定.
-
SortableJS 功能強大的 JavaScript 拖拽庫
圖形 / 圖像處理庫
-
html2canvas 一個強大的使用 js 開發的瀏覽器網頁截圖工具
-
dom-to-image 一個可以將任意 DOM 節點轉換爲用 JavaScript 編寫的矢量(SVG)或光柵(PNG 或 JPEG)圖像的庫
-
pica 一個在瀏覽器中調整圖像大小,而不會出現像素失真,處理速度非常快的圖片處理庫
-
Lena.js 一個輕量級的可以給你圖像加各種濾鏡的 js 庫
-
Compressor.js 一個使用本地 canvas.toBlob API 進行圖像有損壓縮的 js 庫
-
Fabric.js 一個易於使用的基於 HTML5 canvas 元素的圖片編輯器
-
merge-images 一個將多張圖片合併成一張圖的 js 插件
-
cropperjs 一款強大的圖片裁切庫, 支持靈活的圖片裁切方式
-
Grade 一個基於圖像中的前 2 種主要顏色生成互補漸變背景的庫
以上這些 js 庫不必每一樣都去了解和深究, 技術都是爲業務服務的, 所以我們按需使用和學習即可. 至於像 react 或者 vue 這種框架的相關生態, 筆者這裏就不一一介紹了, 官網文檔上都有非常詳細的生態集, 感興趣的朋友自行了解即可.
本文由 Readfog 進行 AMP 轉碼,版權歸原作者所有。
來源:https://mp.weixin.qq.com/s/AwfKnQqnbQdBxSI5ZQ9fkA