這八個常見的前端開源庫，你一定要知道！

作者：程序員Sunday 2025-03-17 00:33:00

Radash 是一個用于 TypeScript 和 JavaScript 的實用工具庫，專注于性能優化和開發效率。它提供了一系列函數，簡化常見的代碼操作，類似于 Lodash，但更輕量級且專為現代 TypeScript 環境設計。

庫的使用是我們在日常開發中的必備操作。那么今天，為大家推薦 8 個常見的前端庫，以幫助大家更好的完成日常工作！

1.radash

GitHub 地址：https://github.com/rayepps/radash

Radash 是一個用于 TypeScript 和 JavaScript 的實用工具庫，專注于性能優化和開發效率。它提供了一系列函數，簡化常見的代碼操作，類似于 Lodash，但更輕量級且專為現代 TypeScript 環境設計。Radash 的目標是提供一套高度可定制、簡潔且性能良好的函數，以滿足現代 JavaScript 應用程序的需求。

使用示例

假設我們要處理一個包含用戶信息的數組并從中提取出年齡大于 18 歲的用戶，可以使用 Radash 中的 filter 函數：

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 }]

2.dayjs

GitHub 地址：https://github.com/iamkun/dayjs

Day.js 是一個輕量級的 JavaScript 日期處理庫，專注于簡化日期和時間的操作。它提供了類似于 Moment.js 的 API，但體積更小，僅約 2kB。Day.js 支持鏈式操作，具有良好的性能，并支持解析、驗證、操作和顯示日期時間。

主要特點

輕量級：僅 2kB，減少了對項目的體積影響。
API 簡潔：與 Moment.js 類似，學習成本低。
Immutable：所有操作返回新實例，確保數據不可變。
國際化支持：內置對多語言的支持。
插件擴展：提供豐富的插件系統，按需加載功能。

使用示例

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); // 輸出: 當前日期和時間按指定格式顯示

3.driver

GitHub 地址：https://github.com/kamranahmedse/driver.js

Driver.js 是一個輕量級的 JavaScript 庫，用于在網頁中創建引導步驟或教程，幫助用戶逐步了解界面上的功能。它通過高亮網頁的特定部分并提供相應的說明或提示，讓用戶更容易理解如何使用某個應用程序或界面。

主要特點

引導功能：逐步引導用戶操作頁面，提供互動式的幫助系統。
輕量易用：庫的體積較小，且 API 簡潔，方便集成。
支持多種元素定位：可以高亮頁面的任意 HTML 元素，幫助用戶了解具體功能。
可自定義樣式：允許自定義提示框的樣式，使其與應用的設計風格保持一致。
跨瀏覽器兼容：支持主流的現代瀏覽器。

使用示例

import Driver from 'driver.js';
import 'driver.js/dist/driver.min.css';  // 導入樣式

// 創建一個 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();

應用場景

新用戶引導：為新用戶提供首次使用的引導，逐步展示主要功能。
復雜應用的教程：幫助用戶快速掌握復雜界面中的關鍵功能。
功能更新提示：當應用有新功能或重大更新時，通過引導提示用戶新的使用方式。

4.Draggable JS

GitHub 地址：https://github.com/Shopify/draggable

Draggable JS 是 Shopify 開發的一個現代拖放庫，支持拖拽、排序和與不同容器之間的交互。它設計輕量級、模塊化，能夠在任何現代瀏覽器中高效運行。Draggable 提供了良好的可擴展性和易用性，使開發者可以輕松實現豐富的拖放交互。

主要特點

模塊化設計：支持按需加載，功能包括拖拽 (Draggable)、排序 (Sortable)、交換 (Swappable) 等。
觸摸支持：默認支持移動設備上的觸摸事件。
多容器支持：可以在多個容器之間拖拽和排序元素。
可擴展性強：支持自定義拖放行為、拖動約束、回調函數和事件監聽器。
事件驅動：通過豐富的事件接口，可以在拖放的不同階段執行操作。

使用示例

