這八個(gè)常見(jiàn)的前端開(kāi)源庫(kù)，你一定要知道！

作者：程序員Sunday 2024-09-09 00:00:00

Tesseract.js? 是一個(gè)用于在瀏覽器和 Node.js 中執(zhí)行光學(xué)字符識(shí)別（OCR）的 JavaScript 庫(kù)。它基于 Google 的開(kāi)源 OCR 引擎 Tesseract，能夠?qū)D片中的文本提取并轉(zhuǎn)換為可編輯的文本格式。

Hello，大家好，我是 Sunday。

庫(kù)的使用是我們?cè)谌粘ｉ_(kāi)發(fā)中的必備操作。那么今天，為大家推薦 8 個(gè)常見(jiàn)的前端庫(kù)，以幫助大家更好的完成日常工作！

01：radash

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

圖片

Radash 是一個(gè)用于 TypeScript 和 JavaScript 的實(shí)用工具庫(kù)，專注于性能優(yōu)化和開(kāi)發(fā)效率。它提供了一系列函數(shù)，簡(jiǎn)化常見(jiàn)的代碼操作，類似于 Lodash，但更輕量級(jí)且專為現(xiàn)代 TypeScript 環(huán)境設(shè)計(jì)。Radash 的目標(biāo)是提供一套高度可定制、簡(jiǎn)潔且性能良好的函數(shù)，以滿足現(xiàn)代 JavaScript 應(yīng)用程序的需求。

使用示例

假設(shè)我們要處理一個(gè)包含用戶信息的數(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 是一個(gè)輕量級(jí)的 JavaScript 日期處理庫(kù)，專注于簡(jiǎn)化日期和時(shí)間的操作。它提供了類似于 Moment.js 的 API，但體積更小，僅約 2kB。Day.js 支持鏈?zhǔn)讲僮鳎哂辛己玫男阅埽⒅С纸馕觥Ⅱ?yàn)證、操作和顯示日期時(shí)間。

主要特點(diǎn)

輕量級(jí)：僅 2kB，減少了對(duì)項(xiàng)目的體積影響。
API 簡(jiǎn)潔：與 Moment.js 類似，學(xué)習(xí)成本低。
Immutable：所有操作返回新實(shí)例，確保數(shù)據(jù)不可變。
國(guó)際化支持：內(nèi)置對(duì)多語(yǔ)言的支持。
插件擴(kuò)展：提供豐富的插件系統(tǒng)，按需加載功能。

使用示例

import dayjs from 'dayjs';

// 獲取當(dāng)前日期
const now = dayjs();
console.log(now.format()); // 輸出: 當(dāng)前日期和時(shí)間

// 日期加減
const future = dayjs().add(7, 'day'); // 當(dāng)前日期加 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); // 輸出: 當(dāng)前日期和時(shí)間按指定格式顯示

03：driver

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

圖片

Driver.js 是一個(gè)輕量級(jí)的 JavaScript 庫(kù)，用于在網(wǎng)頁(yè)中創(chuàng)建引導(dǎo)步驟或教程，幫助用戶逐步了解界面上的功能。它通過(guò)高亮網(wǎng)頁(yè)的特定部分并提供相應(yīng)的說(shuō)明或提示，讓用戶更容易理解如何使用某個(gè)應(yīng)用程序或界面。

主要特點(diǎn)

引導(dǎo)功能：逐步引導(dǎo)用戶操作頁(yè)面，提供互動(dòng)式的幫助系統(tǒng)。
輕量易用：庫(kù)的體積較小，且 API 簡(jiǎn)潔，方便集成。
支持多種元素定位：可以高亮頁(yè)面的任意 HTML 元素，幫助用戶了解具體功能。
可自定義樣式：允許自定義提示框的樣式，使其與應(yīng)用的設(shè)計(jì)風(fēng)格保持一致。
跨瀏覽器兼容：支持主流的現(xiàn)代瀏覽器。

使用示例

import Driver from 'driver.js';
import 'driver.js/dist/driver.min.css';  // 導(dǎo)入樣式

// 創(chuàng)建一個(gè) Driver 實(shí)例
const driver = new Driver();

