媒介

上一篇 dayjs 源码剖析（四）（Dayjs 类）引见了 dayjs 的源码目次构造。接下来，本篇将剖析一下 dayjs 中插件功用的用法、源码以及怎样编写本身的 dayjs 插件。

dayjs 插件用法

dayjs 的插件，经由过程挂载到 dayjs 函数下的 extend 函数加载，然后运用：

import plugin // 导入插件
dayjs.extend(plugin) // 加载插件
dayjs.extend(plugin, options) // 或许加载插件的同时，到场插件所须要的参数

例子：运用官方的 IsLeapYear 插件

import isLeapYear from 'dayjs/plugin/isLeapYear'

dayjs.extend(isLeapYear)

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

这就是 dayjs 插件的运用要领。

dayjs 插件源码（即 dayjs.extend() 要领）

// 扩大插件的要领
// plugin：插件函数
// option：插件的选项
dayjs.extend = (plugin, option) => {
  // 插件函数接收三个参数
  // 1.插件选项 2.Dayjs 类 3.dayjs 函数
  // 插件的要领都是挂载在 Dayjs 类的原型对象上的（Dayjs.prototype）。
  plugin(option, Dayjs, dayjs)
  return dayjs
}

dayjs.extend() 要领，接收两个参数，即插件（函数）和插件的选项。

在 dayjs.extend() 要领中，直接挪用传入的插件（函数），且传入三个参数：传入 dayjs.extend() 要领的 option、Dayjs 类以及 dayjs 函数。

末了，返回 dayjs 函数。

然后，我们来看一个官方的 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 插件源码中，导出一个函数，该函数接收两个参数（即在 dayjs.extend() 要领中的 option 和 Dayjs 类），然后将 isLeapYear 函数挂载到 Dayjs 类的原型对象上。因而，每一个 Dayjs 实例都能够运用 isLeapYear 要领。

编写本身的 dayjs 插件

经由过程浏览插件的源码，我们知道了插件的要领，能够挂载到 Dayjs 类上、Dayjs 类原型上以及 dayjs 函数对象上。而且，能够经由过程插件选项（option），来对插件举行设置。
官方文档也供应了插件开辟的模板：

export default (option, dayjsClass, dayjsFactory) => {
  // 扩大 dayjs() 实例
  // 例：增加 dayjs().isSameOrBefore() 实例要领
  dayjsClass.prototype.isSameOrBefore = function (arguments) {}

  // 扩大 dayjs 类
  // 例：增加 dayjs.utc() 类要领
  dayjsFactory.utc = (arguments) => {}

  // 掩盖已存在的 API
  // 例：扩大 dayjs().format() 要领
  const oldFormat = dayjsClass.prototype.format
  dayjsClass.prototype.format = function (arguments) {
    // 原始format效果
    const result = oldFormat(arguments)
    // 返回修改后效果
  }
}

经由过程插件，能够很轻易的举行 dayjs 库的要领的扩大，来更好的效劳我们的详细的营业需求。

dayjs 源码剖析完。这五篇文章，也只是也许的剖析了一下 dayjs 源码的重要函数、要领和类，其他 api 要领还须要本身一个一个去看。☺

总结

怎样浏览源码？

• 先从库的 api 入手，看其怎样运用
• 然后再看源码的进口函数或类，相识源码的团体构造
• 末了再详细看 api 的源码