WHAT - 常见的前端工具库

前端开发有许多工具库，可以帮助开发者提高效率、简化代码和增强功能。以下是一些常见的前端工具库：

一、常见工具库

函数库

1. Lodash（推荐）

• Lodash 是一个 JavaScript 实用程序库，提供了一系列方便的函数，用于数组、对象和其他数据类型的操作。
• 网址：Lodash

2. Underscore.js

• 类似于 Lodash，但更轻量级，提供了基础的函数工具集。
• 网址：Underscore.js

时间

在 JavaScript 和 TypeScript 中，有许多优秀的工具库可以帮助处理和操作日期和时间。以下是一些常用的时间处理库及其简要介绍：

1. Moment.js

• 仓库地址：Moment.js
• 特点：
  • 强大的日期时间解析、验证、操作和格式化功能。
  • 支持多种国际化（i18n）格式和本地化（l10n）语言。
  • 丰富的插件生态系统。

示例：

const moment = require('moment');

const now = moment();
console.log(now.format('YYYY-MM-DD HH:mm:ss')); // 2024-05-31 12:00:00

const nextWeek = moment().add(7, 'days');
console.log(nextWeek.format('YYYY-MM-DD')); // 2024-06-07

2. date-fns

• 仓库地址：date-fns
• 特点：
  • 轻量级且模块化，每个功能都是一个独立的函数。
  • 支持 tree-shaking，可以只引入需要的部分以减少打包体积。
  • 现代 API 设计，功能强大。

示例：

const { format, addDays } = require('date-fns');

const now = new Date();
console.log(format(now, 'yyyy-MM-dd HH:mm:ss')); // 2024-05-31 12:00:00

const nextWeek = addDays(now, 7);
console.log(format(nextWeek, 'yyyy-MM-dd')); // 2024-06-07

3. Luxon

• 仓库地址：Luxon
• 特点：
  • 由 Moment.js 的作者开发，是其现代化替代品。
  • 使用现代 JavaScript 特性（如 ES6 类和模块）。
  • 内置国际化支持。

示例：

const { DateTime } = require('luxon');

const now = DateTime.local();
console.log(now.toFormat('yyyy-MM-dd HH:mm:ss')); // 2024-05-31 12:00:00

const nextWeek = now.plus({ days: 7 });
console.log(nextWeek.toFormat('yyyy-MM-dd')); // 2024-06-07

4. Day.js（推荐）

• 仓库地址：Day.js
• 特点：
  • 轻量级（2KB）且高效的日期库，API 设计与 Moment.js 相似。
  • 支持插件机制，灵活扩展功能。
  • 高度兼容 Moment.js，使得从 Moment.js 迁移变得简单。

示例：

const dayjs = require('dayjs');

const now = dayjs();
console.log(now.format('YYYY-MM-DD HH:mm:ss')); // 2024-05-31 12:00:00

const nextWeek = now.add(7, 'day');
console.log(nextWeek.format('YYYY-MM-DD')); // 2024-06-07

5. date-fns-tz

• 仓库地址：date-fns-tz
• 特点：
  • 扩展 date-fns 库以处理时区相关的日期和时间。
  • 提供了一组用于时区转换和格式化的辅助函数。

示例：

const { format, addDays } = require('date-fns');
const { utcToZonedTime, format: formatTZ } = require('date-fns-tz');

const now = new Date();
const timeZone = 'America/New_York';
const zonedDate = utcToZonedTime(now, timeZone);
console.log(formatTZ(zonedDate, 'yyyy-MM-dd HH:mm:ssXXX', { timeZone })); // 2024-05-31 08:00:00-04:00

6. timeago.js（推荐）

• 仓库地址：timeago.js
• 特点：
  • 专注于将日期转换为“时间前”（time ago）格式，如“5 分钟前”。
  • 轻量级且易于使用。
  • 支持多种语言。

示例：

const timeago = require('timeago.js');
const timeagoInstance = timeago();

console.log(timeagoInstance.format(new Date() - 60000)); // "1 分钟前"

二、框架相关

vueuse

• 针对 Vue 3 的实用函数集合，帮助开发者快速实现常见功能。
• 网址：vueuse

react-use

- 一个非常流行的 React 自定义钩子库，提供了超过 300 个自定义钩子，涵盖了从基本的状态管理到复杂的副作用处理等各个方面。
- 网址：[react-use](https://github.com/streamich/react-use)

这些工具库和框架可以大大提高前端开发的效率和效果，根据项目需求选择合适的工具库会使开发过程更加顺利。