// 定義步驟
driver.defineSteps([
  {
    element: '#step1', // 要高亮的元素
    popover: {
      title: '歡迎使用功能 1',
      description: '這是我們應(yīng)用中的第一個(gè)功能，它非常有用。',
      position: 'bottom', // 提示框的顯示位置
    }
  },
  {
    element: '#step2',
    popover: {
      title: '功能 2',
      description: '這是另一個(gè)強(qiáng)大的功能，您可以在這里找到它。',
      position: 'top',
    }
  }
]);

// 開(kāi)始引導(dǎo)
driver.start();

應(yīng)用場(chǎng)景

新用戶引導(dǎo)：為新用戶提供首次使用的引導(dǎo)，逐步展示主要功能。
復(fù)雜應(yīng)用的教程：幫助用戶快速掌握復(fù)雜界面中的關(guān)鍵功能。
功能更新提示：當(dāng)應(yīng)用有新功能或重大更新時(shí)，通過(guò)引導(dǎo)提示用戶新的使用方式。

04：Draggable JS

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

圖片

Draggable JS 是 Shopify 開(kāi)發(fā)的一個(gè)現(xiàn)代拖放庫(kù)，支持拖拽、排序和與不同容器之間的交互。它設(shè)計(jì)輕量級(jí)、模塊化，能夠在任何現(xiàn)代瀏覽器中高效運(yùn)行。Draggable 提供了良好的可擴(kuò)展性和易用性，使開(kāi)發(fā)者可以輕松實(shí)現(xiàn)豐富的拖放交互。

主要特點(diǎn)

模塊化設(shè)計(jì)：支持按需加載，功能包括拖拽 (Draggable)、排序 (Sortable)、交換 (Swappable) 等。
觸摸支持：默認(rèn)支持移動(dòng)設(shè)備上的觸摸事件。
多容器支持：可以在多個(gè)容器之間拖拽和排序元素。
可擴(kuò)展性強(qiáng)：支持自定義拖放行為、拖動(dòng)約束、回調(diào)函數(shù)和事件監(jiān)聽(tīng)器。
事件驅(qū)動(dòng)：通過(guò)豐富的事件接口，可以在拖放的不同階段執(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)聽(tīng)拖拽事件
  draggable.on('drag:start', (event) => {
    console.log('開(kāi)始拖拽:', 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: 核心模塊，提供基本的拖動(dòng)功能。
Sortable: 提供排序功能，允許用戶在列表中對(duì)元素重新排序。
Swappable: 提供交換功能，支持兩個(gè)容器之間的元素交換。
Droppable: 支持元素放置在特定區(qū)域或容器中。
Collidable: 提供元素之間的碰撞檢測(cè)，避免元素重疊。

應(yīng)用場(chǎng)景

卡片拖拽：比如在看板（Trello 風(fēng)格）應(yīng)用中，用戶可以通過(guò)拖拽任務(wù)卡片進(jìn)行任務(wù)管理。
拖拽排序：如文件、圖片或列表項(xiàng)的拖拽排序功能。
自定義交互：適用于需要高定制化拖拽體驗(yàn)的交互，比如商品排列、頁(yè)面布局等。

05：logicflow

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

LogicFlow 是一個(gè)用于構(gòu)建流程圖的前端框架，專注于流程設(shè)計(jì)和可視化編輯。它提供了基礎(chǔ)的圖形編輯能力，支持自定義節(jié)點(diǎn)、邊和流程控制，適用于工作流、決策樹(shù)、流程管理等場(chǎng)景。

主要特點(diǎn)

簡(jiǎn)潔易用：提供了基礎(chǔ)流程圖的常用功能，開(kāi)發(fā)者可以快速上手，創(chuàng)建可視化流程。
高度可擴(kuò)展：通過(guò)插件機(jī)制，開(kāi)發(fā)者可以自由擴(kuò)展節(jié)點(diǎn)和邊的功能，支持自定義圖形。
支持多種操作：如拖拽、縮放、對(duì)齊、自動(dòng)布局等常用操作，提升用戶體驗(yàn)。
事件驅(qū)動(dòng)：支持多種流程圖事件，可以在圖形的不同交互階段執(zhí)行操作。
跨平臺(tái)支持：能夠在瀏覽器和各種 Web 應(yīng)用中運(yùn)行，輕松集成到現(xiàn)有項(xiàng)目中。

使用示例

<!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 實(shí)例
    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: '開(kāi)始節(jié)點(diǎn)'
        },
        {
          id: 'node_2',
          type: 'rect',
          x: 300,
          y: 100,
          text: '結(jié)束節(jié)點(diǎn)'
        }
      ],
      edges: [
        {
          sourceNodeId: 'node_1',
          targetNodeId: 'node_2',
          type: 'polyline'
        }
      ]
    });
  </script>
