提升系列:20.获取格式化时间区间-4-4

60 阅读3分钟

开启掘金成长之旅!这是我参与「掘金日新计划 · 2 月更文挑战」的第 16天,点击查看活动详情

上一次掘金的征文活动,准确来说,应该是去年的最后一次掘金官方的征文活动,我没有参加那一次征文活动。距离上一次征文,好像有两三个月了,感觉时间过得有点漫长了,都快要忘记掘金的征文活动了。

现在掘金推出了新的一年的征文活动-掘金日新计划 · 2 月更文挑战,又要开始新的一年,新的一轮的征文挑战了。

征文挑战已经开始了,而我即将要参与这次征文活动,参与挑战,挑战自己。

提升系列

提升系列,我主要是想写一些平时工作上面,自己会用到的一些好的技巧或者方法。当然,这些技巧和方法是针对我自己的。

除此之外,还可能会写一些解决难点的方法。比如,遇到了某个难点,要通过什么方法来解决它?

正如它的名字一样--提升,通过学习一些好的技巧、方法,或者解决一些难题、难点,来提升我们的能力。

出这个提升系列,一方面,是提升自己的开发能力;另一方面,也希望这个提升系列,可以帮助到部分人,提升他们的开发能力。

在这个系列里,我能想到的或者实现方法,不一定是最好的。欢迎大家参与讨论。

前言

在上一篇文章提升系列:19.获取格式化时间区间-4-3里,我们分析了dayjs源码里面的subtract和add方法的代码。这两个方法里面的代码,进行了简单分析。但是,里面还调用了其它方法/函数,还没有分析。

接下来,我们就分析一下这些方法里面调用的其它的方法/函数吧。

dayjs

Day.js是一个极简的JavaScript库,可以为现代浏览器解析、验证、操作和显示日期和时间

这是dayjs官网上面的介绍,我们可以使用dayjs来进行日期、时间方面相关的操作。

查阅

我们到dayjs的仓库里面,把源码下载下来。下载解压后,我们在vscode里,把代码打开。

我们搜索一下add方法

add(number, units) {
    number = Number(number) // eslint-disable-line no-param-reassign
    const unit = Utils.p(units)
    ...
  }

我们可以看到,第二行代码,就调用了Utils.p来进行处理。我们点击Utils,进行方法跳转

export default {
  s: padStart,
  z: padZoneStr,
  m: monthDiff,
  a: absFloor,
  p: prettyUnit,
  u: isUndefined
}

进入定义Utils的文件里面,我们可以看到,p方法,是调用prettyUnit方法。

我们查看一下prettyUnit方法声明的地方

const prettyUnit = (u) => {
  const special = {
    M: C.M,
    y: C.Y,
    w: C.W,
    d: C.D,
    D: C.DATE,
    h: C.H,
    m: C.MIN,
    s: C.S,
    ms: C.MS,
    Q: C.Q
  }
  return special[u] || String(u || '').toLowerCase().replace(/s$/, '')
}

我们分析一下prettyUnit方法里面的逻辑:

  • 先定义了一个对象special,从常量C里面拿值赋值给到special对象。
  • 如果special里面有传入参数的属性,那么从special里面取出对应值返回。
  • 如果special里面没有传入参数的属性,调用String方法,把传入的参数转换为字符串。再调用字符串的toLowerCase方法,把字符串都转换为小写。再调用replace方法,把字符串结尾的s字符替换成空字符串,即把字符串s给删除掉
  • 最后返回对应结果

到这里,prettyUnit方法的代码就分析完了。

小结

本篇文章总结:

本小节,主要是分析了dayjs源码里的add方法,调用到的Utils.p方法。其实调用的是prettyUnit方法,该方法主要是根据传入的参数,然后返回对应的结果。

最后,放上自己比较喜欢的一句诗句:

千淘万漉虽辛苦,吹尽狂沙始到金 - 唐 刘禹锡《浪淘沙》