超火超實(shí)用的 10 個(gè)前端工具庫，可能就是你一直在尋找的！

作者：林三心不學(xué)挖掘機(jī) 2024-06-17 08:43:53

LogicFlow 是一款流程圖編輯框架，提供了一系列流程圖交互、編輯所必需的功能和簡單靈活的節(jié)點(diǎn)自定義、插件等拓展機(jī)制，方便我們快速在業(yè)務(wù)系統(tǒng)內(nèi)滿足類流程圖的需求。

前言

大家好，我是林三心，用最通俗易懂的話講最難的知識點(diǎn)是我的座右銘，基礎(chǔ)是進(jìn)階的前提是我的初心！

分享十個(gè)爆火的前端庫，但是這些前端庫你可能都沒聽過。

圖片

兼容各種產(chǎn)品自定義的流程編輯需求，絕大部分模塊以插件的形式實(shí)現(xiàn)，支持各模塊自由插拔。

流程圖能完備的表達(dá)業(yè)務(wù)邏輯，不受流程引擎限制。

專注于業(yè)務(wù)流程圖編輯的框架。

圖片

NProgress 是一個(gè)使用起來很方便的進(jìn)度條工具庫。

圖片

一般在項(xiàng)目中使用它來展示頁面加載的進(jìn)度，或者路由跳轉(zhuǎn)的進(jìn)度。

圖片

tesseract.js 可以識別圖片中的文字，并把這些文字轉(zhuǎn)化成文本，返回給你。

圖片

在識別圖片文字，根據(jù)搜索過濾圖片等這些需求的時(shí)候，可以使用 tesseract.js 這個(gè)庫。

圖片

平時(shí)在做注冊功能的時(shí)候，我們可能得計(jì)算用戶密碼的密碼強(qiáng)度，從而去提醒用戶。

圖片

@zxcvbn-ts/core 是 zxcvbn 密碼強(qiáng)度估計(jì)器的 TypeScript 實(shí)現(xiàn)版本，用于幫助開發(fā)者評估用戶設(shè)置密碼的復(fù)雜度和安全性，計(jì)算的依據(jù)有：

圖片

dayjs 無疑是當(dāng)今前端市場上時(shí)間工具庫的大熱門，使用方式跟 momentjs 類似，但是體積是 momentjs 的五分之一！！！格式化、時(shí)區(qū)設(shè)置、按需加載等功能，樣樣不少。

圖片

qrcode 被用的最廣泛的就是把一個(gè) URL 轉(zhuǎn)換為一個(gè)二維碼，可供給用戶去掃碼。

圖片

前端加密工具庫中當(dāng)之無愧的王者！！！內(nèi)置各種加密、解密算法！！！一般用來對密碼、緩存等敏感信息進(jìn)行加密、解密。

圖片

sunshine-track 應(yīng)用于前端監(jiān)控，s基于行為上報(bào)，實(shí)現(xiàn)了用戶行為、錯(cuò)誤監(jiān)控、頁面跳轉(zhuǎn)、頁面白屏檢測、頁面性能檢測等上報(bào)功能。適用于Vue、React、Angular等框架。

sunshine-track具備以下功能：

? 用戶行為上報(bào)：包括點(diǎn)擊、跳轉(zhuǎn)頁面、跳轉(zhuǎn)頁面記錄數(shù)組、請求等。
? 用戶手動(dòng)上報(bào)：提供 Vue 自定義指令以及add、report函數(shù)，實(shí)現(xiàn)用戶手動(dòng)上報(bào)。
? 自定義上報(bào)：提供格式化上報(bào)數(shù)據(jù)、自定義上報(bào)函數(shù)、自定義決定上不上報(bào) 等配置項(xiàng)，更靈活地上報(bào)數(shù)據(jù)
? 請求數(shù)據(jù)上報(bào)：提供檢測請求返回、過濾請求等配置項(xiàng)，讓用戶決定上報(bào)哪些請求數(shù)據(jù)。
? 上報(bào)方式：提供上報(bào)方式配置項(xiàng)，用戶可選擇 img、http、beacon 三種方式，http方式又支持 xhr、fetch 兩種，且支持自定義headers。
? 上報(bào)數(shù)據(jù)緩存：可配置本地緩存、瀏覽器本地緩存、IndexedDB 三種方式。
? 上報(bào)數(shù)據(jù)閾值：可配置上報(bào)數(shù)據(jù) 閾值，達(dá)到閾值后進(jìn)行上報(bào)操作。
? 全局點(diǎn)擊上報(bào)：可通過配置選擇器、元素文本，對全局DOM節(jié)點(diǎn)進(jìn)行點(diǎn)擊上報(bào)。
? 頁面的性能檢測，包括白屏、FP、FCP、LCP、CLS、TTFB、FID 等。

圖片