主流时间库横向对比

资讯

1 背景

State of Frontend 2022：https://tsh.io/state-of-frontend/

根据《State of Frontend 2022》问卷调查， 最受欢迎的前五个工具库中，时间处理相关的库占据了两席。时间处理工具为什么如受前端工程师青睐？JS Date 为什么无法满足开发需求？不同的时间库之间又存在哪些差异？

2 时间

2.1 计量标准

时间包含了时刻和时段两个概念，常规意义上的时段是可以通过两个时刻计算得到的，但地球自转的不稳定，这种方式得到的时段并不是恒定的，因而诞生了两种时间计量系统：

  1. 世界时（GMT）：根据地球自转的天文测量得到，并不稳定。
  2. 原子时（IAT）：根据原子的单次振动时间得到，可以认为是恒定不变的。

这两种时间尺度速率上的不同每一至二年会带来会差大约 1 秒的差异，因此每隔一定时间会在原子时的基础上增加或减少 1 秒，即闰秒，得到接近于世界时的时间，称为协调世界时（UTC）。

2.2 时区

全球被划分为 24 个时区。规定英国的格林威治天文台旧址所在经线为基准线，即本初子午线，所在时区为零时区，零时区以东为东 1-12 区，以西为西 1-12 区（东 12 区和西 12 区是重合的）。每差一个时区，区时相差一小时，越往东区时越早。为了让世界各地都有一个统一的参照时间，规定零时区的 UTC 时间作为标准时间，简称 UTC 时间。

3 new Date()

3.1 YYYY-MM-DD 的时区问题

  • 使用 new Date('YYYY-MM-DD') 实例化 Date 对象时，由于没有指定具体时刻，系统会自动设置一个时刻为 ‘00:00:00’ 的 UTC 时间，并在用户访问时，返回系统时区的对应时间。如，位于东八区的开发者访问 Date 显示的时间是 UTC+8。位于西七区的开发者访问 Date 显示的时间是 UTC-7。也就是说，如果直接使用 new Date('YYYY-MM-DD') 设置时间，位于不同时区的用户会获取不同的结果，某些情况下会导致意想不到的 bug。
  • 使用 new Date('YYYY-MM-DD HH-MM-SS') 或其他官方推荐的日期格式实例化对象，如new Date(DD, MM YYYY)，可以避免上述时区问题，创建当前时区下 00:00:00 的 Date 对象。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 时区为中国
var date1 = new Date('2022-10-24')
// Mon Oct 24 2022 08:00:00 GMT+0800 (中国标准时间)

// 时区为美国
var date2 = new Date('2022-10-24')
// Sun Oct 23 2022 17:00:00 GMT-0700 (北美太平洋夏令时间)

// 使用 new Date('YYYY-MM-DD HH-MM-SS') 可以创建当前时区的 Date 对象
var date3 = new Date('2022-10-24 00:00:00')
// Mon Oct 24 2022 00:00:00 GMT+0800 (中国标准时间)

// 传入格式为'DD, MM YYYY'的日期
var date4 = new Date('10, 24 2022')
// Mon Oct 24 2022 00:00:00 GMT+0800 (中国标准时间)

3.2 Safari 的兼容性问题

Safari 只支持 YYYY/MM/DD 或 MM/DD/YYYY 或 MMMM DD, YYYY 格式的日期，使用 new Date('YYYY-MM-DD') 会报错。

3.3 无法解析或展示特定格式的日期

特定格式日期的解析需要借助正则表达式来完成。

1
2
3
4
// 通过正则表达式解析
const datePattern = /^(\d{2})-(\d{2})-(\d{4})$/;
const [, month, day, year] = datePattern.exec('10-24-2022');
new Date(`${month}, ${day} ${year}`);

4 主流时间库

4.1 MomentJS

  • 彻底解决解析问题和格式化问题
