资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/dayjs 源码解析（一）（api）

dayjs 源码解析（一）（api）

BlackMass / 685人阅读

摘要：下面，我将自己阅读的源码的过程记录下来。阅读库的代码，首先先要知道这个库的作用是一个轻量的时间日期处理库，其用法和完全一样。介绍首先，阅读的源码，我们应该从的入手。对象是不可变的，即所有改变的操作都会返回一个新的实例。

前言

作为一个程序员，阅读别人优秀代码是提升自己技术能力的一个很好的方法。下面，我将自己阅读 dayjs（v1.6.10）的源码的过程记录下来。

阅读库的代码，首先先要知道这个库的作用

dayjs 是一个轻量的 JavaScript 时间日期处理库，其用法（api）和 Moment.js 完全一样。

特点

和 Moment.js 相同的 api 和用法

不可变数据（Immutable）

支持链式操作（Chainable）

l18n国际化

仅 2kb 大小

全浏览器兼容

因为其 api 和 Moment.js 完全相同，所以你可以将之前使用 Moment.js 的项目无痛的迁移使用 dayjs。

API 介绍（v1.6.10）

首先，阅读 dayjs 的源码，我们应该从 dayjs 的 api 入手。

官方 api 文档（中文） 官方 api 文档（英文）

Day.js 没有修改原生的 Date.prototype，而是在 Date 对象基础上包装了一层，叫做 Dayjs 对象。Dayjs 对象是不可变的，即所有改变 Dayjs 的操作都会返回一个新的实例。

其中，api 分为 6 类：

解析

构造 dayjs(existing?:string | number | Date | Dayjs)：构造一个 Dayjs 实例对象

克隆 .clone() | dayjs(original: Dayjs)：在已有 Dayjs 实例对象的基础上克隆返回一个新的 Dayjs 实例对象

验证 .isValid()：验证该 Dayjs 实例对象是否有效

获取和设置

年 .year()

月 .month()

日 .date()

星期几 .day()

时 .hour()

分 .minute()

秒 .second()

毫秒 .millisecond()

设置 .set(unit: string, value: number)

操作

添加 .add(value: number, unit: string)

减少 .subtract(value: number, unit: string)

开始的时间 .startOf(unit: string)

结束的时间 .endOf(unit: string)

展示

格式化 .format(stringWithTokens: string)

差别 .diff(compared: Dayjs, unit: string (default: "milliseconds"), float?: boolean)

Unix 时间戳（毫秒） .valueOf()

Unix 时间戳（秒） .unix()

某月的天数 .daysInMonth()

转换为 JavaScript Date 对象 .toDate

转换为数组 .toArray()

转换为 JSON .toJSON()

转换为 ISO 8601 标准格式的字符串 .toISOString()

转换为对象 .toObject()

转换为字符串 .toString()

查询

是否在之前 .isBefore(compared: Dayjs)

是否相同 .isSame(compared: Dayjs)

是否在之后 .isAfter(compared: Dayjs)

是否是 Dayjs 实例对象 isDayjs()

插件

相对时间

是否是闰年

API 详解（v1.6.10） 解析 构造器 dayjs(existing?: string | number | Date | Dayjs)

1.当没有参数时，会返回一个新的 Dayjs 实例对象，且为当前日期和时间

dayjs()

2.当参数为 ISO 8601 标准的字符串时

dayjs("2018-07-01T12:00:00.000Z")

3.当参数为 unix 时间戳时

dayjs(1318781876406);

4.当参数为一个原生的 JavaScript Date 对象时

dayjs(new Date(2018, 7, 1));

dayjs() 构造函数会返回一个 Dayjs 实例对象

克隆 .clone() | dayjs(original: Dayjs)

会克隆返回一个新的 Dayjs 对象，有两种方法

// 1.使用 .clone() 方法
dayjs().clone()

