dayjs 源碼解析（五）（dayjs 插件詳解）

RaoMeng 發(fā)布于2019-08-22 18:33 / 801人閱讀

摘要：前言上一篇源碼解析四類介紹了的源碼目錄結(jié)構(gòu)。接下來，本篇將分析一下中插件功能的用法源碼以及如何編寫自己的插件。并且，可以通過插件選項(xiàng)，來對(duì)插件進(jìn)行配置。

前言

上一篇 dayjs 源碼解析（四）（Dayjs 類）介紹了 dayjs 的源碼目錄結(jié)構(gòu)。接下來，本篇將分析一下 dayjs 中插件功能的用法、源碼以及如何編寫自己的 dayjs 插件。

dayjs 插件用法

dayjs 的插件，通過掛載到 dayjs 函數(shù)下的 extend 函數(shù)加載，然后使用：

import plugin // 導(dǎo)入插件
dayjs.extend(plugin) // 加載插件
dayjs.extend(plugin, options) // 或者加載插件的同時(shí)，加入插件所需要的參數(shù)

例子：使用官方的 IsLeapYear 插件

import isLeapYear from "dayjs/plugin/isLeapYear"

dayjs.extend(isLeapYear)

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

這就是 dayjs 插件的使用方法。

dayjs 插件源碼（即 dayjs.extend() 方法）

// 擴(kuò)展插件的方法
// plugin：插件函數(shù)
// option：插件的選項(xiàng)
dayjs.extend = (plugin, option) => {
  // 插件函數(shù)接受三個(gè)參數(shù)
  // 1.插件選項(xiàng) 2.Dayjs 類 3.dayjs 函數(shù)
  // 插件的方法都是掛載在 Dayjs 類的原型對(duì)象上的（Dayjs.prototype）。
  plugin(option, Dayjs, dayjs)
  return dayjs
}

dayjs.extend() 方法，接受兩個(gè)參數(shù)，即插件（函數(shù)）和插件的選項(xiàng)。

在 dayjs.extend() 方法中，直接調(diào)用傳入的插件（函數(shù)），且傳入三個(gè)參數(shù)：傳入 dayjs.extend() 方法的 option、Dayjs 類以及 dayjs 函數(shù)。

最后，返回 dayjs 函數(shù)。

然后，我們來看一個(gè)官方的 isLeapYear 插件的源碼，看看它是怎么寫的：

export default (o, c) => {
  const proto = c.prototype
  proto.isLeapYear = function () {
    return ((this.$y % 4 === 0) && (this.$y % 100 !== 0)) || (this.$y % 400 === 0)
  }
}

在 isLeapYear 插件源碼中，導(dǎo)出一個(gè)函數(shù)，該函數(shù)接受兩個(gè)參數(shù)（即在 dayjs.extend() 方法中的 option 和 Dayjs 類），然后將 isLeapYear 函數(shù)掛載到 Dayjs 類的原型對(duì)象上。因此，每個(gè) Dayjs 實(shí)例都可以使用 isLeapYear 方法。

編寫自己的 dayjs 插件

通過閱讀插件的源碼，我們知道了插件的方法，可以掛載到 Dayjs 類上、Dayjs 類原型上以及 dayjs 函數(shù)對(duì)象上。并且，可以通過插件選項(xiàng)（option），來對(duì)插件進(jìn)行配置。
官方文檔也提供了插件開發(fā)的模板：

export default (option, dayjsClass, dayjsFactory) => {
  // 擴(kuò)展 dayjs() 實(shí)例
  // 例：添加 dayjs().isSameOrBefore() 實(shí)例方法
  dayjsClass.prototype.isSameOrBefore = function (arguments) {}

  // 擴(kuò)展 dayjs 類
  // 例：添加 dayjs.utc() 類方法
  dayjsFactory.utc = (arguments) => {}

  // 覆蓋已存在的 API
  // 例：擴(kuò)展 dayjs().format() 方法
  const oldFormat = dayjsClass.prototype.format
  dayjsClass.prototype.format = function (arguments) {
    // 原始format結(jié)果
    const result = oldFormat(arguments)
    // 返回修改后結(jié)果
  }
}

通過插件，可以很方便的進(jìn)行 dayjs 庫(kù)的方法的擴(kuò)展，來更好的服務(wù)我們的具體的業(yè)務(wù)需求。

dayjs 源碼解析完。這五篇文章，也只是大概的解析了一下 dayjs 源碼的主要函數(shù)、方法和類，其他 api 方法還需要自己一個(gè)一個(gè)去看。?

總結(jié)

如何閱讀源碼？

先從庫(kù)的 api 入手，看其如何使用

然后再看源碼的入口函數(shù)或類，了解源碼的整體結(jié)構(gòu)

最后再具體看 api 的源碼