radash

一個(gè)比 lodash 更現(xiàn)代的實(shí)用工具庫(kù)。它提供了 tryit 和 retry 等新功能。源碼可讀性強(qiáng)，大部分功能無(wú)需安裝即可直接復(fù)制使用。

Github：https://github.com/sodiray/radash

圖片

dayjs

Day.js 是一個(gè)極簡(jiǎn)的 JavaScript 庫(kù)，大小只有 2KB。它與 Moment.js 很大程度上兼容，提供日期解析、操作和顯示，并支持多語(yǔ)言。

Github：https://github.com/iamkun/dayjs

圖片

driver

Driver.js 是一個(gè)輕量級(jí)的 JavaScript 庫(kù)，用于創(chuàng)建頁(yè)面導(dǎo)覽。它易于使用，壓縮后只有 5KB。

Github：https://github.com/kamranahmedse/driver.js

圖片

@formkit/drag-and-drop

FormKit DnD 是一個(gè)小型的、與框架無(wú)關(guān)的拖放庫(kù)，壓縮后約為 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)畫(huà)也能表現(xiàn)良好。它提供了一些內(nèi)置形狀，如直線、圓形和半圓形，但您也可以使用任何矢量圖形編輯器創(chuàng)建自定義形狀的進(jìn)度條。

Github：https://github.com/kimmobrunfeldt/progressbar.js

圖片

tesseract

純 JavaScript OCR 庫(kù)，支持 100 多種語(yǔ)言。它對(duì)于識(shí)別圖像中的文本和基于搜索過(guò)濾圖像非常有用。

Github：https://github.com/naptha/tesseract.js

圖片

圖片

zxcvbn

zxcvbn 是一款密碼強(qiáng)度估算器，靈感來(lái)自密碼破解者。它使用模式匹配和保守估計(jì)法識(shí)別并分析了 4 萬(wàn)多個(gè)常用密碼，過(guò)濾掉了常見(jiàn)的名、姓、維基百科中的流行詞和許多文化中的常用詞，并識(shí)別出日期、重復(fù)（如 “aaa”）、序列（如 “abcd”）、鍵盤(pán)敲擊（如 “qwertyuiop”）和 l33t speak 等常見(jiàn)模式。

Github：https://github.com/zxcvbn-ts/zxcvbn

圖片

sunshine-track

專為前端監(jiān)控而設(shè)計(jì)，靈感來(lái)自 web-see。它報(bào)告用戶行為、錯(cuò)誤、頁(yè)面轉(zhuǎn)換、白屏和性能指標(biāo)。它適用于 Vue、React、Angular 等。

Github：https://github.com/sanxin-lin/sunshine-track

特點(diǎn)：

• 用戶行為報(bào)告：點(diǎn)擊、頁(yè)面轉(zhuǎn)換、請(qǐng)求等。
• 手動(dòng)報(bào)告：用于手動(dòng)報(bào)告的 Vue 自定義指令和函數(shù)。
• 自定義報(bào)告：格式化并確定要報(bào)告的數(shù)據(jù)。
• 請(qǐng)求數(shù)據(jù)上報(bào)：過(guò)濾并決定上報(bào)哪些請(qǐng)求數(shù)據(jù)。
• 報(bào)告方法：img、http、beacon、xhr、fetch、帶有自定義標(biāo)頭。
• 數(shù)據(jù)緩存：本地存儲(chǔ)、瀏覽器緩存、IndexedDB。
• 報(bào)告閾值：數(shù)據(jù)報(bào)告的可配置閾值。
• 全局點(diǎn)擊報(bào)告：配置 DOM 節(jié)點(diǎn)報(bào)告的選擇器和文本。
• 頁(yè)面性能指標(biāo)：白屏、FP、FCP、LCP、CLS、TTFB、FID等。

lottie

由 Airbnb 開(kāi)發(fā)的 Lottie 是一個(gè)跨平臺(tái)動(dòng)畫(huà)庫(kù)。設(shè)計(jì)師可以在 After Effects 中創(chuàng)建動(dòng)畫(huà)，并將其導(dǎo)出為 JSON 文件，這些文件可以無(wú)縫集成到移動(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)畫(huà)。
• 跨平臺(tái)：支持 Android、iOS、Web 和 React Native 等框架。
• 高性能：使用原生圖形，比 CSS/JS 具有更好的性能。
• 可定制：可以修改動(dòng)畫(huà)的顏色、大小、速度等。
• 輕量級(jí)：文件大小較小，因?yàn)樗鼈儍H包含關(guān)鍵幀數(shù)據(jù)。
• 易于使用：簡(jiǎn)單的 API，易于集成。
• 豐富的效果：支持 After Effects 的復(fù)雜動(dòng)畫(huà)。
• 實(shí)時(shí)渲染：在不同的屏幕尺寸上保持質(zhì)量。
• 社區(qū)支持：活躍的開(kāi)源社區(qū)，更新頻繁。
• 動(dòng)畫(huà)緩存：支持緩存，提高重復(fù)播放性能。

Lottie 用途廣泛，適用于簡(jiǎn)單的加載程序到復(fù)雜的交互式動(dòng)畫(huà)。

圖片

原文：https://blog.stackademic.com/10-extremely-useful-front-end-libraries-you-might-have-been-looking-for-ce652e244505