1
2
3
4
const date1 = moment('2022-10-24');
console.log(date1.format())   // 2022-10-24T00:00:00+08:00
console.log(date1.toArray())  // [2022, 9, 24, 0, 0, 0, 0]，注：月份的起始数为0
console.log(date1.toJSON())   // 2022-10-23T16:00:00.000Z

  • 适配多种甚至自定义的格式写法

    1
    2
    const date2 = moment('10/24/2022', 'MM/DD/YYYY');
    const date3 = moment('2022-10-24-4-30', 'YYYY-MM-DD-HH-mm');

  • 包体积大：MomentJS 包体积十分庞大，接近 300kb，且基于 OOP（Object Oriented Programming）的设计需要先引入 moment 对象，再使用对象中的方法，导致无法通过 tree-shaking 压缩体积，引用后会打包所有方法，容易引发首屏加载的性能问题。

  • 时间对象是可变的（mutable）：对时间对象的计算操作会改变对象本身，通常需要拷贝后操作。

    1
    2
    3
    const startDate = moment(); // Sun Oct 23 2022 23:11:34 GMT+0800
    const endDate = startDate.add(1, 'year'); // Mon Oct 23 2023 23:11:34 GMT+0800
    console.log(startDate === endDate);   // true

    目前 moment.js 由于历史包袱升级困难， 加上更好的替代品出现，已经停止维护。对于深度使用 moment.js 但希望更换时间库的项目，可以安装 eslint-plugin-you-dont-need-momentjs 来帮助升级。配置方式如下：

1
2
// package.json
"extends" : ["plugin:you-dont-need-momentjs/recommended"]

4.2 DayJS

是 Moment.js 的轻量化方案，拥有同样强大的 API，但包体积只有 6.5KB。

  • 不可变（Immutable）

  • 体积小。为了减小体积，day.js 将一些复杂功能抽离到插件中，使用时需额外引入

  • 拥有和 MomentJS 相同的 API，迁移成本低。但迁移时需注意：

    注 1：涉及到更改时间对象的操作，不能简单地替换。

1
2
3
4
5
6
7
import moment from "moment";
const timeEntity = moment();
timeEntity.add(1, "d"); // 天数加1

import dayjs from "dayjs";
const timeEntity = moment();
timeEntity = timeEntity.add(1, "d"); // 天数加1
如果项目中大量依赖此类逻辑的话，Day.js 插件提供了适配方案用，虽然官方并不推荐。

1
2
3
4
var badMutable = require('dayjs/plugin/badMutable')
dayjs.extend(badMutable) // with BadMutable plugin
const today = dayjs()
today.add(1, 'day') // immutable
**注 2：一些特殊功能需要通过插件额外引入，并进行配置。**

1
2
3
4
5
6
7
8
9
import dayjs from "dayjs";
import dayOfYear from "dayjs/plugin/dayOfYear";
import objectSupport from "dayjs/plugin/objectSupport";

// 配置插件
dayjs.extend(dayOfYear);
dayjs.extend(objectSupport);

export default dayjs;

4.3 Date-fns

Date-fns 的 API 是基于 FP（Functional Programming）的，可以按需导入函数。

  • 不可变（Immutable）

  • 函数导入，但相比对象导入，调用不够灵活，每个工具函数都要从指定路径引入。

1
2
export addDays from 'date-fns/addDays/index.js'
const newDate = addDays(new Date(), 7);

优化：将需要用到的工具函数引入到模块文件中，再对外暴露方法。

1
2
3
4
5
// custom-date-fns.js
export { default as add } from 'date-fns/add/index.js'
export { default as addBusinessDays } from 'date-fns/addBusinessDays/index.js'
export { default as addDays } from 'date-fns/addDays/index.js'
export { default as addHours } from 'date-fns/addHours/index.js'
  • 支持 tree-shaking，某些情况下具有更小的引入体积
    add 操作，2KB


format + add 操作，24.1KB

**parse 解析日期字符串，98.5KB**

4.4 横向对比

5 总结

  • Native Date 无法直接解析自定义格式的时间字符串，且容易引入时区问题。不推荐。
  • Moment.js 包体积过大，且时间对象存在 mutable 问题，源代码也早已停止维护。不推荐。
  • Day.js 克服了 moment.js 的缺陷，且 api 与 moment.js 高度吻合，从 moment.js 迁移成本低。但是部分功能需要通过插件引入。推荐在不涉及 UTC 时间的情况下使用。
  • Date-fns 同样克服了 moment.js 的缺陷，并支持 tree-shaking，单独使用某些功时，引入的包体积甚至小于 day.js。但需要从目标目录导入所需的工具函数，上手难度大。在引入了多种工具函数或涉及解析时间字符串时，还会导致包体积过大。推荐存在轻度需求时使用。

涅槃快乐热爱生活，追求技术

个人简介。