你可能一直在尋找的十個(gè)非常有用的前端庫
radash
一個(gè)比 lodash 更現(xiàn)代的實(shí)用工具庫。它提供了 tryit 和 retry 等新功能。源碼可讀性強(qiáng)，大部分功能無需安裝即可直接復(fù)制使用。
Github：https://github.com/sodiray/radash
圖片
dayjs
Day.js 是一個(gè)極簡的 JavaScript 庫，大小只有 2KB。它與 Moment.js 很大程度上兼容，提供日期解析、操作和顯示，并支持多語言。
Github：https://github.com/iamkun/dayjs
圖片
driver
Driver.js 是一個(gè)輕量級的 JavaScript 庫，用于創(chuàng)建頁面導(dǎo)覽。它易于使用，壓縮后只有 5KB。
Github：https://github.com/kamranahmedse/driver.js
圖片
@formkit/drag-and-drop
FormKit DnD 是一個(gè)小型的、與框架無關(guān)的拖放庫，壓縮后約為 4KB。它采用數(shù)據(jù)優(yōu)先的方法設(shè)計(jì)。
Github：https://github.com/formkit/drag-and-drop
圖片
logicflow
LogicFlow 是一個(gè)流程圖編輯框架，提供了交互和編輯的基本功能，以及靈活的節(jié)點(diǎn)自定義和插件機(jī)制，可滿足流程圖類圖表的業(yè)務(wù)需求。
Github：https://github.com/didi/LogicFlow
圖片
ProgressBar
使用 ProgressBar.js，可以輕松為 Web 創(chuàng)建響應(yīng)式且時(shí)尚的進(jìn)度條。即使在移動(dòng)設(shè)備上，動(dòng)畫也能表現(xiàn)良好。它提供了一些內(nèi)置形狀，如直線、圓形和半圓形，但您也可以使用任何矢量圖形編輯器創(chuàng)建自定義形狀的進(jìn)度條。
Github：https://github.com/kimmobrunfeldt/progressbar.js
圖片
tesseract
純 JavaScript OCR 庫，支持 100 多種語言。它對于識別圖像中的文本和基于搜索過濾圖像非常有用。
Github：https://github.com/naptha/tesseract.js
圖片
圖片
zxcvbn
zxcvbn 是一款密碼強(qiáng)度估算器，靈感來自密碼破解者。它使用模式匹配和保守估計(jì)法識別并分析了 4 萬多個(gè)常用密碼，過濾掉了常見的名、姓、維基百科中的流行詞和許多文化中的常用詞，并識別出日期、重復(fù)（如 “aaa”）、序列（如 “abcd”）、鍵盤敲擊（如 “qwertyuiop”）和 l33t speak 等常見模式。
Github：https://github.com/zxcvbn-ts/zxcvbn
圖片
sunshine-track
專為前端監(jiān)控而設(shè)計(jì)，靈感來自 web-see。它報(bào)告用戶行為、錯(cuò)誤、頁面轉(zhuǎn)換、白屏和性能指標(biāo)。它適用于 Vue、React、Angular 等。
Github：https://github.com/sanxin-lin/sunshine-track
特點(diǎn)：
- 用戶行為報(bào)告：點(diǎn)擊、頁面轉(zhuǎn)換、請求等。
- 手動(dòng)報(bào)告：用于手動(dòng)報(bào)告的 Vue 自定義指令和函數(shù)。
- 自定義報(bào)告：格式化并確定要報(bào)告的數(shù)據(jù)。
- 請求數(shù)據(jù)上報(bào)：過濾并決定上報(bào)哪些請求數(shù)據(jù)。
- 報(bào)告方法：img、http、beacon、xhr、fetch、帶有自定義標(biāo)頭。
- 數(shù)據(jù)緩存：本地存儲、瀏覽器緩存、IndexedDB。
- 報(bào)告閾值：數(shù)據(jù)報(bào)告的可配置閾值。
- 全局點(diǎn)擊報(bào)告：配置 DOM 節(jié)點(diǎn)報(bào)告的選擇器和文本。
- 頁面性能指標(biāo)：白屏、FP、FCP、LCP、CLS、TTFB、FID等。
lottie
由 Airbnb 開發(fā)的 Lottie 是一個(gè)跨平臺動(dòng)畫庫。設(shè)計(jì)師可以在 After Effects 中創(chuàng)建動(dòng)畫，并將其導(dǎo)出為 JSON 文件，這些文件可以無縫集成到移動(dòng)應(yīng)用程序和網(wǎng)站中。
Github：https://github.com/airbnb/lottie-web
優(yōu)點(diǎn)：
- After Effects 兼容性：將 AE 項(xiàng)目 (.json) 轉(zhuǎn)換為應(yīng)用程序/Web 動(dòng)畫。
- 跨平臺：支持 Android、iOS、Web 和 React Native 等框架。
- 高性能：使用原生圖形，比 CSS/JS 具有更好的性能。
- 可定制：可以修改動(dòng)畫的顏色、大小、速度等。
- 輕量級：文件大小較小，因?yàn)樗鼈儍H包含關(guān)鍵幀數(shù)據(jù)。
- 易于使用：簡單的 API，易于集成。
- 豐富的效果：支持 After Effects 的復(fù)雜動(dòng)畫。
- 實(shí)時(shí)渲染：在不同的屏幕尺寸上保持質(zhì)量。
- 社區(qū)支持：活躍的開源社區(qū)，更新頻繁。
- 動(dòng)畫緩存：支持緩存，提高重復(fù)播放性能。
Lottie 用途廣泛，適用于簡單的加載程序到復(fù)雜的交互式動(dòng)畫。
圖片
原文：https://blog.stackademic.com/10-extremely-useful-front-end-libraries-you-might-have-been-looking-for-ce652e244505
