分享十個(gè)很實(shí)用的前端工具庫(kù),快來(lái)看看吧
分享十個(gè)爆火的前端庫(kù),但是這些前端庫(kù)你可能都沒(méi)聽(tīng)過(guò)~
@logicflow/core
LogicFlow 是一款流程圖編輯框架,提供了一系列流程圖交互、編輯所必需的功能和簡(jiǎn)單靈活的節(jié)點(diǎn)自定義、插件等拓展機(jī)制,方便我們快速在業(yè)務(wù)系統(tǒng)內(nèi)滿(mǎn)足類(lèi)流程圖的需求
- 高拓展性:兼容各種產(chǎn)品自定義的流程編輯需求,絕大部分模塊以插件的形式實(shí)現(xiàn),支持各模塊自由插拔。
- 重執(zhí)行:流程圖能完備的表達(dá)業(yè)務(wù)邏輯,不受流程引擎限制。
- 專(zhuān)業(yè):專(zhuān)注于業(yè)務(wù)流程圖編輯的框架
NProgress
NProgress 是一個(gè)使用起來(lái)很方便的進(jìn)度條工具庫(kù)
一般在項(xiàng)目中使用它來(lái)展示頁(yè)面加載的進(jìn)度,或者路由跳轉(zhuǎn)的進(jìn)度~
tesseract.js
tesseract.js 可以識(shí)別圖片中的文字,并把這些文字轉(zhuǎn)化成文本,返回給你
在識(shí)別圖片文字,根據(jù)搜索過(guò)濾圖片等這些需求的時(shí)候,可以使用 tesseract.js 這個(gè)庫(kù)~
@zxcvbn-ts/core
平時(shí)在做注冊(cè)功能的時(shí)候,我們可能得計(jì)算用戶(hù)密碼的密碼強(qiáng)度,從而去提醒用戶(hù)
@zxcvbn-ts/core 是 zxcvbn 密碼強(qiáng)度估計(jì)器的 TypeScript 實(shí)現(xiàn)版本,用于幫助開(kāi)發(fā)者評(píng)估用戶(hù)設(shè)置密碼的復(fù)雜度和安全性,計(jì)算的依據(jù)有:
- 密碼長(zhǎng)度: 越長(zhǎng)分?jǐn)?shù)越高
- 字符類(lèi)型: 數(shù)字、字母、符號(hào)
- 詞典攻擊檢測(cè): 內(nèi)置詞典列表,檢測(cè)密碼強(qiáng)度
- 評(píng)分系統(tǒng): 0-4分,分?jǐn)?shù)越高越安全
- 熵計(jì)算: 評(píng)測(cè)密碼所需嘗試次數(shù),熵越高,分?jǐn)?shù)越高
dayjs
dayjs 無(wú)疑是當(dāng)今前端市場(chǎng)上時(shí)間工具庫(kù)的大熱門(mén),使用方式跟 momentjs 類(lèi)似,但是體積是 momentjs 的五分之一?。?!格式化、時(shí)區(qū)設(shè)置、按需加載等功能,樣樣不少~
qrcode
qrcode 被用的最廣泛的就是把一個(gè) URL 轉(zhuǎn)換為 一個(gè)二維碼,可供給用戶(hù)去掃碼~
crypto-js
前端加密工具庫(kù)中當(dāng)之無(wú)愧的王者?。。?nèi)置各種加密、解密算法?。?!一般用來(lái)對(duì)密碼、緩存等敏感信息進(jìn)行加密、解密~
sunshine-track
sunshine-track 應(yīng)用于前端監(jiān)控,s基于 行為上報(bào),實(shí)現(xiàn)了用戶(hù)行為、錯(cuò)誤監(jiān)控、頁(yè)面跳轉(zhuǎn)、頁(yè)面白屏檢測(cè)、頁(yè)面性能檢測(cè)等上報(bào)功能。適用于Vue、React、Angular等框架。
sunshine-track具備以下功能:
- 用戶(hù)行為上報(bào):包括 點(diǎn)擊、跳轉(zhuǎn)頁(yè)面、跳轉(zhuǎn)頁(yè)面記錄數(shù)組、請(qǐng)求 等
- 用戶(hù)手動(dòng)上報(bào):提供 Vue 自定義指令 以及add、report函數(shù),實(shí)現(xiàn)用戶(hù)手動(dòng)上報(bào)
- 自定義上報(bào):提供 格式化上報(bào)數(shù)據(jù)、自定義上報(bào)函數(shù)、自定義決定上不上報(bào) 等配置項(xiàng),更靈活地上報(bào)數(shù)據(jù)
- 請(qǐng)求數(shù)據(jù)上報(bào):提供 檢測(cè)請(qǐng)求返回、過(guò)濾請(qǐng)求 等配置項(xiàng),讓用戶(hù)決定上報(bào)哪些請(qǐng)求數(shù)據(jù)
- 上報(bào)方式:提供 上報(bào)方式 配置項(xiàng),用戶(hù)可選擇 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):可通過(guò)配置 選擇器、元素文本,對(duì)全局DOM節(jié)點(diǎn)進(jìn)行點(diǎn)擊上報(bào)
- 頁(yè)面的性能檢測(cè),包括 白屏、FP、FCP、LCP、CLS、TTFB、FID 等
localforage
- localforage 用于瀏覽器本地的緩存操作,并且它的操作都是異步的,這樣做的好處是可以降低代碼執(zhí)行阻塞的風(fēng)險(xiǎn)
- localforage 用起來(lái)非常方便,因?yàn)樗峁┝艘幌盗械?API ,比如增加、修改、刪除、查找等等
- localforage 默認(rèn)使用的存儲(chǔ)方案是 IndexedDB,但是如果瀏覽器不兼容的話(huà),會(huì)自動(dòng)降級(jí)為 storage
lodash-es
以前的 lodash 版本不支持按需加載,這導(dǎo)致了打包后整個(gè)產(chǎn)物的體積很大,所以后來(lái)官方推出了 lodash-es
lodash-es 支持按需加載,這大大降低了打包的體積。
以前使用 lodash 時(shí):
現(xiàn)在使用 lodash-es 可以這么去用了~