简述

当涉及到日期处理的时候，大多数人第一印象或许就是momentjs库，毕竟在dayjs开发出来之前，晚了许多；同为为日期处理提供了各种格式化、解析和操作日期的方法，但两者在如今相较之下，我更偏向于dayjs，哈哈，不认同我的，那就思考下为啥腾讯的Tdesign框架会选择dayjs?

在比对之前，我们先了解下一些概念

不知道JYM有没有了解过“链式调用”？

链式调用

或者叫方法链（method chaining）是面向对象的编程语言中的一种常见语法，可以让开发者在只引用对象一次的情况下，对同一个对象进行多次方法调用。虽然链式调用不包含在23种设计模式，但它是一种常用的代码设计方式。

扩展方法，使你能够向现有类型“添加”方法，而无需创建新的派生类型、重新编译或以其他方式修改原始类型。 扩展方法是一种静态方法，但可以像扩展类型上的实例方法一样进行调用。

在编写代码的时候，使用链式调用可以使代码的行为更加清晰，而扩展方法则可以在不修改原有类型（包括int、string等内置类型）的基础上为类型添加行为。

说这么多，还是例子比较直观，如下：

class Calculator {
  private value: number;

  constructor(value: number) {
    this.value = value;
  }

  public add(num: number): Calculator {
    this.value += num;
    return this;
  }

  public subtract(num: number): Calculator {
    this.value -= num;
    return this;
  }

  public multiply(num: number): Calculator {
    this.value *= num;
    return this;
  }

  public divide(num: number): Calculator {
    this.value /= num;
    return this;
  }

  public getResult(): number {
    return this.value;
  }
}

// 创建 Calculator 实例
const calculator = new Calculator(10);

// 进行链式调用
const result = calculator.add(5).multiply(2).subtract(3).divide(2).getResult();

// 输出结果
console.log(result);  // 输出 12.5

在上面的例子中，我们创建了一个 Calculator 类，它与之前的示例类似。在每个方法中，我们将操作应用于 value 属性，并返回对象本身。这样，我们就可以在一个表达式中一连串地调用这些方法

最后，我们可以通过调用 getResult() 方法获取计算的最终结果。

需要注意的是，在链式调用中，方法的顺序会影响计算结果。因此，确保方法按照正确的顺序被调用是很重要的。

像之前在使用php开发后台的时候，用的thinkphp，对于链式调用这一块也是很常用的。

对比总结

moment和dayjs相同之处

其实他们都有使用到链式调用，比如下方

moment

const today = moment()
  .add(1, 'days')
  .subtract(2, 'weeks')
  .endOf('day')
  .format('YYYY-MM-DD HH:mm:ss');
console.log(today);

dayjs

const today = dayjs()
  .add(1, 'day')
  .subtract(2, 'week')
  .endOf('day')
  .format('YYYY-MM-DD HH:mm:ss');
console.log(today);

• 和Moment.js有着相同的API和模式
• 不可变、持久性
• 提供链式调用
• 国际化标准

应用方面，之前有写过一篇关于moment的使用常用方法：JS: 基于moment封装自定义时间显示规则工具类 而后发现，dayjs也有着相同的api，但是比较好的地方dayjs小巧玲珑

比如在做日期应用的时候

使用该方法做限制

const onDisableDateEnd = computed(() => {
	const currentDay = dayjs().format('YYYY-MM-DD');
	console.log(currentDay);
	if (currentDay && formData.validity_start) {
		console.log(dayjs(currentDay).diff(formData.validity_start, 'day'));
		if (dayjs(currentDay).diff(formData.validity_start, 'day') > 0) {
			return { before: dayjs(currentDay).add(1, 'day') };
		}
		return { before: dayjs(formData.validity_start).add(1, 'day') };
	}
	return { before: dayjs(currentDay).add(1, 'day') };
});

能够满足绝大部分的需求

Tdesign选择dayJs的理由

那么tdesign选择dayjs的理由又是什么呢？ day.js是一个轻量级的替代moment.js的库，兼容moment.js的API，但比moment.js更小巧和快速。它主要关注于提供日期和时间的处理和格式化功能，支持许多常见的日期和时间操作，同时也支持自定义插件扩展。day.js的体积比moment.js小很多，这使得它在前端项目中成为更受欢迎的选择之一；

如果项目对于体积和性能要求较高，或者只需要简单的日期和时间处理功能，可以考虑使用day.js 而且在Vue3.x版本的改进优点之一也是往性能、文件体积方面考虑；

day.js是一个相对小巧的库，文件体积较小，可以减少前端项目的加载时间，特别适合对文件大小有限制的项目;