Day.js：轻量级JavaScript日期时间库的全面介绍

最新推荐文章于 2025-05-29 15:51:39 发布
原创 最新推荐文章于 2025-05-29 15:51:39 发布 · 1k 阅读 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

Day.js：轻量级JavaScript日期时间库的全面介绍

【免费下载链接】dayjs ⏰ Day.js 2kB immutable date-time library alternative to Moment.js with the same modern API 【免费下载链接】dayjs 项目地址: https://gitcode.com/gh_mirrors/da/dayjs

Day.js 是一个轻量级的 JavaScript 日期时间处理库，以其仅 2KB 的极致体积和与 Moment.js 高度兼容的 API 设计而闻名。本文全面介绍了 Day.js 的项目背景、核心特性、API 兼容性对比以及在现代前端开发中的定位与优势。Day.js 诞生于现代前端对性能优化的迫切需求，解决了 Moment.js 在体积、不可变性和模块化方面的局限性，为开发者提供了平滑的迁移路径和优异的性能表现。

Day.js项目背景与诞生原因

在JavaScript生态系统中，日期时间处理一直是开发者面临的重大挑战之一。原生JavaScript的Date对象虽然提供了基本功能，但在实际开发中往往显得力不从心，特别是在格式化、解析、时区处理和国际化支持方面存在诸多不足。

Moment.js的辉煌与局限

在Day.js诞生之前，Moment.js是JavaScript日期处理领域无可争议的王者。自2011年发布以来，Moment.js凭借其强大的功能和友好的API设计，迅速成为开发者的首选工具。它解决了原生Date对象的诸多痛点：

// Moment.js示例代码
const moment = require('moment');
const now = moment();
console.log(now.format('YYYY-MM-DD HH:mm:ss')); // 2024-08-22 22:03:57
console.log(now.add(1, 'day').format()); // 2024-08-23T22:03:57+08:00

然而，随着前端工程化的深入发展，Moment.js的局限性逐渐暴露：

特性Moment.js现代前端需求
体积大小16.7kB (gzipped)< 3kB
不可变性可变对象不可变数据
Tree Shaking不支持必需支持
模块化整体导入按需加载
性能相对较慢高性能

现代前端开发的挑战

随着单页面应用(SPA)、渐进式Web应用(PWA)和移动端开发的兴起，前端对性能的要求达到了前所未有的高度。特别是在以下场景中，Moment.js的体积问题变得尤为突出：

mermaid

Day.js的诞生契机

正是在这样的背景下，Day.js应运而生。项目创建者iamkun敏锐地捕捉到了开发者的痛点，决定创建一个既保留Moment.js优秀API设计，又解决其体积和性能问题的现代化替代方案。

Day.js的设计哲学体现在以下几个核心原则：

  1. 极简主义：仅包含最核心的日期时间功能，去除冗余特性
  2. API兼容性：保持与Moment.js高度相似的API，降低迁移成本
  3. 不可变性：所有操作返回新实例，避免副作用
  4. 模块化设计：支持Tree Shaking和按需加载
  5. 轻量化：严格控制体积在2kB以内

技术趋势的推动

Day.js的诞生也得益于多个技术趋势的推动：

  • Bundle大小敏感度提升：Webpack、Rollup等构建工具普及，开发者开始关注最终打包体积
  • 移动端性能要求：移动设备网络环境复杂，小体积库更受欢迎
  • 函数式编程兴起：不可变数据结构和纯函数理念被广泛接受
  • ES6模块标准：原生模块支持为按需加载提供了基础

项目定位与目标用户

Day.js明确将自己定位为"Moment.js的轻量级替代品"，主要面向以下用户群体：

  • 正在使用Moment.js但希望减少打包体积的团队
  • 新项目需要日期时间功能但不想引入过大依赖的开发者
  • 对性能有严格要求的前端应用
  • 需要良好国际化支持的跨国项目

mermaid

生态系统的完善

Day.js并非孤立的项目，它构建了一个完整的生态系统：

组件类型功能描述示例
核心库基础日期时间操作dayjs()
语言包国际化支持dayjs/locale/zh-cn
插件系统功能扩展dayjs/plugin/advancedFormat
TypeScript定义类型支持@types/dayjs

这种模块化设计使得开发者可以根据实际需求选择需要的功能，避免了不必要的代码包含，完美契合现代前端工程的优化需求。

