这 8 个常见的前端开源库，你肯定要知道！

这 8 个常见的前端开源库，你肯定要知道！

库的使用是我们在一样平常开发中的必备操作。那么本日，为各人推荐 8 个常见的前端库，以资助各人更好的完成一样平常工作！
01：radash

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

Radash 是一个用于 TypeScript 和 JavaScript 的实用工具库，专注于性能优化和开发服从。它提供了一系列函数，简化常见的代码操作，雷同于 Lodash，但更轻量级且专为现代 TypeScript 环境设计。Radash 的目的是提供一套高度可定制、简便且性能良好的函数，以满意现代 JavaScript 应用步伐的需求。
使用示例

假设我们要处理一个包含用户信息的数组并从中提取出年事大于 18 岁的用户，可以使用 Radash 中的 filter 函数：

1. import { filter } from 'radash'
3. const users = [
4.   { id: 1, name: 'Alice', age: 25 },
5.   { id: 2, name: 'Bob', age: 17 },
6.   { id: 3, name: 'Charlie', age: 19 }
7. ]
9. const adults = filter(users, user => user.age > 18)
11. console.log(adults)
12. // 输出: [{ 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：所有操作返回新实例，确保数据不可变。
  
• 国际化支持：内置对多语言的支持。
  
• 插件扩展：提供丰富的插件系统，按需加载功能。
  

使用示例

1. import dayjs from 'dayjs';
3. // 获取当前日期
4. const now = dayjs();
5. console.log(now.format()); // 输出: 当前日期和时间
7. // 日期加减
8. const future = dayjs().add(7, 'day'); // 当前日期加 7 天
9. console.log(future.format('YYYY-MM-DD')); // 输出: 加 7 天后的日期
11. // 日期比较
12. const date1 = dayjs('2023-01-01');
13. const date2 = dayjs('2024-01-01');
14. console.log(date1.isBefore(date2)); // 输出: true
16. // 日期格式化
17. const formatted = dayjs().format('YYYY-MM-DD HH:mm:ss');
18. console.log(formatted); // 输出: 当前日期和时间按指定格式显示

复制代码

03：driver

GitHub 地点：https://github.com/kamranahmedse/driver.js
图片
Driver.js 是一个轻量级的 JavaScript 库，用于在网页中创建引导步骤或教程，资助用户逐步了解界面上的功能。它通过高亮网页的特定部门并提供相应的阐明或提示，让用户更容易明白如何使用某个应用步伐或界面。
告急特点

• 引导功能：逐步引导用户操作页面，提供互动式的资助系统。
  
• 轻量易用：库的体积较小，且 API 简便，方便集成。
  
• 支持多种元素定位：可以高亮页面的任意 HTML 元素，资助用户了解具体功能。
  
• 可自定义样式：答应自定义提示框的样式，使其与应用的设计风格保持同等。
  
• 跨浏览器兼容：支持主流的现代浏览器。
  

使用示例

1. import Driver from 'driver.js';
2. import 'driver.js/dist/driver.min.css';  // 导入样式
4. // 创建一个 Driver 实例
5. const driver = new Driver();
7. // 定义步骤
8. driver.defineSteps([
9.   {
10.     element: '#step1', // 要高亮的元素
11.     popover: {
12.       title: '欢迎使用功能 1',
13.       description: '这是我们应用中的第一个功能，它非常有用。',
14.       position: 'bottom', // 提示框的显示位置
15.     }
16.   },
17.   {
18.     element: '#step2',
19.     popover: {
20.       title: '功能 2',
21.       description: '这是另一个强大的功能，您可以在这里找到它。',
22.       position: 'top',
23.     }
24.   }
25. ]);
27. // 开始引导
28. driver.start();

复制代码

应用场景

• 新用户引导：为新用户提供首次使用的引导，逐步展示告急功能。
  
• 复杂应用的教程：资助用户快速掌握复杂界面中的关键功能。
  
• 功能更新提示：当应用有新功能或重大更新时，通过引导提示用户新的使用方式。
  

04：Draggable JS

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

Draggable JS 是 Shopify 开发的一个现代拖放库，支持拖拽、排序和与差别容器之间的交互。它设计轻量级、模块化，能够在任何现代浏览器中高效运行。Draggable 提供了良好的可扩展性和易用性，使开发者可以轻松实现丰富的拖放交互。
告急特点

• 模块化设计：支持按需加载，功能包罗拖拽 (Draggable)、排序 (Sortable)、交换 (Swappable) 等。
  
• 触摸支持：默认支持移动设备上的触摸变乱。
  
• 多容器支持：可以在多个容器之间拖拽和排序元素。
  
• 可扩展性强：支持自定义拖放活动、拖动约束、回调函数和变乱监听器。
  
• 变乱驱动：通过丰富的变乱接口，可以在拖放的差别阶段执行操作。
  

