dayjs 源码解析（五）（dayjs 插件详解）

RaoMeng 发布于2019-08-22 18:33 / 712人阅读

摘要：前言上一篇源码解析四类介绍了的源码目录结构。接下来，本篇将分析一下中插件功能的用法源码以及如何编写自己的插件。并且，可以通过插件选项，来对插件进行配置。

前言

上一篇 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 的源码

GPU云服务器云服务器 dayjs 源码详解生成与解析详解 webrtc源码详解

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95982.html

dayjs 源码解析（一）（api）

摘要：下面，我将自己阅读的源码的过程记录下来。阅读库的代码，首先先要知道这个库的作用是一个轻量的时间日期处理库，其用法和完全一样。介绍首先，阅读的源码，我们应该从的入手。对象是不可变的，即所有改变的操作都会返回一个新的实例。前言作为一个程序员，阅读别人优秀代码是提升自己技术能力的一个很好的方法。下面，我将自己阅读 dayjs（v1.6.10）的源码的过程记录下来。阅读库的代码，首先先要...

BlackMass 2019-08-22 18:25 评论0 收藏0
dayjs 源码解析（四）（Dayjs 类）

摘要：前言上一篇源码解析三构造函数介绍了的源码中的函数。接下来，本篇将解读一下中的类。首先，我们看的构造函数，该构造函数调用了实例方法，传入参数在上一篇有讲到。下一篇源码解析五插件详解前言上一篇 dayjs 源码解析（三）（dayjs 构造函数）介绍了 dayjs 的源码中的 dayjs 函数。接下来，本篇将解读一下 index.js 中的 Dayjs 类。 class Dayjs { ...

BicycleWarrior 2019-08-22 18:33 评论0 收藏0
dayjs 源码解析（二）（目录结构）

摘要：前言上一篇源码解析一，介绍了一下的，知道了如何使用。本篇，介绍项目的目录结构。源码解析三构造函数前言上一篇 dayjs 源码解析（一）（api），介绍了一下 dayjs 的 api，知道了如何使用 dayjs。本篇，介绍 dayjs 项目的目录结构。目录结构 showImg(https://segmentfault.com/img/bVbcW0Q?w=229&h=832); 在 ...

Youngs 2019-08-22 18:25 评论0 收藏0
dayjs 源码解析（三）（dayjs 构造函数）

摘要：接下来，本篇将解读一下中的构造函数。最后将传入类的构造函数，生成一个对象，作为函数的返回值给返回了。参数通过上面对参数的分析知道了参数其实是当参数为实例对象时，最后又会调用函数，此时才会传入参数。前言上一篇 dayjs 源码解析（二）（目录结构）介绍了 dayjs 的源码目录结构。接下来，本篇将解读一下 index.js 中的 dayjs 构造函数。 dayjs 构造函数 // ...

ityouknow 2019-08-22 18:26 评论0 收藏0
⏰Day.js 2kB超轻量时间库和Moment.js一样的API

showImg(https://segmentfault.com/img/bV9wV7?w=1952&h=712);Moment.js 是一个大而全的 JS 时间库，很大地方便了我们处理日期和时间。但是 Moment.js太重了(200k+ with locals)，可能一般项目也只使用到了她几个常用的API。虽然社区也有几个轻量的时间库，要想迁移过去又会增加新的学习和迁移成本。如果能有一个和 ...

CoreDump 2019-08-22 16:45 评论0 收藏0