龙空技术网

Vue3.x: 为何腾讯TDesign库中的日期组件择dayjs而弃momentjs

小熊爱敲代码 14

前言:

目前兄弟们对“日期控件怎么加到语句中”都比较注重,小伙伴们都想要剖析一些“日期控件怎么加到语句中”的相关资讯。那么小编也在网摘上网罗了一些有关“日期控件怎么加到语句中””的相关知识,希望小伙伴们能喜欢,大家一起来学习一下吧!

简述

当涉及到日期处理的时候,大多数人第一印象或许就是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是一个相对小巧的库,文件体积较小,可以减少前端项目的加载时间,特别适合对文件大小有限制的项目;

原文链接:

标签: #日期控件怎么加到语句中