摘要：下面，我將自己閱讀的源碼的過(guò)程記錄下來(lái)。閱讀庫(kù)的代碼，首先先要知道這個(gè)庫(kù)的作用是一個(gè)輕量的時(shí)間日期處理庫(kù)，其用法和完全一樣。介紹首先，閱讀的源碼，我們應(yīng)該從的入手。對(duì)象是不可變的，即所有改變的操作都會(huì)返回一個(gè)新的實(shí)例。

作為一個(gè)程序員，閱讀別人優(yōu)秀代碼是提升自己技術(shù)能力的一個(gè)很好的方法。下面，我將自己閱讀 dayjs（v1.6.10）的源碼的過(guò)程記錄下來(lái)。

dayjs 是一個(gè)輕量的 JavaScript 時(shí)間日期處理庫(kù)，其用法（api）和 Moment.js 完全一樣。

和 Moment.js 相同的 api 和用法

不可變數(shù)據(jù)（Immutable）

支持鏈?zhǔn)讲僮鳎–hainable）

l18n國(guó)際化

僅 2kb 大小

全瀏覽器兼容

因?yàn)槠?api 和 Moment.js 完全相同，所以你可以將之前使用 Moment.js 的項(xiàng)目無(wú)痛的遷移使用 dayjs。

首先，閱讀 dayjs 的源碼，我們應(yīng)該從 dayjs 的 api 入手。

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

Day.js 沒(méi)有修改原生的 Date.prototype，而是在 Date 對(duì)象基礎(chǔ)上包裝了一層，叫做 Dayjs 對(duì)象。Dayjs 對(duì)象是不可變的，即所有改變 Dayjs 的操作都會(huì)返回一個(gè)新的實(shí)例。

其中，api 分為 6 類：

解析

構(gòu)造 dayjs(existing?:string | number | Date | Dayjs)：構(gòu)造一個(gè) Dayjs 實(shí)例對(duì)象

克隆 .clone() | dayjs(original: Dayjs)：在已有 Dayjs 實(shí)例對(duì)象的基礎(chǔ)上克隆返回一個(gè)新的 Dayjs 實(shí)例對(duì)象

驗(yàn)證 .isValid()：驗(yàn)證該 Dayjs 實(shí)例對(duì)象是否有效

獲取和設(shè)置

年 .year()

月 .month()

日 .date()

星期幾 .day()

時(shí) .hour()

分 .minute()

秒 .second()

毫秒 .millisecond()

設(shè)置 .set(unit: string, value: number)

操作

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

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

開(kāi)始的時(shí)間 .startOf(unit: string)

結(jié)束的時(shí)間 .endOf(unit: string)

展示

格式化 .format(stringWithTokens: string)

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

Unix 時(shí)間戳（毫秒） .valueOf()

Unix 時(shí)間戳（秒） .unix()

某月的天數(shù) .daysInMonth()

轉(zhuǎn)換為 JavaScript Date 對(duì)象 .toDate

轉(zhuǎn)換為數(shù)組 .toArray()

轉(zhuǎn)換為 JSON .toJSON()

轉(zhuǎn)換為 ISO 8601 標(biāo)準(zhǔn)格式的字符串 .toISOString()

轉(zhuǎn)換為對(duì)象 .toObject()

轉(zhuǎn)換為字符串 .toString()

查詢

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

是否相同 .isSame(compared: Dayjs)

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

是否是 Dayjs 實(shí)例對(duì)象 isDayjs()

插件

相對(duì)時(shí)間

是否是閏年

1.當(dāng)沒(méi)有參數(shù)時(shí)，會(huì)返回一個(gè)新的 Dayjs 實(shí)例對(duì)象，且為當(dāng)前日期和時(shí)間

dayjs()

2.當(dāng)參數(shù)為 ISO 8601 標(biāo)準(zhǔn)的字符串時(shí)

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

3.當(dāng)參數(shù)為 unix 時(shí)間戳?xí)r

dayjs(1318781876406);

4.當(dāng)參數(shù)為一個(gè)原生的 JavaScript Date 對(duì)象時(shí)

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