使用示例

1. <div class="container" id="container-1">
2.   <div class="item">Item 1</div>
3.   <div class="item">Item 2</div>
4.   <div class="item">Item 3</div>
5. </div>
6. <div class="container" id="container-2">
7.   <div class="item">Item A</div>
8.   <div class="item">Item B</div>
9.   <div class="item">Item C</div>
10. </div>
12. <script src="https://cdn.jsdelivr.net/npm/@shopify/draggable/lib/draggable.bundle.js"></script>
13. <script>
14.   const containers = document.querySelectorAll('.container');
15.   
16.   const draggable = new Draggable(containers, {
17.     draggable: '.item',
18.   });
20.   // 监听拖拽事件
21.   draggable.on('drag:start', (event) => {
22.     console.log('开始拖拽:', event);
23.   });
25.   draggable.on('drag:stop', (event) => {
26.     console.log('拖拽结束:', event);
27.   });
28. </script>
30. <style>
31.   .container {
32.     display: flex;
33.     gap: 10px;
34.   }
36.   .item {
37.     width: 100px;
38.     height: 100px;
39.     background-color: #007BFF;
40.     color: white;
41.     display: flex;
42.     align-items: center;
43.     justify-content: center;
44.     cursor: move;
45.   }
46. </style>

复制代码

告急功能模块

• Draggable: 核心模块，提供根本的拖动功能。
  
• Sortable: 提供排序功能，答应用户在列表中对元素重新排序。
  
• Swappable: 提供交换功能，支持两个容器之间的元素交换。
  
• Droppable: 支持元素放置在特定地区或容器中。
  
• Collidable: 提供元素之间的碰撞检测，制止元素重叠。
  

应用场景

• 卡片拖拽：比如在看板（Trello 风格）应用中，用户可以通过拖拽任务卡片举行任务管理。
  
• 拖拽排序：如文件、图片或列表项的拖拽排序功能。
  
• 自定义交互：适用于必要高定制化拖拽体验的交互，比如商品排列、页面布局等。
  

05：logicflow

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

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

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

使用示例

1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4.   <meta charset="UTF-8">
5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
6.   <title>LogicFlow 示例</title>
7.   <link rel="stylesheet" href="https://unpkg.com/@logicflow/core/dist/style/index.css">
8. </head>
9. <body>
10.   <div id="container" style="width: 100%; height: 500px;"></div>
11.   
12.   <script src="https://unpkg.com/@logicflow/core"></script>
13.   <script>
14.     // 创建 LogicFlow 实例
15.     const lf = new LogicFlow({
16.       container: document.querySelector('#container'),
17.       grid: true, // 显示网格
18.     });
20.     // 渲染流程图
21.     lf.render({
22.       nodes: [
23.         {
24.           id: 'node_1',
25.           type: 'rect',
26.           x: 100,
27.           y: 100,
28.           text: '开始节点'
29.         },
30.         {
31.           id: 'node_2',
32.           type: 'rect',
33.           x: 300,
34.           y: 100,
35.           text: '结束节点'
36.         }
37.       ],
38.       edges: [
39.         {
40.           sourceNodeId: 'node_1',
41.           targetNodeId: 'node_2',
42.           type: 'polyline'
43.         }
44.       ]
45.     });
46.   </script>
47. </body>
48. </html>

复制代码

核心模块

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

使用场景

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

06：ProgressBar

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

ProgressBar.js 是一个用于创建动画进度条的 JavaScript 库，它提供了圆形、直线、半圆形等多种进度条样式，且易于定制。该库轻量级且机动，适用于必要展示进度、加载状态等场景的网页应用。
告急特点

• 多种形状：支持线形、圆形、半圆形等多种进度条形状，满意差别设计需求。
  
• 动画结果：进度条具有平滑的动画结果，支持缓动函数控制动画。
  
• 易于使用：API 简朴且机动，可以快速集成到项目中。
  
• 高度可定制：支持自定义进度条的颜色、宽度、背景、文本等参数。
  
• 无依靠：轻量级库，无需额外的依靠包。
  

使用示例

创建一个线形进度条

1. <div id="container"></div>
2. <script src="https://cdnjs.cloudflare.com/ajax/libs/progressbar.js/1.0.1/progressbar.min.js"></script>
3. <script>
4.  var bar = new ProgressBar.Line('#container', {
5.    strokeWidth: 4,       // 线条宽度
6.    easing: 'easeInOut',  // 动画缓动效果
7.    duration: 1400,       // 动画时长
8.    color: '#FFEA82',     // 进度条颜色
9.    trailColor: '#eee',   // 进度条背景色
10.    trailWidth: 1,        // 背景条的宽度
11.    svgStyle: {width: '100%', height: '100%'},
12.    text: {
13.      style: {
14.        color: '#999',    // 文字颜色
15.        position: 'absolute',
16.        right: '0',
17.        top: '30px',
18.        padding: 0,
19.        margin: 0,
20.        transform: null
21.      },
22.      autoStyleContainer: false
23.    },
24.    from: { color: '#FFEA82' },  // 动画开始颜色
25.    to: { color: '#ED6A5A' },    // 动画结束颜色
26.    step: (state, bar) => {
27.      bar.setText(Math.round(bar.value() * 100) + ' %'); // 设置文字显示百分比
28.    }
29.  });
31.  // 动画到 100% 完成
32.  bar.animate(1.0);
33. </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 和进度反馈机制，方便集成和使用。
  

