WHAT - 常见的前端工具库

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

一、常见工具库

函数库

1. Lodash(推荐)

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

2. Underscore.js

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

时间

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

1. Moment.js

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

示例:

javascript 复制代码
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 设计,功能强大。

示例:

javascript 复制代码
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 类和模块)。
    • 内置国际化支持。

示例:

javascript 复制代码
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 迁移变得简单。

示例:

javascript 复制代码
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 库以处理时区相关的日期和时间。
    • 提供了一组用于时区转换和格式化的辅助函数。

示例:

javascript 复制代码
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 分钟前"。
    • 轻量级且易于使用。
    • 支持多种语言。

示例:

javascript 复制代码
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)

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

相关推荐
雯0609~17 分钟前
网页F12:缓存的使用(设值、取值、删除)
前端·缓存
℘团子এ21 分钟前
vue3中如何上传文件到腾讯云的桶(cosbrowser)
前端·javascript·腾讯云
学习前端的小z26 分钟前
【前端】深入理解 JavaScript 逻辑运算符的优先级与短路求值机制
开发语言·前端·javascript
彭世瑜1 小时前
ts: TypeScript跳过检查/忽略类型检查
前端·javascript·typescript
FØund4041 小时前
antd form.setFieldsValue问题总结
前端·react.js·typescript·html
Backstroke fish1 小时前
Token刷新机制
前端·javascript·vue.js·typescript·vue
小五Five1 小时前
TypeScript项目中Axios的封装
开发语言·前端·javascript
小曲程序1 小时前
vue3 封装request请求
java·前端·typescript·vue
临枫5411 小时前
Nuxt3封装网络请求 useFetch & $fetch
前端·javascript·vue.js·typescript
前端每日三省1 小时前
面试题-TS(八):什么是装饰器(decorators)?如何在 TypeScript 中使用它们?
开发语言·前端·javascript