Day.js的诞生不仅是技术优化的结果，更是前端开发理念演进的重要标志。它证明了在保持开发体验的同时，通过精心的架构设计和功能取舍，完全可以实现性能与功能的完美平衡。

核心特性：2KB大小与不可变性设计

Day.js 最引人注目的两大核心特性是其极致的轻量化设计和不可变性的架构理念。这两个特性共同构成了 Day.js 在现代前端开发中的核心竞争力，使其成为 Moment.js 的理想替代品。

极致的轻量化设计

Day.js 的核心库大小仅为 2KB（gzip 压缩后），这一数字在当今前端性能优化中具有重要意义。让我们通过对比表格来直观感受 Day.js 的体积优势：

日期时间库文件大小 (gzip)相对大小主要特性
Day.js2KB1x核心日期操作
Moment.js16.7KB8.4x完整功能集
date-fns13.6KB6.8x函数式 API
Luxon22.4KB11.2x时区支持

这种极致的轻量化是通过精心的架构设计和代码优化实现的：

// Day.js 的核心初始化代码示例
class Dayjs {
  constructor(cfg) {
    this.$L = parseLocale(cfg.locale, null, true)
    this.parse(cfg)
    this.$x = this.$x || cfg.x || {}
    this[IS_DAYJS] = true
  }
  
  parse(cfg) {
    this.$d = parseDate(cfg)
    this.init()
  }
  
  init() {
    const { $d } = this
    this.$y = $d.getFullYear()
    this.$M = $d.getMonth()
    this.$D = $d.getDate()
    this.$W = $d.getDay()
    this.$H = $d.getHours()
    this.$m = $d.getMinutes()
    this.$s = $d.getSeconds()
    this.$ms = $d.getMilliseconds()
  }
}

Day.js 的体积优化策略包括：

  1. 按需加载机制：国际化语言包和插件都是可选的，只有在使用时才会被包含在构建中
  2. 精简的 API 设计：只提供最常用的日期时间操作方法
  3. 高效的代码结构：避免冗余代码，使用简洁的实现方式
  4. Tree Shaking 友好：ES6 模块化设计，便于打包工具优化

不可变性架构设计

不可变性是 Day.js 的另一个核心设计理念。与 Moment.js 的可变性设计不同，Day.js 的所有操作都会返回新的实例，而不是修改原始对象。

// 不可变性示例
const original = dayjs('2023-01-01')
const modified = original.add(1, 'month')

console.log(original.format('YYYY-MM-DD')) // 2023-01-01
console.log(modified.format('YYYY-MM-DD')) // 2023-02-01
// 原始对象保持不变

这种设计模式带来了多重好处：

mermaid

不可变性的技术实现

Day.js 通过 clone() 方法实现不可变性，每个修改操作都会先创建副本：

// 在 Dayjs 类中的 set 方法实现
set(string, int) {
  return this.clone().$set(string, int)
}

// clone 方法创建新实例
clone() {
  return wrapper(this.$d, this)
}

// wrapper 函数创建新的 Dayjs 实例
const wrapper = (date, instance) =>
  dayjs(date, {
    locale: instance.$L,
    utc: instance.$u,
    x: instance.$x,
    $offset: instance.$offset
  })
不可变性带来的优势
  1. 可预测的行为：操作不会产生副作用，代码更易于理解和调试
  2. 函数式编程友好：适合在 React、Vue 等现代框架中使用
  3. 线程安全：在多线程环境中更加安全可靠
  4. 时间旅行调试：便于实现状态管理和调试功能

性能与功能的完美平衡

Day.js 在保持极小体积的同时，并没有牺牲核心功能。它提供了完整的日期时间操作 API：

操作类型方法示例说明
解析dayjs('2023-01-01')字符串转日期
格式化.format('YYYY-MM-DD')日期转字符串
获取/设置.get('month'), .set('month', 1)日期部件操作
运算.add(1, 'day'), .subtract(1, 'month')日期加减
比较.isBefore(), .isAfter(), .isSame()日期比较
查询.isValid(), .isLeapYear()日期验证

实际应用场景

在大型前端应用中，Day.js 的轻量级特性尤为重要：

// React 组件中的使用示例
import React, { useState } from 'react'
import dayjs from 'dayjs'

