這八 個常見的前端開源庫，你一定要知道！
作者：程序員Sunday
Tesseract.js? 是一個用于在瀏覽器和 Node.js 中執(zhí)行光學字符識別（OCR）的 JavaScript 庫。它基于 Google 的開源 OCR 引擎 Tesseract，能夠?qū)D片中的文本提取并轉(zhuǎn)換為可編輯的文本格式。
Hello，大家好，我是 Sunday。
庫的使用是我們在日常開發(fā)中的必備操作。那么今天，為大家推薦 8 個常見的前端庫，以幫助大家更好的完成日常工作！
01：radash
GitHub 地址：https://github.com/rayepps/radash
圖片
Radash 是一個用于 TypeScript 和 JavaScript 的實用工具庫，專注于性能優(yōu)化和開發(fā)效率。它提供了一系列函數(shù)，簡化常見的代碼操作，類似于 Lodash，但更輕量級且專為現(xiàn)代 TypeScript 環(huán)境設計。Radash 的目標是提供一套高度可定制、簡潔且性能良好的函數(shù)，以滿足現(xiàn)代 JavaScript 應用程序的需求。
使用示例
假設我們要處理一個包含用戶信息的數(shù)組并從中提取出年齡大于 18 歲的用戶，可以使用 Radash 中的 filter 函數(shù)：
import { filter } from 'radash'
const users = [
{ id: 1, name: 'Alice', age: 25 },
{ id: 2, name: 'Bob', age: 17 },
{ id: 3, name: 'Charlie', age: 19 }
]
const adults = filter(users, user => user.age > 18)
console.log(adults)
// 輸出: [{ id: 1, name: 'Alice', age: 25 }, { id: 3, name: 'Charlie', age: 19 }]02：dayjs
GitHub 地址：https://github.com/iamkun/dayjs
圖片
Day.js 是一個輕量級的 JavaScript 日期處理庫，專注于簡化日期和時間的操作。它提供了類似于 Moment.js 的 API，但體積更小，僅約 2kB。Day.js 支持鏈式操作，具有良好的性能，并支持解析、驗證、操作和顯示日期時間。
主要特點
- 輕量級：僅 2kB，減少了對項目的體積影響。
- API 簡潔：與 Moment.js 類似，學習成本低。
- Immutable：所有操作返回新實例，確保數(shù)據(jù)不可變。
- 國際化支持：內(nèi)置對多語言的支持。
- 插件擴展：提供豐富的插件系統(tǒng)，按需加載功能。
使用示例
import dayjs from 'dayjs';
// 獲取當前日期
const now = dayjs();
console.log(now.format()); // 輸出: 當前日期和時間
// 日期加減
const future = dayjs().add(7, 'day'); // 當前日期加 7 天
console.log(future.format('YYYY-MM-DD')); // 輸出: 加 7 天后的日期
// 日期比較
const date1 = dayjs('2023-01-01');
const date2 = dayjs('2024-01-01');
console.log(date1.isBefore(date2)); // 輸出: true
// 日期格式化
const formatted = dayjs().format('YYYY-MM-DD HH:mm:ss');
console.log(formatted); // 輸出: 當前日期和時間按指定格式顯示03：driver
GitHub 地址：https://github.com/kamranahmedse/driver.js
圖片
Driver.js 是一個輕量級的 JavaScript 庫，用于在網(wǎng)頁中創(chuàng)建引導步驟或教程，幫助用戶逐步了解界面上的功能。它通過高亮網(wǎng)頁的特定部分并提供相應的說明或提示，讓用戶更容易理解如何使用某個應用程序或界面。
主要特點
- 引導功能：逐步引導用戶操作頁面，提供互動式的幫助系統(tǒng)。
- 輕量易用：庫的體積較小，且 API 簡潔，方便集成。
- 支持多種元素定位：可以高亮頁面的任意 HTML 元素，幫助用戶了解具體功能。
- 可自定義樣式：允許自定義提示框的樣式，使其與應用的設計風格保持一致。
- 跨瀏覽器兼容：支持主流的現(xiàn)代瀏覽器。
使用示例
import Driver from 'driver.js';
import 'driver.js/dist/driver.min.css'; // 導入樣式
// 創(chuàng)建一個 Driver 實例
const driver = new Driver();
// 定義步驟
driver.defineSteps([
{
element: '#step1', // 要高亮的元素
popover: {
title: '歡迎使用功能 1',
description: '這是我們應用中的第一個功能，它非常有用。',
position: 'bottom', // 提示框的顯示位置
}
},
{
element: '#step2',
popover: {
title: '功能 2',
description: '這是另一個強大的功能，您可以在這里找到它。',
position: 'top',
}
}
]);
// 開始引導
driver.start();應用場景
- 新用戶引導：為新用戶提供首次使用的引導，逐步展示主要功能。
- 復雜應用的教程：幫助用戶快速掌握復雜界面中的關(guān)鍵功能。
- 功能更新提示：當應用有新功能或重大更新時，通過引導提示用戶新的使用方式。
04：Draggable JS
GitHub 地址：https://github.com/Shopify/draggable
圖片
Draggable JS 是 Shopify 開發(fā)的一個現(xiàn)代拖放庫，支持拖拽、排序和與不同容器之間的交互。它設計輕量級、模塊化，能夠在任何現(xiàn)代瀏覽器中高效運行。Draggable 提供了良好的可擴展性和易用性，使開發(fā)者可以輕松實現(xiàn)豐富的拖放交互。
主要特點
- 模塊化設計：支持按需加載，功能包括拖拽 (Draggable)、排序 (Sortable)、交換 (Swappable) 等。
- 觸摸支持：默認支持移動設備上的觸摸事件。
- 多容器支持：可以在多個容器之間拖拽和排序元素。
- 可擴展性強：支持自定義拖放行為、拖動約束、回調(diào)函數(shù)和事件監(jiān)聽器。
- 事件驅(qū)動：通過豐富的事件接口，可以在拖放的不同階段執(zhí)行操作。
使用示例
<div class="container" id="container-1">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
<div class="container" id="container-2">
<div class="item">Item A</div>
<div class="item">Item B</div>
<div class="item">Item C</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable/lib/draggable.bundle.js"></script>
<script>
const containers = document.querySelectorAll('.container');
const draggable = new Draggable(containers, {
draggable: '.item',
});
// 監(jiān)聽拖拽事件
draggable.on('drag:start', (event) => {
console.log('開始拖拽:', event);
});
draggable.on('drag:stop', (event) => {
console.log('拖拽結(jié)束:', event);
});
</script>
<style>
.container {
display: flex;
gap: 10px;
}
.item {
width: 100px;
height: 100px;
background-color: #007BFF;
color: white;
display: flex;
align-items: center;
justify-content: center;
cursor: move;
}
</style>主要功能模塊
- Draggable: 核心模塊，提供基本的拖動功能。
- Sortable: 提供排序功能，允許用戶在列表中對元素重新排序。
- Swappable: 提供交換功能，支持兩個容器之間的元素交換。
- Droppable: 支持元素放置在特定區(qū)域或容器中。
- Collidable: 提供元素之間的碰撞檢測，避免元素重疊。
應用場景
- 卡片拖拽：比如在看板（Trello 風格）應用中，用戶可以通過拖拽任務卡片進行任務管理。
- 拖拽排序：如文件、圖片或列表項的拖拽排序功能。
- 自定義交互：適用于需要高定制化拖拽體驗的交互，比如商品排列、頁面布局等。
05：logicflow
GitHub 地址：https://github.com/didi/LogicFlow
LogicFlow 是一個用于構(gòu)建流程圖的前端框架，專注于流程設計和可視化編輯。它提供了基礎(chǔ)的圖形編輯能力，支持自定義節(jié)點、邊和流程控制，適用于工作流、決策樹、流程管理等場景。
主要特點
- 簡潔易用：提供了基礎(chǔ)流程圖的常用功能，開發(fā)者可以快速上手，創(chuàng)建可視化流程。
- 高度可擴展：通過插件機制，開發(fā)者可以自由擴展節(jié)點和邊的功能，支持自定義圖形。
- 支持多種操作：如拖拽、縮放、對齊、自動布局等常用操作，提升用戶體驗。
- 事件驅(qū)動：支持多種流程圖事件，可以在圖形的不同交互階段執(zhí)行操作。
- 跨平臺支持：能夠在瀏覽器和各種 Web 應用中運行，輕松集成到現(xiàn)有項目中。
使用示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LogicFlow 示例</title>
<link rel="stylesheet" >
</head>
<body>
<div id="container" style="width: 100%; height: 500px;"></div>
<script src="https://unpkg.com/@logicflow/core"></script>
<script>
// 創(chuàng)建 LogicFlow 實例
const lf = new LogicFlow({
container: document.querySelector('#container'),
grid: true, // 顯示網(wǎng)格
});
// 渲染流程圖
lf.render({
nodes: [
{
id: 'node_1',
type: 'rect',
x: 100,
y: 100,
text: '開始節(jié)點'
},
{
id: 'node_2',
type: 'rect',
x: 300,
y: 100,
text: '結(jié)束節(jié)點'
}
],
edges: [
{
sourceNodeId: 'node_1',
targetNodeId: 'node_2',
type: 'polyline'
}
]
});
</script>
</body>
</html>核心模塊
- 節(jié)點：提供了多種預置節(jié)點類型，如矩形、圓形、菱形等，支持自定義節(jié)點樣式和交互。
- 連線：支持直線、折線、曲線等不同類型的連線，并允許配置連線箭頭、線條樣式等。
- 布局：可以通過插件支持自動布局功能，例如樹形布局、層次布局等。
- 插件系統(tǒng)：LogicFlow 提供了插件系統(tǒng)，開發(fā)者可以通過插件來擴展流程圖功能，如節(jié)點拖拽、鍵盤操作、自動對齊等。
使用場景
- 流程管理系統(tǒng)：適用于企業(yè)中的工作流管理、任務流管理、審批流程等場景。
- 決策樹和算法流程：可以用于展示和設計復雜的決策樹、算法流程圖等。
- 可視化編排工具：用于開發(fā)像 BPMN 流程編輯器、數(shù)據(jù)流編排等可視化工具。
06：ProgressBar
GitHub 地址：https://github.com/kimmobrunfeldt/progressbar.js
ProgressBar.js 是一個用于創(chuàng)建動畫進度條的 JavaScript 庫，它提供了圓形、直線、半圓形等多種進度條樣式，且易于定制。該庫輕量級且靈活，適用于需要展示進度、加載狀態(tài)等場景的網(wǎng)頁應用。
主要特點
- 多種形狀：支持線形、圓形、半圓形等多種進度條形狀，滿足不同設計需求。
- 動畫效果：進度條具有平滑的動畫效果，支持緩動函數(shù)控制動畫。
- 易于使用：API 簡單且靈活，可以快速集成到項目中。
- 高度可定制：支持自定義進度條的顏色、寬度、背景、文本等參數(shù)。
- 無依賴：輕量級庫，無需額外的依賴包。
使用示例
創(chuàng)建一個線形進度條
<div id="container"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/progressbar.js/1.0.1/progressbar.min.js"></script>
<script>
var bar = new ProgressBar.Line('#container', {
strokeWidth: 4, // 線條寬度
easing: 'easeInOut', // 動畫緩動效果
duration: 1400, // 動畫時長
color: '#FFEA82', // 進度條顏色
trailColor: '#eee', // 進度條背景色
trailWidth: 1, // 背景條的寬度
svgStyle: {width: '100%', height: '100%'},
text: {
style: {
color: '#999', // 文字顏色
position: 'absolute',
right: '0',
top: '30px',
padding: 0,
margin: 0,
transform: null
},
autoStyleContainer: false
},
from: { color: '#FFEA82' }, // 動畫開始顏色
to: { color: '#ED6A5A' }, // 動畫結(jié)束顏色
step: (state, bar) => {
bar.setText(Math.round(bar.value() * 100) + ' %'); // 設置文字顯示百分比
}
});
// 動畫到 100% 完成
bar.animate(1.0);
</script>07：Tesseract
GitHub 地址：https://github.com/naptha/tesseract.js
圖片
Tesseract.js 是一個用于在瀏覽器和 Node.js 中執(zhí)行光學字符識別（OCR）的 JavaScript 庫。它基于 Google 的開源 OCR 引擎 Tesseract，能夠?qū)D片中的文本提取并轉(zhuǎn)換為可編輯的文本格式。
主要特點
- 跨平臺支持：支持瀏覽器和 Node.js 環(huán)境，無需服務器端依賴。
- 多語言支持：內(nèi)置對 100 多種語言的識別支持，包括常見的中英文字體。
- 并行處理：通過 Web Workers 實現(xiàn)并行化處理，提高性能和響應速度。
- 支持自定義訓練數(shù)據(jù)：可以加載自定義的語言包或訓練模型，以提高識別精度。
- 易于使用：提供了簡單易用的 API 和進度反饋機制，方便集成和使用。
使用示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tesseract.js 示例</title>
</head>
<body>
<h1>OCR 示例</h1>
<img id="image" src="example.png" alt="待識別的圖片" width="300">
<div id="output"></div>
<script src="https://cdn.jsdelivr.net/npm/tesseract.js@2/dist/tesseract.min.js"></script>
<script>
// 使用 Tesseract.js 識別圖片中的文字
Tesseract.recognize(
document.getElementById('image'),
'eng', // 選擇識別語言
{
logger: (m) => console.log(m) // 輸出進度日志
}
).then(({ data: { text } }) => {
// 將識別出的文本展示在頁面中
document.getElementById('output').innerText = text;
});
</script>
</body>
</html>應用場景
- 掃描文檔和表單：將掃描的 PDF 或圖片文件中的文本提取為可編輯的格式。
- 自動化數(shù)據(jù)錄入：通過識別發(fā)票、收據(jù)等文檔中的數(shù)據(jù)，自動化輸入和數(shù)據(jù)處理。
- 翻譯應用：結(jié)合 OCR 和翻譯功能，將外語文檔直接轉(zhuǎn)換為本地語言。
- 圖像分析和數(shù)據(jù)提?。簭膱D像中提取關(guān)鍵數(shù)據(jù)，如車牌識別、身份證件信息提取等。
08：zxcvbn
GitHub 地址：https://github.com/zxcvbn-ts/zxcvbn
圖片
zxcvbn 是一個強大的密碼強度評估庫，主要用于評估用戶輸入的密碼的復雜性和強度。它由 Dropbox 開發(fā)，旨在比傳統(tǒng)的密碼強度檢測方法（如僅基于字符長度或字符類型）提供更準確和智能的評估。
主要特點
- 智能密碼強度評估：通過檢測常見密碼模式和用戶輸入習慣（如鍵盤路徑、常用字詞、常見替代符號等），提供更真實的密碼強度反饋。
- 多語言支持：支持多種語言下的常用密碼模式檢測。
- 用戶友好：為用戶提供更好的反饋，幫助他們理解密碼的安全性，同時給出增強密碼強度的建議。
- 快速與高效：即使在復雜密碼的評估過程中，zxcvbn 也能快速返回強度結(jié)果。
使用示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>zxcvbn 示例</title>
</head>
<body>
<h1>密碼強度檢測</h1>
<input type="password" id="password" placeholder="輸入密碼">
<div id="feedback"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/zxcvbn/4.4.2/zxcvbn.js"></script>
<script>
document.getElementById('password').addEventListener('input', function () {
var password = this.value;
var result = zxcvbn(password); // 使用 zxcvbn 評估密碼
document.getElementById('feedback').innerHTML =
'密碼強度: ' + result.score + '/4<br>' +
'反饋: ' + result.feedback.suggestions.join(', ');
});
</script>
</body>
</html>密碼評分
zxcvbn 會為密碼返回一個評分（score），范圍為 0 到 4，表示密碼的強度：
- 0 - 非常弱，容易被破解。
- 1 - 弱，仍然容易被猜測。
- 2 - 中等，具有一定的安全性，但仍有風險。
- 3 - 強，密碼強度較高，不易被破解。
- 4 - 非常強，幾乎不可能被破解。
返回結(jié)果示例
zxcvbn 的返回結(jié)果中包含豐富的信息，除了密碼強度評分外，還包括建議和密碼的詳細分析：
{
score: 3, // 密碼強度評分（0 - 4）
feedback: {
suggestions: ['Add another word or two', 'Avoid common phrases'], // 提示改進建議
warning: 'This is a top-10 common password' // 警告
},
guesses: 10000, // 估計需要多少次嘗試才能破解密碼
crack_times_display: {
online_throttling_100_per_hour: "100 years", // 不同場景下破解時間估算
online_no_throttling_10_per_second: "5 days",
offline_slow_hashing_1e4_per_second: "3 hours",
offline_fast_hashing_1e10_per_second: "instant"
},
sequence: [...], // 檢測到的密碼模式
}使用場景
- 用戶注冊和登錄表單：在用戶注冊時，實時檢測密碼強度，幫助用戶創(chuàng)建更安全的密碼。
- 密碼管理器：評估存儲的密碼的安全性，提醒用戶修改弱密碼。
- 安全審計：對大量密碼進行強度評估，檢測潛在的安全漏洞。
責任編輯：武曉燕
來源：
程序員Sunday
