dayjs 源碼剖析(一)(api)

媒介

作為一個程序員,瀏覽他人優異代碼是提拔本身手藝才能的一個很好的要領。下面,我將本身瀏覽 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 源碼剖析(二)(目次構造)

    原文作者:hileix
    原文地址: https://segmentfault.com/a/1190000015440889
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