function DatePicker() {
  const [selectedDate, setSelectedDate] = useState(dayjs())
  
  const handleDateChange = (newDate) => {
    // 由于不可变性，我们可以安全地传递日期对象
    setSelectedDate(newDate)
  }
  
  const nextWeek = selectedDate.add(7, 'day')
  
  return (
    <div>
      <p>当前选择: {selectedDate.format('YYYY年MM月DD日')}</p>
      <p>一周后: {nextWeek.format('YYYY年MM月DD日')}</p>
      <button onClick={() => handleDateChange(selectedDate.add(1, 'day'))}>
        增加一天
      </button>
    </div>
  )
}

这种设计使得 Day.js 特别适合：

  • 移动端应用：对包大小敏感的场景
  • 大型单页应用：需要良好性能的应用
  • 组件库开发：作为轻量级依赖
  • 服务器端渲染：快速启动和低内存占用

Day.js 通过 2KB 的极致轻量化和不可变性设计，在现代前端开发中找到了性能与功能的最佳平衡点，为开发者提供了既强大又高效的日期时间处理解决方案。

与Moment.js的API兼容性对比

Day.js 作为 Moment.js 的轻量级替代方案，在设计理念上保持了与 Moment.js 高度兼容的 API 接口。这种兼容性使得从 Moment.js 迁移到 Day.js 变得异常简单，开发者几乎不需要修改现有代码就能完成迁移。下面我们将从多个维度详细对比两者的 API 兼容性。

核心API兼容性对比

Day.js 的核心 API 与 Moment.js 保持了高度一致性，下表展示了主要方法的兼容性对比：

方法类别Moment.js 方法Day.js 对应方法兼容性状态差异说明
创建实例moment()dayjs()✅ 完全兼容参数格式和用法完全相同
moment(dateString)dayjs(dateString)✅ 完全兼容支持相同的日期字符串格式
moment(Date对象)dayjs(Date对象)✅ 完全兼容原生 Date 对象支持
moment(unix时间戳)dayjs(unix时间戳)✅ 完全兼容Unix 时间戳支持
格式化输出.format().format()✅ 完全兼容相同的格式化令牌
.format('YYYY-MM-DD').format('YYYY-MM-DD')✅ 完全兼容完全一致的格式化语法
.toISOString().toISOString()✅ 完全兼容ISO 8601 格式输出
日期操作.add(value, unit).add(value, unit)✅ 完全兼容相同的单位和值参数
.subtract(value, unit).subtract(value, unit)✅ 完全兼容相同的减法操作
.startOf(unit).startOf(unit)✅ 完全兼容相同的时间单位支持
.endOf(unit).endOf(unit)✅ 完全兼容相同的时间单位支持
日期比较.isBefore().isBefore()✅ 完全兼容相同的比较逻辑
.isAfter().isAfter()✅ 完全兼容相同的比较逻辑
.isSame().isSame()✅ 完全兼容相同的相等判断
.isBetween().isBetween()✅ 完全兼容插件支持，需额外引入
获取/设置.year().year()✅ 完全兼容获取/设置年份
.month().month()✅ 完全兼容获取/设置月份
.date().date()✅ 完全兼容获取/设置日期
.hour().hour()✅ 完全兼容获取/设置小时
.minute().minute()✅ 完全兼容获取/设置分钟
.second().second()✅ 完全兼容获取/设置秒数

方法调用链式操作兼容性

Day.js 完全支持 Moment.js 的链式调用模式，这使得代码编写风格可以保持一致：

// Moment.js 链式调用
moment().add(1, 'day').subtract(2, 'hours').format('YYYY-MM-DD HH:mm:ss')

// Day.js 完全相同的链式调用
dayjs().add(1, 'day').subtract(2, 'hours').format('YYYY-MM-DD HH:mm:ss')

国际化支持兼容性

在国际化方面，Day.js 提供了与 Moment.js 类似的 locale 机制：

// Moment.js 国际化使用
moment.locale('zh-cn')
moment().format('LLLL')

// Day.js 国际化使用（需引入对应locale文件）
import 'dayjs/locale/zh-cn'
dayjs.locale('zh-cn')
dayjs().format('LLLL')

插件系统兼容性设计

Day.js 通过插件系统扩展功能，许多 Moment.js 的内置功能在 Day.js 中作为插件提供：

// 高级格式化插件（对应 Moment.js 的内置功能）
import advancedFormat from 'dayjs/plugin/advancedFormat'
dayjs.extend(advancedFormat)
dayjs().format('Qo [quarter]') // 输出: 4th quarter

// 相对时间插件
import relativeTime from 'dayjs/plugin/relativeTime'
dayjs.extend(relativeTime)
dayjs().fromNow() // 输出: a few seconds ago

不可变性特性对比