// 2.使用 dayjs 构造函数，且传入的参数为被克隆的 Dayjs 实例对象
dayjs(dayjs("2018-7-1"))
验证 .isValid()

返回一个布尔值，表示该 Dayjs 实例对象是否有效

dayjs().isValid()
获取和设置 获取（年，月，日，星期几，时，分，秒，毫秒） 
// 年
dayjs().year()

// 月 
dayjs().month()

// 日
dayjs().date()

// 星期几
dayjs().day()

// 时
dayjs().hour()

// 分
dayjs().minute()

// 秒
dayjs().second()

// 毫秒
dayjs().millisecond()

上面返回的值与用原生 Date.prototype 对象下的方法获取 “年月日...” 的值是一样的，其实在源码中，就是使用的 Date 的原生方法获取的 “年月日...”

设置 .set(unit: string, value: number)

返回一个新的日期时间被改变的 Dayjs 实例对象

dayjs().set("date", 1) // 设置 “日” 为 1 日
dayjs().set("month", 3) // 设置 “月” 为 4 月
dayjs().set("second", 30) // 设置 “秒” 为 30 秒
操作

Dayjs 实例对象可以使用很多方法操作

dayjs("2018-7-1")
  .add(1, "day")
  .substract(1, "year").toString()
// 在 2018-7-1 基础上添加 1 天，然后减少 1 年，最后转换为字符串
添加 .add(value: number, unit: string) 
dayjs().add(7. "day")
减少 .subtract(value: number, unit: string) 
dayjs().subtract(7. "year")
开始的时间

返回克隆的以传入的单位开始时间的 Dayjs 实例对象

dayjs().startOf("week") // 本周开始的时间
结束的时间

返回克隆的以传入的单位结束时间的 Dayjs 实例对象

dayjs().endOf("month") // 本月的结束时间
展示 格式化 .format(stringWidthTokens: string)

返回一个按照你规定好的格式化后的字符串

dayjs().format(); // current date in ISO6801, without fraction seconds e.g. "2020-04-02T08:02:17-05:00"

dayjs("2019-01-25").format("{YYYY} MM-DDTHH:mm:ssZ[Z]"); // "{2019} 01-25T00:00:00-02:00Z"

dayjs("2019-01-25").format("DD/MM/YYYY"); // "25/01/2019"

可用的格式

差别 .diff(compared: Dayjs, unit: string (default: "milliseconds"), float?: boolean)

返回两个 Dayjs 实例对象的时间差

const date1 = dayjs("2019-01-25");
const date2 = dayjs("2018-06-05");
date1.diff(date2); // 20214000000
date1.diff(date2, "months"); // 7
date1.diff(date2, "months", true); // 7.645161290322581
date1.diff(date2, "days"); // 233
unix 时间戳（毫秒） .valueOf() 
dayjs("2019-01-25").valueOf(); // 1548381600000
unix 时间戳（秒） .unix() 
dayjs("2019-01-25").unix(); // 1548381600
某月的天数 .daysInMonth() 
dayjs("2018-7-1").daysInMonth() // 31
转换为（原生 Date 对象 | 数组 | json | ISO 8601 字符串 | 对象 | 字符串） 
// 1.转换为 原生 Date 对象
dayjs("2019-01-25").toDate() 

// 2.转换为 数组
dayjs("2019-01-25").toArray() // [ 2019, 0, 25, 0, 0, 0, 0 ]

// 3.转换为 json
dayjs("2019-01-25").toJSON() // "2019-01-25T02:00:00.000Z"

// 4.转换为 ISO 8601 字符串
dayjs("2019-01-25").toISOString() // "2019-01-25T02:00:00.000Z"

// 5.转换为 ISO 8601 字符串
dayjs("2019-01-25").toObject()
/* { years: 2019,
     months: 0,
     date: 25,
     hours: 0,
     minutes: 0,
     seconds: 0,
     milliseconds: 0 } */
     
