美文网首页
DayJs源码(二)Dayjs函数

DayJs源码(二)Dayjs函数

作者: 小q | 来源:发表于2021-04-30 14:27 被阅读0次

    引入文件

    进入index.js文件后,首先代码引入constant.js(定义了代码常量),local文件夹中en.js(国际化语言兜底)以及utilds.js(工具库)。
    isDayjs方法

    // 判断d参数是否为Dayjs的实例
    const isDayjs = d => d instanceof Dayjs // eslint-disable-line no-use-before-define
    

    parseLocale方法

    const parseLocale = (preset, object, isLocal) => { // 解析国际化
      let l
      if (!preset) return L // L = ‘en’ 走的上面兜底
      if (typeof preset === 'string') {
        if (Ls[preset]) {
          l = preset
        }
        if (object) {
          Ls[preset] = object
          l = preset
        }
      } else {
        const { name } = preset
        Ls[name] = preset
        l = name
      }
      if (!isLocal && l) L = l
      return l || (!isLocal && L)
    }
    

    适配语言方法,传递三个参数,分别是
    • preset参数,传递string类型参数,是预设语言参数,默认为‘en‘
    • object参数,这个参数源码中在 locale 方法中会将 locale 的第二个参数传递进来,具体意义不详
    • isLocale参数,传递一个boolean 类型值,是否是当地时间开关
    此方法为国际化相关方法,作用就是将设置的语言进行存储

    dayjs函数

    const dayjs = function (date, c) { // dayjs函数
      if (isDayjs(date)) { // 如果属于Dayjs的实例就clone出一个新实例
        return date.clone()
      }
      // eslint-disable-next-line no-nested-ternary
      const cfg = typeof c === 'object' ? c : {}
      cfg.date = date
      cfg.args = arguments// eslint-disable-line prefer-rest-params
      return new Dayjs(cfg) // eslint-disable-line no-use-before-define
    }
    

    dayjs作用就是返回一个新的Dayjs实例对象,代码也相对简单好理解。
    dayjs传递两个参数
    • 第一个参数就是date,时间参数,没什么好描述的。主要注意的就是date可以传递包括,不传参数(undefind), ISO 8601 标准格式的字符串, unix 时间戳,Date 实例对象这样几种形式的参数
    • 第二个参数c,这个c有点绕,单独拎出来写一下

    dayjs 函数中的c参数

    首先需要找到在哪里传的参数,其实很近,就在下面的wrapper函数中,这里面又调用了一遍dayjs()函数

    const wrapper = (date, instance) =>
      dayjs(date, {
        locale: instance.$L,
        utc: instance.$u,
        x: instance.$x,
        $offset: instance.$offset // todo: refactor; do not use this.$offset in you code
     })
    
    • 那这个wrapper函数被用来干啥了?它先被赋值给了Utils.w,在源码里面就搜吧,搜在哪里用了Utils.w。搜到最后会很惊讶的发现在clone里面竟然调用了这个方法,并且第二个参数传递的是this
      clone() {
        return Utils.w(this.$d, this)
      }
    
    • 可以回到dayjs方法看到只有当满足传入date为Dayjs实例时才会调用clone方法,所以这里就可以理解为把已有实例的属性重新赋值给新传入的date。

    以上就是dayjs函数的源码分析,dayjs其实就是用于生成新Dayjs实例对象的一个方法。因为其每次返回的都是一个新的实例,所以它可以通过链式形式去嗲用API。

    下一篇 : DayJs源码(三)Dayjs类初始化

    相关文章

      网友评论

          本文标题:DayJs源码(二)Dayjs函数

          本文链接:https://www.haomeiwen.com/subject/jmmnrltx.html