Day.js 与 Moment.js 的比较

优点

  • 体积小:Day.js 的体积仅为 2KB 左右,而 Moment.js 的体积约为 67KB。
  • API 相似:Day.js 的 API 与 Moment.js 高度相似,迁移成本低。
  • 不可变性:Day.js 的日期对象是不可变的,这意味着每次操作都会返回一个新的日期对象,避免了意外的副作用。

缺点

  • 功能较少:Day.js 的功能相对 Moment.js 较少,特别是在处理时区和复杂日期操作时。
  • 插件依赖:一些高级功能(如时区支持)需要通过插件实现,增加了额外的依赖。

定位与设计理念

  • Moment.js



- 老牌时间处理库,2012 年发布,曾是 JavaScript 时间处理的事实标准,功能全面且语法直观。

- 设计目标:覆盖几乎所有时间处理需求,包括复杂的时区、本地化、格式化、操作等。

- 现状:2020 年进入 维护模式(不再新增功能,仅修复严重 bug),官方推荐迁移至更现代的库(如 Day.js、Luxon 等)。

  • Day.js

    • 轻量替代方案,2018 年发布,设计灵感直接来源于 Moment.js,语法高度相似,但更简洁轻量。
    • 设计目标:通过最小化核心功能 + 插件机制,提供常用时间操作能力,避免过度设计。
    • 现状:持续活跃更新,由单一开发者维护,社区支持度快速增长。

核心差异对比

维度 Moment.js Day.js
体积 约 40KB+ (完整版本),包含大量功能模块。 仅 2KB(核心库),插件按需引入,体积极小。
API 设计 功能全面(如 localeData()utcOffset()tz() 等),部分高级功能略显复杂。 极简 API,保留高频操作(如 format()add()diff() 等),链式调用风格与 Moment 一致,学习成本低。
功能完整性 原生支持时区(需单独引入 moment-timezone 插件)、复杂本地化、相对时间、ISO 8601 等,无需额外依赖。 核心库仅包含基础功能,时区(需 dayjs-plugin-timezone 插件)、本地化(需 dayjs/plugin/locales)等需手动安装插件,灵活性高但需配置。
性能 解析和操作大型时间数据时性能中等,体积大导致加载速度较慢。 轻量核心 + 按需加载,解析和操作速度更快,尤其在移动端或高频时间处理场景优势明显。
浏览器支持 兼容 IE 8+ 及现代浏览器,对旧版浏览器友好。 依赖 ES6+(如 PromiseProxy),支持现代浏览器(Chrome 49+, Firefox 52+, 等),不支持 IE。
生态与社区 生态成熟,周边工具丰富(如 Webpack 插件、React 组件等),但更新停滞。 生态快速发展中,主流框架(如 Vue、React)适配良好,插件系统完善(官方维护 20+ 插件)。
维护状态 进入维护模式,仅安全更新,无新功能。 活跃维护,定期发布新版本,快速响应社区需求。

Dayjs中文文档

https://dayjs.uihtm.com/

如何将 Moment.js 替换为 Day.js

1. 安装 Day.js

首先,安装 Day.js:

npm install dayjs

2. 替换导入语句

将项目中的 Moment.js 导入语句替换为 Day.js:

// 将
import moment from 'moment'; // 替换为
import dayjs from 'dayjs';

3. 替换 API 调用

将 Moment.js 的 API 调用替换为 Day.js 的等效调用。由于两者的 API 非常相似,大多数情况下只需简单替换即可:

// Moment.js
const date = moment('2023-10-01');
console.log(date.format('YYYY-MM-DD')); // Day.js
const date = dayjs('2023-10-01');
console.log(date.format('YYYY-MM-DD'));

4. 处理差异

在某些情况下,Day.js 和 Moment.js 的行为可能略有不同。你需要根据具体情况调整代码。例如,Day.js 的 diff 方法返回的是毫秒数,而 Moment.js 返回的是天数:

// Moment.js
const diff = moment('2023-10-02').diff('2023-10-01', 'days'); // 1 // Day.js
const diff = dayjs('2023-10-02').diff('2023-10-01', 'day'); // 1

5. 引入插件(可选)

如果你需要使用 Day.js 的高级功能(如时区支持),可以引入相应的插件:

5. 总结:如何选择?

  • 选 Moment.js:如果项目依赖其成熟生态、需要兼容旧浏览器,或时间逻辑极其复杂且不愿配置插件。
  • 选 Day.js:如果追求轻量、高性能、简洁 API,且能接受通过插件扩展功能(推荐新项目使用)。
import utc from 'dayjs/plugin/utc';
import timezone from 'dayjs/plugin/timezone'; dayjs.extend(utc);
dayjs.extend(timezone); const date = dayjs().tz('America/New_York');
console.log(date.format('YYYY-MM-DD HH:mm:ss'));

总结:

两者语法高度相似,迁移成本低。若项目对体积和性能敏感,Day.js 是更优解;若功能全面性和旧项目兼容更重要,Moment.js 仍可短期使用,但长期建议迁移至活跃库(如 Day.js 或 Luxon)。

Day.js 2kb日期时间处理javascript库的更多相关文章

  1. JS对日期时间的操作

    代码: //判断是否超期(有效期开始超过一年后算已超期) function IsEffect(effectDate) { var val = ""; var currentDate ...

  2. Js获取日期时间及其它操作

    var myDate = new Date();myDate.getYear();        //获取当前年份(2位)myDate.getFullYear();    //获取完整的年份(4位,1 ...

  3. ⏰Day.js 2kB超轻量时间库 和Moment.js一样的API

    Moment.js 是一个大而全的 JS 时间库,很大地方便了我们处理日期和时间.但是 Moment.js太重了(200k+ with locals),可能一般项目也只使用到了她几个常用的API.虽然 ...

  4. js获取当前时间:封装js的日期时间

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  5. Arrow-一个最好用的日期时间Python处理库

    https://www.jianshu.com/p/c878bb1c48c1 写过Python程序的人大都知道,Python日期和时间的处理非常繁琐和麻烦,主要有以下几个问题: 有众多的package ...

  6. js 显示日期时间,时间过一秒加1

    html: <div id="data"><font>2017年10月17日 15:11:11</font></span> js: ...

  7. JS格式化日期时间的方法

    //格式化时间的方法 function format(fmt, date) { var o = { "M+": date.getMonth() + 1, //月份 "d+ ...

  8. JS 格式化日期时间

    方法一: // 对Date的扩展,将 Date 转化为指定格式的String // 月(M).日(d).小时(h).分(m).秒(s).季度(q) 可以用 1-2 个占位符, // 年(y)可以用 1 ...

  9. js获取日期时间

    获取当前时间 function getNowFormatDate() {//获取当前时间 var date = new Date(); var symbol_gang = "-"; ...

  10. js指定日期时间加一天 ,判断指定时间是否为周末

    function dateAdd(startDate) { startDate = new Date(startDate); startDate = +startDate + ***; startDa ...

随机推荐

  1. HTML - 1、基础

    <!DOCTYPE html> <!-- 指定网页内容的语言 --> <html lang="en"> <head> <!-- ...

  2. 【忍者算法】从生活场景到回文链表:探索对称性检测|LeetCode 234 回文链表

    从生活场景到回文链表:探索对称性检测 生活中的回文现象 在日常生活中,回文无处不在.比如"上海自来水来自海上"."12321"这样正着读和倒着读都一样的字符串或 ...

  3. CF895C Square Subsets 题解

    看到 \(a_i\le 70\) 后,发现 \(n\) 啥用没有,因为只需要枚举 \(1-70\) 选几个即可. 看到求完全平方数后,想到分解质因数,由于 \(a_i\le 70\),所以只有 \(1 ...

  4. 用于敏捷开发的最佳免费 UML 工具 2022

    Table of Contents  hide  1 最好的在线免费 UML图工具 2 免费的 UML Visual Paradigm 在线平台 3 其他福利 4 用于正式和大规模可视化建模的 Vis ...

  5. 【渗透测试】Vulnhub GROTESQUE 1.0.1

    渗透环境 攻击机:   IP: 192.168.10.18(Kali) 靶机:     IP:192.168.10.9 靶机下载地址:https://www.vulnhub.com/entry/gro ...

  6. Redis高可用部署:3台服务器打造哨兵集群

    1.Redis集群介绍 Redis 集群(Redis Cluster)是Redis提供的一种分布式部署方式,旨在提供高可用性.如果某个主节点发生故障,集群能够自动进行故障转移,将副本提升为主节点,从而 ...

  7. AGC002E题解

    简要题意 桌上有 \(n\) 堆糖果,第 \(i\) 堆糖果有 \(a_i\) 个糖.两人在玩游戏,轮流进行,每次进行下列两个操作中的一个: 将当前最大的那堆糖果全部吃完: 将每堆糖果吃掉一个: 吃完 ...

  8. 题解:SP6517 JOCHEF - Farmer Sepp

    怎么题解全是 dp?可以用笛卡尔树啊! 题目传送门. 笛卡尔树的介绍 笛卡尔树,是一种二叉搜索树,它满足如下条件: 每个节点的编号满足二叉搜索树的性质. 每个节点的权值满足小根堆或大根堆的性质. 大概 ...

  9. cypress 在 typescript 项目中报错找不到 'tslib'

    原文链接:https://blog.jijian.link/2020-08-11/cypress-typescript-cannot-find-module-tslib/ cypress 在 type ...

  10. Qt修改exe文件图标

    修改Qt生成exe的图标以及软件标题图标 目录 修改Qt生成exe的图标以及软件标题图标 简介 QtCreator下添加exe图标 直接添加.ico 通过.rc文件修改 Visual Studio下添 ...