// 6.转换为 字符串
dayjs("2019-01-25").toString() // "Fri, 25 Jan 2019 02:00:00 GMT"
查询 是否在之前 .isBefore(compared: Dayjs) 
dayjs().isBefore(dayjs()); // false
是否相同 
dayjs().isSame(dayjs()); // true
是否在之后 
dayjs().isAfter(dayjs()); // false
是否是 Dayjs 实例对象 
dayjs.isDayjs(dayjs()); // true
dayjs.isDayjs(new Date()); // false
是否是闰年（在 1.7.0 版本被弃用，请使用 IsLeapYear plugin 插件替代） 
dayjs("2000-01-01").isLeapYear(); // true
插件 相对时间

使用 .from .to .fromNow .toNow 方法来获得相对时间

是否是闰年

使用 .from .to .fromNow .toNow 方法来获得相对时间

下一篇，dayjs 源码解析（二）（目录结构）

GPU云服务器 云服务器 dayjs 云解析api 源码解析 webrtc源码解析

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95838.html

相关文章

  • dayjs 源码解析（五）（dayjs 插件详解）

    摘要：前言上一篇源码解析四类介绍了的源码目录结构。接下来，本篇将分析一下中插件功能的用法源码以及如何编写自己的插件。并且，可以通过插件选项，来对插件进行配置。 前言 上一篇 dayjs 源码解析（四）（Dayjs 类）介绍了 dayjs 的源码目录结构。接下来，本篇将分析一下 dayjs 中插件功能的用法、源码以及如何编写自己的 dayjs 插件。 dayjs 插件用法 dayjs 的插件，...

    RaoMeng 评论0 收藏0

  • dayjs 源码解析（二）（目录结构）

    摘要：前言上一篇源码解析一，介绍了一下的，知道了如何使用。本篇，介绍项目的目录结构。源码解析三构造函数 前言 上一篇 dayjs 源码解析（一）（api），介绍了一下 dayjs 的 api，知道了如何使用 dayjs。本篇，介绍 dayjs 项目的目录结构。 目录结构 showImg(https://segmentfault.com/img/bVbcW0Q?w=229&h=832); 在 ...

    Youngs 评论0 收藏0

  • dayjs 源码解析（三）（dayjs 构造函数）

    摘要：接下来，本篇将解读一下中的构造函数。最后将传入类的构造函数，生成一个对象，作为函数的返回值给返回了。参数通过上面对参数的分析知道了参数其实是当参数为实例对象时，最后又会调用函数，此时才会传入参数。 前言 上一篇 dayjs 源码解析（二）（目录结构）介绍了 dayjs 的源码目录结构。接下来，本篇将解读一下 index.js 中的 dayjs 构造函数。 dayjs 构造函数 // ...

    ityouknow 评论0 收藏0

  • dayjs 源码解析（四）（Dayjs 类）

    摘要：前言上一篇源码解析三构造函数介绍了的源码中的函数。接下来，本篇将解读一下中的类。首先，我们看的构造函数，该构造函数调用了实例方法，传入参数在上一篇有讲到。下一篇源码解析五插件详解 前言 上一篇 dayjs 源码解析（三）（dayjs 构造函数）介绍了 dayjs 的源码中的 dayjs 函数。接下来，本篇将解读一下 index.js 中的 Dayjs 类。 class Dayjs { ...

    BicycleWarrior 评论0 收藏0

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

    showImg(https://segmentfault.com/img/bV9wV7?w=1952&h=712);Moment.js 是一个大而全的 JS 时间库，很大地方便了我们处理日期和时间。但是 Moment.js太重了(200k+ with locals)，可能一般项目也只使用到了她几个常用的API。虽然社区也有几个轻量的时间库，要想迁移过去又会增加新的学习和迁移成本。 如果能有一个和 ...

    CoreDump 评论0 收藏0

发表评论

登陆后可评论

0条评论

BlackMass

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<