Day.js 的一个重要设计差异是不可变性（Immutability），这是与 Moment.js 的主要区别：

// Moment.js - 可变对象
const m1 = moment()
const m2 = m1.add(1, 'day')
console.log(m1 === m2) // true - 同一个对象被修改

// Day.js - 不可变对象
const d1 = dayjs()
const d2 = d1.add(1, 'day')
console.log(d1 === d2) // false - 返回新对象，原对象不变

这种不可变性设计避免了意外的副作用，使代码更加可预测和易于调试。

性能优化差异

由于 Day.js 采用了不可变设计和更精简的实现，在性能方面有明显优势：

mermaid

迁移注意事项

虽然 API 高度兼容，但从 Moment.js 迁移到 Day.js 时仍需注意以下几点：

  1. 插件机制：Moment.js 的某些内置功能在 Day.js 中需要作为插件引入
  2. 全局配置：Moment.js 的全局配置方式与 Day.js 略有不同
  3. 自定义格式：极少数自定义格式化令牌可能需要调整
  4. 类型定义：TypeScript 项目中的类型定义需要更新

兼容性验证示例

以下代码展示了 Day.js 与 Moment.js API 的完全兼容性：

// 创建和格式化
const nowMoment = moment().format('YYYY-MM-DD HH:mm:ss')
const nowDayjs = dayjs().format('YYYY-MM-DD HH:mm:ss')
console.log(nowMoment === nowDayjs) // true - 输出相同

// 日期计算
const nextWeekMoment = moment().add(7, 'days').startOf('day')
const nextWeekDayjs = dayjs().add(7, 'days').startOf('day')
console.log(nextWeekMoment.format() === nextWeekDayjs.format()) // true

// 复杂操作链
const complexMoment = moment()
  .year(2023)
  .month(5)
  .date(15)
  .hour(14)
  .minute(30)
  .second(0)

const complexDayjs = dayjs()
  .year(2023)
  .month(5)
  .date(15)
  .hour(14)
  .minute(30)
  .second(0)

console.log(complexMoment.format() === complexDayjs.format()) // true

总结对比表格

特性维度Moment.jsDay.js兼容性评估
核心API方法完整丰富高度兼容✅ 95%+ 兼容
链式操作支持完全支持✅ 100% 兼容
国际化内置支持插件式支持✅ 功能兼容
插件系统有限支持强大扩展⚡ Day.js 更优
不可变性可变对象不可变对象🔄 设计差异
包大小约 280KB约 2KB⚡ Day.js 更优
性能良好更优⚡ Day.js 更优
树摇优化有限优秀⚡ Day.js 更优

Day.js 通过精心设计的 API 兼容性，为开发者提供了从 Moment.js 平滑迁移的路径，同时带来了显著的性能提升和包体积优化。这种兼容性设计使得现有项目可以几乎无痛地切换到 Day.js，享受现代化日期处理库带来的各种好处。

在现代前端开发中的定位与优势

随着现代前端应用的复杂性和规模不断增长，对日期时间处理库的要求也日益严格。Day.js 作为一个轻量级的 JavaScript 日期时间库，在前端生态系统中占据了独特而重要的位置。

轻量级设计的战略价值

Day.js 最显著的优势在于其极小的体积——仅 2KB 的压缩大小，这在前端性能优化中具有决定性意义。与 Moment.js 的 67KB 相比，Day.js 的体积减少了 97%，这种差异在现代 Web 应用加载性能中至关重要。

mermaid

体积优势带来的直接好处包括：

  • 更快的首次加载时间：减少网络传输时间，提升用户体验
  • 更低的解析和执行成本：JavaScript 引擎处理更少的代码
  • 更好的缓存利用率：小文件更容易被浏览器缓存
  • 减少包大小对整体应用的影响：在大型应用中尤为明显

不可变性的架构优势

Day.js 采用不可变设计模式，所有操作都返回新的实例而不是修改原始对象。这种设计在现代前端框架中具有重要价值：

// 不可变性示例
const originalDate = dayjs('2023-01-01');
const modifiedDate = originalDate.add(1, 'month');

console.log(originalDate.format('YYYY-MM-DD')); // 2023-01-01
console.log(modifiedDate.format('YYYY-MM-DD')); // 2023-02-01

