几个实用的前端开源库！

最新推荐文章于 2025-09-20 13:01:27 发布

Omnitrixs

最新推荐文章于 2025-09-20 13:01:27 发布

阅读量561

点赞数 19

CC 4.0 BY-SA版权

文章标签：前端

本文链接：https://blog.csdn.net/Omnitrixs/article/details/150059581

1. dayjs

GitHub 地址：https://github.com/iamkun/dayjs
day.js 中文网：https://dayjs.fenxianglu.cn/

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); // 输出: 当前日期和时间按指定格式显示

2. radash

GitHub 地址：https://github.com/rayepps/radash
Radash中文网：https://radash.uihtm.com/

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

3. crypto-js

GitHub 地址：https://github.com/brix/crypto-js

crypto-js 是一个 JavaScript 加密库，提供了许多加密算法，可以帮助我们实现数据加密。
提供多维度加密能力，满足不同场景需求：
• 哈希算法：支持 MD5（已不安全）、SHA-1、SHA-256、SHA-512 等，用于数据摘要（如文件完整性校验）。
• 对称加密：AES（支持 CBC、ECB 等模式）、DES、TripleDES、Blowfish，适用于敏感数据加密存储或传输。
• 编码工具：Base64、Hex、UTF-8 等编码转换，解决不同系统间的字符兼容问题。
• 消息认证：HMAC（基于密钥的哈希算法），用于接口防篡改（如生成请求签名）

跨平台与易用性
• 无环境依赖：纯 JavaScript 实现，支持浏览器（包括 IE8+）、Node.js、小程序等多端运行。
• 简洁 API：核心操作仅需一行代码，如 CryptoJS.AES.encrypt(data, key) 即可完成 AES 加密。

使用示例

import CryptoJS from 'crypto-js';
// 也支持按需引入，减少项目体积。例如仅使用 AES 模块：
import AES from 'crypto-js/aes';  // 单独引入 AES 模块
import encUTF8 from 'crypto-js/enc-utf8';  // 引入 UTF-8 编码工具

const message = 'Hello, world!';
const encrypted = CryptoJS.AES.encrypt(message, 'secret key').toString();
const decrypted = CryptoJS.AES.decrypt(encrypted, 'secretkey').toString(CryptoJS.enc.Utf8);
console.log('Encrypted:', encrypted);
console.log('Decrypted:', decrypted);

4. viewerjs

GitHub 地址：https://github.com/fengyuanchen/viewerjs

viewerjs 用于在网页上创建图像查看器。它允许用户通过点击或触摸来放大、缩小、旋转和移动图像，提供了一个简单的方式来增强网页上的图像查看体验。主要有两种类型的使用方式：
• 基本模式：适用于简单的图像查看需求。
• 全屏模式：提供更沉浸式的查看体验。

使用示例

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/viewerjs/1.10.5/viewer.min.css" />
</head>
<body>
  <img id="image" src="https://example.com/image.jpg" alt="Example Image" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/viewerjs/1.10.5/viewer.min.js"></script>
  <script>
    const viewer = new Viewer(document.getElementById('image'));
  </script>
</body>
</html>

5. driver.js

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

6. logicflow

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

LogicFlow 是一个用于构建流程图的前端框架，专注于流程设计和可视化编辑。它提供了基础的图形编辑能力，支持自定义节点、边和流程控制，适用于工作流、决策树、流程管理等场景。

主要特点
• 简洁易用：提供了基础流程图的常用功能，开发者可以快速上手，创建可视化流程。
• 高度可扩展：通过插件机制，开发者可以自由扩展节点和边的功能，支持自定义图形。
• 支持多种操作：如拖拽、缩放、对齐、自动布局等常用操作，提升用户体验。
• 事件驱动：支持多种流程图事件，可以在图形的不同交互阶段执行操作。
• 跨平台支持：能够在浏览器和各种 Web 应用中运行，轻松集成到现有项目中。

使用场景
• 流程管理系统：适用于企业中的工作流管理、任务流管理、审批流程等场景。
• 决策树和算法流程：可以用于展示和设计复杂的决策树、算法流程图等。
• 可视化编排工具：用于开发像 BPMN 流程编辑器、数据流编排等可视化工具。

