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

库的使用是我们在日常开发中的必备操作。那么今天，为大家推荐 8 个常见的前端库，以帮助大家更好的完成日常工作！

01：radash

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

Radash 是一个用于 TypeScript 和 JavaScript 的实用工具库，专注于性能优化和开发效率。它提供了一系列函数，简化常见的代码操作，类似于 Lodash，但更轻量级且专为现代 TypeScript 环境设计。Radash 的目标是提供一套高度可定制、简洁且性能良好的函数，以满足现代 JavaScript 应用程序的需求。

使用示例

假设我们要处理一个包含用户信息的数组并从中提取出年龄大于 18 岁的用户，可以使用 Radash 中的 <code>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：所有操作返回新实例，确保数据不可变。

国际化支持：内置对多语言的支持。

插件扩展：提供丰富的插件系统，按需加载功能。

使用示例

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

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

主要特点

模块化设计：支持按需加载，功能包括拖拽 (Draggable)、排序 (Sortable)、交换 (Swappable) 等。

触摸支持：默认支持移动设备上的触摸事件。

多容器支持：可以在多个容器之间拖拽和排序元素。

可扩展性强：支持自定义拖放行为、拖动约束、回调函数和事件监听器。

事件驱动：通过丰富的事件接口，可以在拖放的不同阶段执行操作。

使用示例

<div class="container" id="container-1">code>

  <div class="item">Item 1</div>code>

  <div class="item">Item 2</div>code>

  <div class="item">Item 3</div>code>

</div>

<div class="container" id="container-2">code>

  <div class="item">Item A</div>code>

  <div class="item">Item B</div>code>

  <div class="item">Item C</div>code>

</div>

<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable/lib/draggable.bundle.js"></script>code>

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

主要功能模块