前言

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

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

@logicflow/core

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

圖片

• ?? 高拓展性

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

• ?? 重執(zhí)行

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

• ?? 專業(yè)

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

圖片

圖片

NProgress

NProgress 是一個使用起來很方便的進度條工具庫。

圖片

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

圖片

圖片

tesseract.js

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

圖片

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

圖片

圖片

@zxcvbn-ts/core

平時在做注冊功能的時候，我們可能得計算用戶密碼的密碼強度，從而去提醒用戶。

圖片

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

• 密碼長度： 越長分數(shù)越高。
• 字符類型： 數(shù)字、字母、符號。
• 詞典攻擊檢測： 內(nèi)置詞典列表，檢測密碼強度。
• 評分系統(tǒng)： 0-4分，分數(shù)越高越安全。
• 熵計算： 評測密碼所需嘗試次數(shù)，熵越高，分數(shù)越高。

圖片

dayjs

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

圖片

圖片

qrcode

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

圖片

圖片

crypto-js

前端加密工具庫中當(dāng)之無愧的王者?。。?nèi)置各種加密、解密算法?。。∫话阌脕韺γ艽a、緩存等敏感信息進行加密、解密。

圖片

圖片

sunshine-track

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

sunshine-track具備以下功能：

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

圖片

localforage

localforage 用于瀏覽器本地的緩存操作，并且它的操作都是異步的，這樣做的好處是可以降低代碼執(zhí)行阻塞的風(fēng)險。

localforage 用起來非常方便，因為它提供了一系列的 API ，比如增加、修改、刪除、查找等等。

localforage 默認使用的存儲方案是 IndexedDB，但是如果瀏覽器不兼容的話，會自動降級為 storage。

圖片

圖片

lodash-es

以前的 lodash 版本不支持按需加載，這導(dǎo)致了打包后整個產(chǎn)物的體積很大，所以后來官方推出了 lodash-es。

圖片

lodash-es 支持按需加載，這大大降低了打包的體積。

以前使用 lodash 時：

圖片

現(xiàn)在使用 lodash-es 可以這么去用了。

圖片