核心模块
• 节点：提供了多种预置节点类型，如矩形、圆形、菱形等，支持自定义节点样式和交互。
• 连线：支持直线、折线、曲线等不同类型的连线，并允许配置连线箭头、线条样式等。
• 布局：可以通过插件支持自动布局功能，例如树形布局、层次布局等。
• 插件系统：LogicFlow 提供了插件系统，开发者可以通过插件来扩展流程图功能，如节点拖拽、键盘操作、自动对齐等。

使用示例

<!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" href="https://unpkg.com/@logicflow/core/dist/style/index.css">
</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>

7. localforage

GitHub 地址：https://github.com/localForage/localForage

localForage 是一个 JavaScript 库，提供跨浏览器的本地存储解决方案，支持异步操作和多种数据类型存储（包括非字符串数据）。它通过封装不同浏览器的存储 API（如 IndexedDB、WebSQL、localStorage），实现统一接口，并具备优雅降级策略（当浏览器不支持高级存储时自动使用 localStorage）。

主要特点
• 跨浏览器兼容：支持 Chrome、Firefox、IE 及 Safari 等主流浏览器，自动适配存储引擎(IndexedDB、WebSQL、localStorage)；
• 异步操作：提供 .setItem 和 .getItem 等方法支持 Promise，避免同步操作阻塞页面渲染；
• 数据类型支持：可存储字符串、对象、数组、二进制数据（如Blob/ArrayBuffer），无需序列化；
• 存储容量优势：使用 IndexedDB 时容量远超 localStorage（通常可达 5MB以上）。

使用示例

import localforage from 'localforage';
localforage.setItem('key', 'value')
  .then(value => {
    console.log('Value stored:', value);
  })
  .catch(err => {
    console.error('Error storing value:', err);
  });
localforage.getItem('key')
  .then(value => {
    console.log('Value retrieved:', value);
  })
  .catch(err => {
    console.error('Error retrieving value:', err);
  });

8. Tesseract

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

Tesseract.js 是一个用于在浏览器和 Node.js 中执行光学字符识别（OCR）的 JavaScript 库。它基于 Google 的开源 OCR 引擎 Tesseract，能够将图片中的文本提取并转换为可编辑的文本格式。

主要特点
• 跨平台支持：支持浏览器和 Node.js 环境，无需服务器端依赖。
• 多语言支持：内置对 100 多种语言的识别支持，包括常见的中英文字体。
• 并行处理：通过 Web Workers 实现并行化处理，提高性能和响应速度。
• 支持自定义训练数据：可以加载自定义的语言包或训练模型，以提高识别精度。
• 易于使用：提供了简单易用的 API 和进度反馈机制，方便集成和使用。

应用场景
• 扫描文档和表单：将扫描的 PDF 或图片文件中的文本提取为可编辑的格式。
• 自动化数据录入：通过识别发票、收据等文档中的数据，自动化输入和数据处理。
• 翻译应用：结合 OCR 和翻译功能，将外语文档直接转换为本地语言。
• 图像分析和数据提取：从图像中提取关键数据，如车牌识别、身份证件信息提取等。

使用示例

<!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>

9. 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: [...], // 检测到的密码模式
}

10. uuid

GitHub 地址：https://github.com/topics/uuid
在线生成地址：https://www.uuid.online/

uuid 是一个生成唯一 ID 的库，非常适合用来生成唯一标识符。

使用示例

import { v4 as uuidv4 } from 'uuid';
const uniqueId = uuidv4();
console.log('Generated UUID:', uniqueId);

11. copy-text-to-clipboard

GitHub 地址：https://github.com/CopyText/TextCopy

copy-text-to-clipboard 是一个用于将文本复制到剪贴板的开源 JavaScript 库。在用户交互事件（如点击按钮）中调用 copy 函数，传入要复制的文本。

常见问题
• 浏览器兼容性：主要支持现代浏览器，旧版本可能存在兼容性问题。
• 调用时机：必须在用户交互事件（如点击或按键）中调用，否则可能失败。
• 目标元素：若指定 options.target ，需确保该元素存在于 DOM 中且可见；未指定时默认使用 document.body。

使用示例

import copy from 'copy-text-to-clipboard';
copy('Hello, world!');
console.log('Text copied to clipboard');

--------------------------------------------------