dayjs 源码剖析(五)(dayjs 插件详解)

媒介

上一篇 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 的源码
    原文作者:hileix
    原文地址: https://segmentfault.com/a/1190000015560102
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