使用示例

1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4.   <meta charset="UTF-8">
5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
6.   <title>Tesseract.js 示例</title>
7. </head>
8. <body>
9.   <h1>OCR 示例</h1>
10.   <img id="image" src="example.png" alt="待识别的图片" width="300">
11.   <div id="output"></div>
13.   <script src="https://cdn.jsdelivr.net/npm/tesseract.js@2/dist/tesseract.min.js"></script>
14.   <script>
15.     // 使用 Tesseract.js 识别图片中的文字
16.     Tesseract.recognize(
17.       document.getElementById('image'),
18.       'eng', // 选择识别语言
19.       {
20.         logger: (m) => console.log(m) // 输出进度日志
21.       }
22.     ).then(({ data: { text } }) => {
23.       // 将识别出的文本展示在页面中
24.       document.getElementById('output').innerText = text;
25.     });
26.   </script>
27. </body>
28. </html>

复制代码

应用场景

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

08：zxcvbn

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

zxcvbn 是一个强盛的密码强度评估库，告急用于评估用户输入的密码的复杂性和强度。它由 Dropbox 开发，旨在比传统的密码强度检测方法（如仅基于字符长度或字符范例）提供更准确和智能的评估。
告急特点

• 智能密码强度评估：通过检测常见密码模式和用户输入习惯（如键盘路径、常用字词、常见替代符号等），提供更真实的密码强度反馈。
  
• 多语言支持：支持多种语言下的常用密码模式检测。
  
• 用户友好：为用户提供更好的反馈，资助他们明白密码的安全性，同时给出增强密码强度的建议。
  
• 快速与高效：即使在复杂密码的评估过程中，zxcvbn 也能快速返回强度结果。
  

使用示例

1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4.   <meta charset="UTF-8">
5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
6.   <title>zxcvbn 示例</title>
7. </head>
8. <body>
9.   <h1>密码强度检测</h1>
10.   <input type="password" id="password" placeholder="输入密码">
11.   <div id="feedback"></div>
13.   <script src="https://cdnjs.cloudflare.com/ajax/libs/zxcvbn/4.4.2/zxcvbn.js"></script>
14.   <script>
15.     document.getElementById('password').addEventListener('input', function () {
16.       var password = this.value;
17.       var result = zxcvbn(password); // 使用 zxcvbn 评估密码
18.       document.getElementById('feedback').innerHTML =
19.         '密码强度: ' + result.score + '/4<br>' + 
20.         '反馈: ' + result.feedback.suggestions.join(', ');
21.     });
22.   </script>
23. </body>
24. </html>

复制代码

密码评分

zxcvbn 会为密码返回一个评分（score），范围为 0 到 4，表示密码的强度：

• 0 - 非常弱，容易被破解。
  
• 1 - 弱，仍然容易被猜测。
  
• 2 - 中等，具有肯定的安全性，但仍有风险。
  
• 3 - 强，密码强度较高，不易被破解。
  
• 4 - 非常强，几乎不大概被破解。
  

返回结果示例

zxcvbn 的返回结果中包含丰富的信息，除了密码强度评分外，还包罗建媾和密码的详细分析：

1. {
2.   score: 3, // 密码强度评分（0 - 4）
3.   feedback: {
4.     suggestions: ['Add another word or two', 'Avoid common phrases'], // 提示改进建议
5.     warning: 'This is a top-10 common password' // 警告
6.   },
7.   guesses: 10000, // 估计需要多少次尝试才能破解密码
8.   crack_times_display: {
9.     online_throttling_100_per_hour: "100 years", // 不同场景下破解时间估算
10.     online_no_throttling_10_per_second: "5 days",
11.     offline_slow_hashing_1e4_per_second: "3 hours",
12.     offline_fast_hashing_1e10_per_second: "instant"
13.   },
14.   sequence: [...], // 检测到的密码模式
15. }

复制代码

使用场景

• 用户注册和登录表单：在用户注册时，实时检测密码强度，资助用户创建更安全的密码。
  
• 密码管理器：评估存储的密码的安全性，提醒用户修改弱密码。
  
• 安全审计：对大量密码举行强度评估，检测潜在的安全毛病。
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。