</body>
</html>

核心模塊

節(jié)點(diǎn)：提供了多種預(yù)置節(jié)點(diǎn)類型，如矩形、圓形、菱形等，支持自定義節(jié)點(diǎn)樣式和交互。
連線：支持直線、折線、曲線等不同類型的連線，并允許配置連線箭頭、線條樣式等。
布局：可以通過(guò)插件支持自動(dòng)布局功能，例如樹(shù)形布局、層次布局等。
插件系統(tǒng)：LogicFlow 提供了插件系統(tǒng)，開(kāi)發(fā)者可以通過(guò)插件來(lái)擴(kuò)展流程圖功能，如節(jié)點(diǎn)拖拽、鍵盤操作、自動(dòng)對(duì)齊等。

使用場(chǎng)景

流程管理系統(tǒng)：適用于企業(yè)中的工作流管理、任務(wù)流管理、審批流程等場(chǎng)景。
決策樹(shù)和算法流程：可以用于展示和設(shè)計(jì)復(fù)雜的決策樹(shù)、算法流程圖等。
可視化編排工具：用于開(kāi)發(fā)像 BPMN 流程編輯器、數(shù)據(jù)流編排等可視化工具。

06：ProgressBar

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

ProgressBar.js 是一個(gè)用于創(chuàng)建動(dòng)畫進(jìn)度條的 JavaScript 庫(kù)，它提供了圓形、直線、半圓形等多種進(jìn)度條樣式，且易于定制。該庫(kù)輕量級(jí)且靈活，適用于需要展示進(jìn)度、加載狀態(tài)等場(chǎng)景的網(wǎng)頁(yè)應(yīng)用。

主要特點(diǎn)

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

使用示例

創(chuàng)建一個(gè)線形進(jìn)度條

<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',  // 動(dòng)畫緩動(dòng)效果
   duration: 1400,       // 動(dòng)畫時(shí)長(zhǎng)
   color: '#FFEA82',     // 進(jìn)度條顏色
   trailColor: '#eee',   // 進(jìn)度條背景色
   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' },  // 動(dòng)畫開(kāi)始顏色
   to: { color: '#ED6A5A' },    // 動(dòng)畫結(jié)束顏色
   step: (state, bar) => {
     bar.setText(Math.round(bar.value() * 100) + ' %'); // 設(shè)置文字顯示百分比
   }
 });

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

07：Tesseract

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

圖片

Tesseract.js 是一個(gè)用于在瀏覽器和 Node.js 中執(zhí)行光學(xué)字符識(shí)別（OCR）的 JavaScript 庫(kù)。它基于 Google 的開(kāi)源 OCR 引擎 Tesseract，能夠?qū)D片中的文本提取并轉(zhuǎn)換為可編輯的文本格式。

主要特點(diǎn)

跨平臺(tái)支持：支持瀏覽器和 Node.js 環(huán)境，無(wú)需服務(wù)器端依賴。
多語(yǔ)言支持：內(nèi)置對(duì) 100 多種語(yǔ)言的識(shí)別支持，包括常見(jiàn)的中英文字體。
并行處理：通過(guò) Web Workers 實(shí)現(xiàn)并行化處理，提高性能和響應(yīng)速度。
支持自定義訓(xùn)練數(shù)據(jù)：可以加載自定義的語(yǔ)言包或訓(xùn)練模型，以提高識(shí)別精度。
易于使用：提供了簡(jiǎn)單易用的 API 和進(jìn)度反饋機(jī)制，方便集成和使用。

使用示例

<!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="待識(shí)別的圖片" width="300">
  <div id="output"></div>

  <script src="https://cdn.jsdelivr.net/npm/tesseract.js@2/dist/tesseract.min.js"></script>
  <script>
    // 使用 Tesseract.js 識(shí)別圖片中的文字
    Tesseract.recognize(
      document.getElementById('image'),
      'eng', // 選擇識(shí)別語(yǔ)言
      {
        logger: (m) => console.log(m) // 輸出進(jìn)度日志
      }
    ).then(({ data: { text } }) => {
      // 將識(shí)別出的文本展示在頁(yè)面中
      document.getElementById('output').innerText = text;
    });
  </script>