这种不可变性设计特别适合与 React、Vue 等现代前端框架配合使用，因为它：

  • 避免意外的副作用：防止在复杂应用中产生难以追踪的 bug
  • 支持函数式编程范式：符合现代前端开发的最佳实践
  • 简化状态管理：与 Redux、Vuex 等状态管理库无缝集成
  • 提高代码可预测性：每个操作都产生确定性的结果

API 兼容性的平滑迁移路径

Day.js 提供了与 Moment.js 高度兼容的 API，这为开发者提供了平滑的迁移路径：

mermaid

这种兼容性策略的优势包括：

  • 降低学习成本：Moment.js 开发者可以快速上手
  • 减少重构工作量：大部分代码可以直接复用
  • 降低迁移风险：渐进式迁移，减少对现有功能的影响
  • 保持团队生产力：不需要重新培训开发人员

模块化与按需加载的现代架构

Day.js 采用模块化设计，支持按需加载语言环境和插件：

// 按需加载示例
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn'; // 仅在使用时加载中文语言包
import advancedFormat from 'dayjs/plugin/advancedFormat'; // 仅在使用时加载插件

dayjs.locale('zh-cn');
dayjs.extend(advancedFormat);

这种设计符合现代前端工程的构建理念：

特性传统方式Day.js 方式优势
语言支持全部打包按需加载减少最终包大小
插件系统功能内置模块化扩展保持核心简洁
树摇优化有限支持完全支持更好的构建优化

与现代构建工具的完美集成

Day.js 与现代前端构建工具链完美集成，支持各种模块系统和构建优化：

// 在不同环境中的使用方式
// ES Modules
import dayjs from 'dayjs';

// CommonJS
const dayjs = require('dayjs');

// UMD (浏览器直接使用)
<script src="https://unpkg.com/dayjs@1.11.10/dayjs.min.js"></script>

这种多格式支持确保了 Day.js 可以在各种开发环境中使用：

  • Webpack/Rollup/Vite：完整的 tree-shaking 支持
  • TypeScript：完整的类型定义支持
  • 测试框架：与 Jest、Vitest 等完美集成
  • SSR/SSG：在服务器端渲染中表现良好

性能优化的工程实践

Day.js 在性能优化方面采用了多项现代前端工程的最佳实践：

mermaid

性能优化措施包括：

  • 使用现代 JavaScript 特性：利用 ES6+ 的语言特性提高性能
  • 避免不必要的功能：保持核心功能的精简和高效
  • 优化的算法实现：选择性能最好的实现方式
  • 内存使用优化：减少不必要的内存分配

开发者体验的全面提升

Day.js 不仅关注运行时性能，还高度重视开发者体验：

// 链式调用提供优秀的开发体验
const result = dayjs()
  .startOf('month')
  .add(1, 'day')
  .set('year', 2024)
  .format('YYYY-MM-DD HH:mm:ss');

console.log(result); // 2024-01-02 00:00:00

开发者体验的改进包括：

  • 流畅的链式 API：让代码更简洁易读
  • 完整的类型提示：提供优秀的 IDE 支持
  • 详细的错误信息：帮助快速定位问题
  • 丰富的文档和示例：降低使用门槛

在现代前端技术栈中的定位

Day.js 在现代前端技术栈中定位明确，专注于解决日期时间处理的核心需求，而不试图成为全能型的工具库。这种专注使得它能够在特定的领域内做到极致，为开发者提供最佳的选择。

通过与现代前端框架、构建工具、性能优化实践的结合，Day.js 证明了轻量级库在现代 Web 开发中不仅可行，而且是更好的选择。它代表了前端库设计的新方向：专注于核心功能、保持轻量级、提供优秀的开发者体验，同时不牺牲性能和可靠性。

总结

Day.js 作为现代 JavaScript 日期时间处理的优秀解决方案，通过极致的轻量化设计（仅 2KB）、不可变性架构和与 Moment.js 高度兼容的 API，成功解决了传统日期库在性能、体积和开发体验方面的痛点。其模块化设计和插件系统支持按需加载，完美契合现代前端工程的优化需求。Day.js 不仅提供了从 Moment.js 平滑迁移的路径，更代表了前端库设计的新方向：专注于核心功能、保持轻量级、提供优秀的开发者体验，同时不牺牲性能和可靠性。无论是新项目开发还是现有项目优化，Day.js 都是值得考虑的现代化日期处理解决方案。

【免费下载链接】dayjs ⏰ Day.js 2kB immutable date-time library alternative to Moment.js with the same modern API 【免费下载链接】dayjs 项目地址: https://gitcode.com/gh_mirrors/da/dayjs

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值