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

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

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

Hello，大家好，我是 Sunday。

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

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

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

03：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();

應用場景

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

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

05：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 流程編輯器、數據流編排等可視化工具。

06：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>

07：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 和翻譯功能，將外語文檔直接轉換為本地語言。
圖像分析和數據提取：從圖像中提取關鍵數據，如車牌識別、身份證件信息提取等。

08：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

国产精品电影_久久视频免费_欧美日韩国产激情_成年人视频免费在线播放_日本久久亚洲电影_久久都是精品_66av99_九色精品美女在线_蜜臀a∨国产成人精品_冲田杏梨av在线_欧美精品在线一区二区三区_麻豆mv在线看

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

01：radash

使用示例

02：dayjs

主要特點

使用示例

03：driver

主要特點

使用示例

應用場景

04：Draggable JS

主要特點

使用示例

主要功能模塊

應用場景

05：logicflow

主要特點

使用示例

核心模塊

使用場景

06：ProgressBar

主要特點

使用示例

07：Tesseract

主要特點

使用示例

應用場景

08：zxcvbn

主要特點

使用示例

密碼評分

返回結果示例

使用場景

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