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:00const 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:00const 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:00const 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:00const 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)

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/19565.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

鹤城杯 2021 流量分析

看分组也知道考http流量 是布尔盲注 过滤器筛选http流量 将流量包过滤分离 http tshark -r timu.pcapng -Y "http" -T json > 1.json这个时候取 http.request.uri 进一步分离 http.request.uri字段是我们需要的数据 tshark -r timu.pcapng -Y "http&quo…

【全开源】Java情侣飞行棋系统微信小程序+H5+APP源码+微信公众号

​让爱情与游戏并行 一、引言:飞行棋与情侣时光的交融 在快节奏的现代生活中,情侣们常常寻找一种既能增进感情又能共同娱乐的方式。飞行棋,这款经典的家庭游戏,因其简单易上手、策略性强而深受大众喜爱。而现在,我们…

Vue2中的计算属性(computed)和监听属性(watch)

1、说明 在Vue中我们经常会使用到多个参数计算出来的结果,在这种情况下我们可以定义参数和方法,将处理结果赋值给自定义参数,这种方式较为复杂,由此vue提供了计算属性方法。面对响应式页面,我们为了做到实时响应页面参…

[个人笔记] 记录docker-compose的部署过程

容器技术 第二章 记录docker-compose的部署过程 容器技术记录docker-compose的部署过程(可选)新建docker用户(可选)迁移docker-ce目录docker-compose官方插件形式安装官方二进制形式独立安装(可选) 使用docker-compose二进制包的 bash_completion 命令补齐 参考来源 记录docker…

Android8.1高通平台修改默认输入法

需求 安卓8.1 SDK原生的输入法只能打英文, 需要替换成中文输入法. 以高通平台为例, 其它平台也适用. 查看设备当前默认输入法 adb shell settings list secure | grep input 可以看到当前默认是LatinIME这个安卓原生输入法. default_input_methodcom.android.inputmethod.l…

使用compile_commands.json配置includePath环境,解决vscode中引入头文件处有波浪线的问题

通过编译时生成的 compile_commands.json 文件自动完成对 vscode 中头文件路径的配置,实现 vscode 中的代码的自动跳转。完成头文件路径配置后,可以避免代码头部导入头文件部分出现波浪线,警告说无法正确找到头文件。 步骤 需要在 vscode 中…

木馒头头戴式蓝牙耳机

这里写目录标题 木馒头二代头戴式蓝牙耳机清除连接记忆 木馒头二代头戴式蓝牙耳机清除连接记忆 在配对模式下,同时按住播放和暂停按钮4秒,LED闪烁紫色3次,即为清除成功。

电子烟开发【恒压、恒有效算法】

恒压算法 pwm是通过软件模拟的 pwm满值运行是250全占空比 #define D_TARGET_AVERAGE_VOLTAGE 3500 //R_ADC1_Vout :发热丝两端AD值 //R_ADC_FVR :电池电压AD值 //FVR_VOLTAGE :电池AD参考电压 满电值AD //R_Smk1Duty :最后…

Java 面试题:String、StringBuffer、StringBuilder 有什么区别?

几乎所有的应用开发都离不开操作字符串,理解字符串的设计和实现以及相关工具如拼接类的使用,对写出高质量代码是非常有帮助的。关于这个问题,我前面的回答是一个通常的概要性回答,至少你要知道 String 是 Immutable 的&#xff0c…

深入分析 Android Service (一)

文章目录 深入分析 Android Service (一)1. Android Service 设计说明1.1. Service 的类型1.2. Service 的生命周期1.3. 创建和启动 Service1.4. 绑定 Service1.5. ServiceConnection1.6. 前台 Service1.7. IntentService示例:创建和使用 IntentService 2. Service …

CentOS7部署Yearning并配置MySQL数据库远程访问详细流程——“cpolar内网穿透”

文章目录 前言1. Linux 部署Yearning2. 本地访问Yearning3. Linux 安装cpolar4. 配置Yearning公网访问地址5. 公网远程访问Yearning管理界面6. 固定Yearning公网地址 前言 本文主要介绍在 Linux 系统简单部署 Yearning 并结合 cpolar 内网穿透工具实现远程访问,破除…

Git基本使用教程(学习记录)

参考文章链接: Git教程(超详细,一文秒懂) RUNOOB Git教程 Git学习记录 1Git概述 1.1版本控制软件功能 版本管理:更新或回退到历史上任何版本,数据备份共享代码:团队间共享代码,…

立哥开源技术-基于Python的TTS分析脚本

import pyttsx3 # 创建一个引擎实例 engine pyttsx3.init() # 获取所有可用的语音列表 voices engine.getProperty(voices) # 打印出所有可用的语音名称和属性 for voice in voices: print("Voice:") print(" - 名称: %s" % voice.name) …

【vscode篇】1-VScode设置语言为中文,2-解决中文注释乱码问题。

设置语言为中文 在前端开发中,Visual Studio Code(简称vscode)是一个非常好用的工具,但第一次打开vscode会发现界面为英文,这对很多开发者来说会很不友好(比如我),把界面设置成中文只需要安装一个插件即可&…

从零入门激光SLAM(二十二)——Fast-lio2代码详解(三) 迭代误差更新

Fast-lio2原理解析见链接从零入门激光SLAM(二十一)——看不懂FAST-LIO?进来_fastlio 雷达 更改频率-CSDN博客 注释版代码完整版见GitHub - huashu996/Fast-lio2-Supernote: Fast-lio2 code with note 本代码解析以算法流程的逻辑解析代码&…

C#面:如果不用VisualStudio,用哪个命令行编译C#程序

可以使用命令提示符或者终端来执行编译命令 csc.exe 。 步骤: 打开命令提示符或终端。使用 cd 切换到 C# 程序所在的目录。使用以下命令来编译C#程序: 其中,是你的C#源代码文件的名称(包括扩展名.cs)。如果编译成功&…

ONLYOFFICE 协作空间与 WordPress 如何集成

转载自作者:VincentYoung,略有改动 阅读本文,了解如何将 ONLYOFFICE 协作空间与 WordPress 进行集成。 ONLYOFFICE 协作空间是其去年新推出的产品,用创建虚拟办公室房间的方式,来组织公司内部团队成员的在线协作办公&…

C++中的双指针和三指针

目录 摘要 双指针(Double Pointers) 含义 使用场景 三指针(Triple Pointers) 含义 使用场景 总结 双指针的详细说明 三指针的详细说明 摘要 在C中,双指针和三指针分别是指向指针的指针和指向指向指针的指针…

C. Swap Adjacent Elements 题解

C. Swap Adjacent Elements 题解 S A E 题目大意思路代码题目大意 输入格式: 第一行一个整数 n n n ( 2 ≤ (2≤ (2≤ n n n ≤ 200000 ) ≤200000) ≤200000) 第二行 n个整数 a 1 a_1 a1​, a 2 a_2 a2​

redis 允许外网访问

要使Redis服务器允许外网访问,可以遵循以下步骤进行配置: 编辑Redis配置文件: 找到Redis的配置文件,通常位于/etc/redis/redis.conf,但位置可能因安装方式和操作系统而异。取消绑定本地地址:在配置文件中&a…