<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',
  });

  // 監聽拖拽事件
  draggable.on('drag:start', (event) => {
    console.log('開始拖拽:', event);
  });

  draggable.on('drag:stop', (event) => {
    console.log('拖拽結束:', 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: 支持元素放置在特定區域或容器中。
Collidable: 提供元素之間的碰撞檢測，避免元素重疊。

應用場景

卡片拖拽：比如在看板（Trello 風格）應用中，用戶可以通過拖拽任務卡片進行任務管理。
拖拽排序：如文件、圖片或列表項的拖拽排序功能。
自定義交互：適用于需要高定制化拖拽體驗的交互，比如商品排列、頁面布局等。

5.logicflow

GitHub 地址：https://github.com/didi/LogicFlow

LogicFlow 是一個用于構建流程圖的前端框架，專注于流程設計和可視化編輯。它提供了基礎的圖形編輯能力，支持自定義節點、邊和流程控制，適用于工作流、決策樹、流程管理等場景。

主要特點

簡潔易用：提供了基礎流程圖的常用功能，開發者可以快速上手，創建可視化流程。
高度可擴展：通過插件機制，開發者可以自由擴展節點和邊的功能，支持自定義圖形。
支持多種操作：如拖拽、縮放、對齊、自動布局等常用操作，提升用戶體驗。
事件驅動：支持多種流程圖事件，可以在圖形的不同交互階段執行操作。
跨平臺支持：能夠在瀏覽器和各種 Web 應用中運行，輕松集成到現有項目中。

使用示例

<!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>
    // 創建 LogicFlow 實例
    const lf = new LogicFlow({
      container: document.querySelector('#container'),
      grid: true, // 顯示網格
    });

    // 渲染流程圖
    lf.render({
      nodes: [
        {
          id: 'node_1',
          type: 'rect',
          x: 100,
          y: 100,
          text: '開始節點'
        },
        {
          id: 'node_2',
          type: 'rect',
          x: 300,
          y: 100,
          text: '結束節點'
        }
      ],
      edges: [
        {
          sourceNodeId: 'node_1',
          targetNodeId: 'node_2',
          type: 'polyline'
        }
      ]
    });
  </script>
</body>
</html>

核心模塊

節點：提供了多種預置節點類型，如矩形、圓形、菱形等，支持自定義節點樣式和交互。
連線：支持直線、折線、曲線等不同類型的連線，并允許配置連線箭頭、線條樣式等。
布局：可以通過插件支持自動布局功能，例如樹形布局、層次布局等。
插件系統：LogicFlow 提供了插件系統，開發者可以通過插件來擴展流程圖功能，如節點拖拽、鍵盤操作、自動對齊等。

使用場景

流程管理系統：適用于企業中的工作流管理、任務流管理、審批流程等場景。
決策樹和算法流程：可以用于展示和設計復雜的決策樹、算法流程圖等。
可視化編排工具：用于開發像 BPMN 流程編輯器、數據流編排等可視化工具。

6.ProgressBar

GitHub 地址：https://github.com/kimmobrunfeldt/progressbar.js

圖片

ProgressBar.js 是一個用于創建動畫進度條的 JavaScript 庫，它提供了圓形、直線、半圓形等多種進度條樣式，且易于定制。該庫輕量級且靈活，適用于需要展示進度、加載狀態等場景的網頁應用。

主要特點

多種形狀：支持線形、圓形、半圓形等多種進度條形狀，滿足不同設計需求。
動畫效果：進度條具有平滑的動畫效果，支持緩動函數控制動畫。
易于使用：API 簡單且靈活，可以快速集成到項目中。
高度可定制：支持自定義進度條的顏色、寬度、背景、文本等參數。
無依賴：輕量級庫，無需額外的依賴包。

使用示例

創建一個線形進度條

<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' },    // 動畫結束顏色
   step: (state, bar) => {
     bar.setText(Math.round(bar.value() * 100) + ' %'); // 設置文字顯示百分比
   }
 });

 // 動畫到 100% 完成
 bar.animate(1.0);
</script>

7.Tesseract

GitHub 地址：https://github.com/naptha/tesseract.js

Tesseract.js 是一個用于在瀏覽器和 Node.js 中執行光學字符識別（OCR）的 JavaScript 庫。它基于 Google 的開源 OCR 引擎 Tesseract，能夠將圖片中的文本提取并轉換為可編輯的文本格式。

主要特點

跨平臺支持：支持瀏覽器和 Node.js 環境，無需服務器端依賴。
多語言支持：內置對 100 多種語言的識別支持，包括常見的中英文字體。
并行處理：通過 Web Workers 實現并行化處理，提高性能和響應速度。
支持自定義訓練數據：可以加載自定義的語言包或訓練模型，以提高識別精度。
易于使用：提供了簡單易用的 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 或圖片文件中的文本提取為可編輯的格式。
自動化數據錄入：通過識別發票、收據等文檔中的數據，自動化輸入和數據處理。
翻譯應用：結合 OCR 和翻譯功能，將外語文檔直接轉換為本地語言。
圖像分析和數據提取：從圖像中提取關鍵數據，如車牌識別、身份證件信息提取等。

8.zxcvbn

GitHub 地址：https://github.com/zxcvbn-ts/zxcvbn

zxcvbn 是一個強大的密碼強度評估庫，主要用于評估用戶輸入的密碼的復雜性和強度。它由 Dropbox 開發，旨在比傳統的密碼強度檢測方法（如僅基于字符長度或字符類型）提供更準確和智能的評估。

主要特點

智能密碼強度評估：通過檢測常見密碼模式和用戶輸入習慣（如鍵盤路徑、常用字詞、常見替代符號等），提供更真實的密碼強度反饋。
多語言支持：支持多種語言下的常用密碼模式檢測。
用戶友好：為用戶提供更好的反饋，幫助他們理解密碼的安全性，同時給出增強密碼強度的建議。
快速與高效：即使在復雜密碼的評估過程中，zxcvbn 也能快速返回強度結果。

使用示例

<!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 - 非常強，幾乎不可能被破解。

返回結果示例

zxcvbn 的返回結果中包含豐富的信息，除了密碼強度評分外，還包括建議和密碼的詳細分析：

{
  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: [...], // 檢測到的密碼模式
}

使用場景

用戶注冊和登錄表單：在用戶注冊時，實時檢測密碼強度，幫助用戶創建更安全的密碼。
密碼管理器：評估存儲的密碼的安全性，提醒用戶修改弱密碼。
安全審計：對大量密碼進行強度評估，檢測潛在的安全漏洞。

責任編輯：武曉燕來源：程序員Sunday