美文网首页
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函数

    引入文件 进入index.js文件后,首先代码引入constant.js(定义了代码常量),local文件夹中en...

  • react 简单的日期格式转换

    引用 : import dayjs from 'dayjs'; 使用: dayjs().format('YYYY-...

  • DayJs源码(五)Dayjs插件

    在DayJS中存在许多方法需要结合插件使用的例子。在DayJS中是怎样实现插件功能呢? 首先,dayJS注册插件方...

  • DayJs源码(三)Dayjs类初始化

    看完了dayjs函数,接下来就看 Dayjs类。 先来看类初始化部分 构造函数中将语言方式赋值给$L,调用pars...

  • 插件dayjs

    官网地址https://dayjs.fenxianglu.cn/[https://dayjs.fenxianglu...

  • dayJs时间格式化库

    dayJs类似于momentJs库,但是dayJs用起来更方便简单

  • DayJs源码(四)Dayjs类中API

    Dayjs中的API被定义在Dayjs类中,因为有很多,所以这里将挑选部分来记录。 • isValid() 验证D...

  • 根据时间段检索列表数据

    基于dayjs实现

  • dayjs

    获取上周周一、周日日期 获取本周周一、周日日期 api 开头时间 返回当前时间的开头时间的 Dayjs() 对象,...

  • dayjs

    API Dayjs 并没有改变或覆盖 Javascript 原生的 Date.prototype, 而是创造了一个...

网友评论

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

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