</body>
</html>

應(yīng)用場(chǎng)景

掃描文檔和表單：將掃描的 PDF 或圖片文件中的文本提取為可編輯的格式。
自動(dòng)化數(shù)據(jù)錄入：通過(guò)識(shí)別發(fā)票、收據(jù)等文檔中的數(shù)據(jù)，自動(dòng)化輸入和數(shù)據(jù)處理。
翻譯應(yīng)用：結(jié)合 OCR 和翻譯功能，將外語(yǔ)文檔直接轉(zhuǎn)換為本地語(yǔ)言。
圖像分析和數(shù)據(jù)提取：從圖像中提取關(guān)鍵數(shù)據(jù)，如車牌識(shí)別、身份證件信息提取等。

08：zxcvbn

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

圖片

zxcvbn 是一個(gè)強(qiáng)大的密碼強(qiáng)度評(píng)估庫(kù)，主要用于評(píng)估用戶輸入的密碼的復(fù)雜性和強(qiáng)度。它由 Dropbox 開(kāi)發(fā)，旨在比傳統(tǒng)的密碼強(qiáng)度檢測(cè)方法（如僅基于字符長(zhǎng)度或字符類型）提供更準(zhǔn)確和智能的評(píng)估。

主要特點(diǎn)

智能密碼強(qiáng)度評(píng)估：通過(guò)檢測(cè)常見(jiàn)密碼模式和用戶輸入習(xí)慣（如鍵盤路徑、常用字詞、常見(jiàn)替代符號(hào)等），提供更真實(shí)的密碼強(qiáng)度反饋。
多語(yǔ)言支持：支持多種語(yǔ)言下的常用密碼模式檢測(cè)。
用戶友好：為用戶提供更好的反饋，幫助他們理解密碼的安全性，同時(shí)給出增強(qiáng)密碼強(qiáng)度的建議。
快速與高效：即使在復(fù)雜密碼的評(píng)估過(guò)程中，zxcvbn 也能快速返回強(qiáng)度結(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>密碼強(qiáng)度檢測(cè)</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 評(píng)估密碼
      document.getElementById('feedback').innerHTML =
        '密碼強(qiáng)度: ' + result.score + '/4<br>' + 
        '反饋: ' + result.feedback.suggestions.join(', ');
    });
  </script>
</body>
</html>

密碼評(píng)分

zxcvbn 會(huì)為密碼返回一個(gè)評(píng)分（score），范圍為 0 到 4，表示密碼的強(qiáng)度：

0 - 非常弱，容易被破解。
1 - 弱，仍然容易被猜測(cè)。
2 - 中等，具有一定的安全性，但仍有風(fēng)險(xiǎn)。
3 - 強(qiáng)，密碼強(qiáng)度較高，不易被破解。
4 - 非常強(qiáng)，幾乎不可能被破解。

返回結(jié)果示例

zxcvbn 的返回結(jié)果中包含豐富的信息，除了密碼強(qiáng)度評(píng)分外，還包括建議和密碼的詳細(xì)分析：

{
  score: 3, // 密碼強(qiáng)度評(píng)分（0 - 4）
  feedback: {
    suggestions: ['Add another word or two', 'Avoid common phrases'], // 提示改進(jìn)建議
    warning: 'This is a top-10 common password' // 警告
  },
  guesses: 10000, // 估計(jì)需要多少次嘗試才能破解密碼
  crack_times_display: {
    online_throttling_100_per_hour: "100 years", // 不同場(chǎng)景下破解時(shí)間估算
    online_no_throttling_10_per_second: "5 days",
    offline_slow_hashing_1e4_per_second: "3 hours",
    offline_fast_hashing_1e10_per_second: "instant"
  },
  sequence: [...], // 檢測(cè)到的密碼模式
}

使用場(chǎng)景

用戶注冊(cè)和登錄表單：在用戶注冊(cè)時(shí)，實(shí)時(shí)檢測(cè)密碼強(qiáng)度，幫助用戶創(chuàng)建更安全的密碼。
密碼管理器：評(píng)估存儲(chǔ)的密碼的安全性，提醒用戶修改弱密碼。
安全審計(jì)：對(duì)大量密碼進(jìn)行強(qiáng)度評(píng)估，檢測(cè)潛在的安全漏洞。

責(zé)任編輯：武曉燕來(lái)源：程序員Sunday