dayjs() 構(gòu)造函數(shù)會(huì)返回一個(gè) Dayjs 實(shí)例對(duì)象

會(huì)克隆返回一個(gè)新的 Dayjs 對(duì)象，有兩種方法

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

// 2.使用 dayjs 構(gòu)造函數(shù)，且傳入的參數(shù)為被克隆的 Dayjs 實(shí)例對(duì)象
dayjs(dayjs("2018-7-1"))

返回一個(gè)布爾值，表示該 Dayjs 實(shí)例對(duì)象是否有效

dayjs().isValid()

// 年
dayjs().year()

// 月 
dayjs().month()

// 日
dayjs().date()

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

// 時(shí)
dayjs().hour()

// 分
dayjs().minute()

// 秒
dayjs().second()

// 毫秒
dayjs().millisecond()

上面返回的值與用原生 Date.prototype 對(duì)象下的方法獲取 “年月日...” 的值是一樣的，其實(shí)在源碼中，就是使用的 Date 的原生方法獲取的 “年月日...”

返回一個(gè)新的日期時(shí)間被改變的 Dayjs 實(shí)例對(duì)象

dayjs().set("date", 1) // 設(shè)置 “日” 為 1 日
dayjs().set("month", 3) // 設(shè)置 “月” 為 4 月
dayjs().set("second", 30) // 設(shè)置 “秒” 為 30 秒

Dayjs 實(shí)例對(duì)象可以使用很多方法操作

dayjs("2018-7-1")
  .add(1, "day")
  .substract(1, "year").toString()
// 在 2018-7-1 基礎(chǔ)上添加 1 天，然后減少 1 年，最后轉(zhuǎn)換為字符串

dayjs().add(7. "day")

dayjs().subtract(7. "year")

返回克隆的以傳入的單位開(kāi)始時(shí)間的 Dayjs 實(shí)例對(duì)象

dayjs().startOf("week") // 本周開(kāi)始的時(shí)間

返回克隆的以傳入的單位結(jié)束時(shí)間的 Dayjs 實(shí)例對(duì)象

dayjs().endOf("month") // 本月的結(jié)束時(shí)間

返回一個(gè)按照你規(guī)定好的格式化后的字符串

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"

可用的格式

返回兩個(gè) Dayjs 實(shí)例對(duì)象的時(shí)間差

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

dayjs("2019-01-25").valueOf(); // 1548381600000

dayjs("2019-01-25").unix(); // 1548381600

dayjs("2018-7-1").daysInMonth() // 31

// 1.轉(zhuǎn)換為 原生 Date 對(duì)象
dayjs("2019-01-25").toDate() 

// 2.轉(zhuǎn)換為 數(shù)組
dayjs("2019-01-25").toArray() // [ 2019, 0, 25, 0, 0, 0, 0 ]

// 3.轉(zhuǎn)換為 json
dayjs("2019-01-25").toJSON() // "2019-01-25T02:00:00.000Z"

// 4.轉(zhuǎn)換為 ISO 8601 字符串
dayjs("2019-01-25").toISOString() // "2019-01-25T02:00:00.000Z"

// 5.轉(zhuǎn)換為 ISO 8601 字符串
dayjs("2019-01-25").toObject()
/* { years: 2019,
     months: 0,
     date: 25,
     hours: 0,
     minutes: 0,
     seconds: 0,
     milliseconds: 0 } */
     
// 6.轉(zhuǎn)換為 字符串
dayjs("2019-01-25").toString() // "Fri, 25 Jan 2019 02:00:00 GMT"

dayjs().isBefore(dayjs()); // false

dayjs().isSame(dayjs()); // true

dayjs().isAfter(dayjs()); // false

dayjs.isDayjs(dayjs()); // true
dayjs.isDayjs(new Date()); // false

dayjs("2000-01-01").isLeapYear(); // true

使用 .from .to .fromNow .toNow 方法來(lái)獲得相對(duì)時(shí)間

使用 .from .to .fromNow .toNow 方法來(lái)獲得相對(duì)時(shí)間

下一篇，dayjs 源碼解析（二）（目錄結(jié)構(gòu)）