JS获取时间，封装函数将时间减一天、一月、一年，并加以格式化，前端显示不同状态时间封装

写一个时间的utils文件，可以给公司或者个人使用的小工具。

一、获取时间的某个参数封装

1. 代码

在js中，为什么要封装一个这样看起来没什么作用的函数呢，主要是为了服务与其他函数调用，假如说写一个和包含时间的js库，那么这个东西，就会减少代码量，复用这个代码。

// 获取当前时间的 ms s min h day month year
function getSeverTime(time = new Date()) {
	const Time = new Date(time)
	return {
		ms: Time.getMilliseconds(),
		s: Time.getSeconds(),
		min: Time.getMinutes(),
		h: Time.getHours(),
		date: Time.getDate(),
		day: Time.getDay(),
		month: Time.getMonth(),
		year: Time.getFullYear(),
	}
}

二、封装时间减一天，或者不同时间后的时间。

其实说js有对每一个时间有一个set的方法，去修改对应的时间，而我们封装一个方法可以重复重复一个函数去算一个复杂的时间，而对这个代码稍做处理就可以将这一部分变为链式调用的代码

1、代码

/**
 *
 * @param {time,num,type} ops
 * @param time  可选，不传默认当前时间，传入可转换时间参数
 * @param num   可选 ，默认0，传入减去的时间，1....
 * @param type   可选，默认ms，减去时间的单位标准
 * @returns Date()
 */
function subtractTime(ops = []) {
	const [time = new Date(), num = 0, type = 'ms'] = ops
	const Time = new Date(time)
	const { ms, s, min, h, date, month, year } = getSeverTime(time)
	// ms s min h day week month quarter year
	switch (type) {
		case 'ms':
			Time.setMilliseconds(ms - num)
			break
		case 's':
			Time.setSeconds(s - num)
			break
		case 'min':
			Time.setMinutes(min - num)
			break
		case 'h':
			Time.setHours(h - num)
			break
		case 'day':
			Time.setDate(date - num)
			break
		case 'week':
			Time.setDate(date - num * 7)
			break
		case 'month':
			Time.setMonth(month - num)
			break
		case 'quarter':
			Time.setMonth(month - num * 3)
			break
		case 'year':
			Time.setFullYear(year - num)
			break
		default:
			throw 'error: type is mistake'
	}
	return Time
}

根据js中this指向取决谁调用，通过这一个操作可以完成链式，将参数变为两个，并将方法挂载到date 实例上，同时时间通过this去获取，如果你想可以自己去尝试一下，我这里需求稍微不一样，所以没做这个处理。

2、效果

使用

subtractTime([, 1, 'day'])

结果

输出时间为今天减1 day,
在这里插入图片描述

三、格式化时间

在js中内置对象 Date中是没有一个好的格式化，很难满足需求，不过这个方法其实也不难实现，然而为了这个格式化能够应付各种场景，所以如此实现。

1、代码

/**
 * @param {*} time
 * Y年(xxxx) M月(xx) D日(xx)  k K 数字或中文  w W 英文缩写 或全写  h 时 m分 s秒 ms毫秒
 * @param {*} formatStr
 * `Y-M-D w h:m:s`
 * @return `Y/M/D w h:m:s`
 */
function formatTime(time, formatStr = 'YYYY/MM/DD ww hh:mm:ss') {
	const weekStr = [
		'星期日',
		'星期一',
		'星期二',
		'星期三',
		'星期四',
		'星期五',
		'星期六',
	]
	const weekLet = ['Sun.', 'Mon.', 'Tues.', 'Wed.', 'Thurs.', 'Fri.', 'Sat']
	const WeekLet = [
		'Sunday',
		'Monday',
		'Tuesday',
		'Wednesday',
		'Thursday',
		'Friday',
		'Saturday',
	]
	const { ms, s, min, h, day, date, month, year } = getSeverTime(time)
	// Y年(xxxx) M月(xx) D日(xx)  k K 数字或中文  w W 英文缩写 或全写  h 时 m分 s秒 ms毫秒
	return formatStr
		.replace('YYYY', year)
		.replace('MM', month + 1)
		.replace('DD', date)
		.replace('kk', day)
		.replace('hh', h)
		.replace('mm', min)
		.replace('ss', s)
		.replace('ms', ms)
		.replace('KK', weekStr[day])
		.replace('ww', weekLet[day])
		.replace('WW', WeekLet[day])

	// const timeStr
}

2 、效果

使用

formatTime(subtractTime([, 1, 'day']))
formatTime(subtractTime([, 1, 'day']))

结果

在这里插入图片描述

三、规则匹配时间

假如你们有和我一样个需求，这个非常适合，假如说现在有一组数据，后端返回时间戳，而我们前端要根据这个时间与现在时间差距，判断他是昨天，还是前天，啥的，就可以用这个方法。

代码

/**
 * 显示时间的rules
 * @param {rule,case} rules  匹配规则
 * @param {*} time  需要判断的时间
 * @param {*} StaTime 基准时间，默认当前时间
 * @returns
 */
function showTime(rules, time, StaTime = new Date()) {
	time = new Date(time)
	console.log(time)
	StaTime = new Date(StaTime)
	if (!(rules && time)) {
		throw 'rules & time can not be empty'
	}
	if (!Array.isArray(rules)) {
		throw 'rules is not Array'
	}
	if (rules.length === 0) {
		return formatTime(time)
	}
	for (let item of rules) {
		if (
			item instanceof Function &&
			item(time.getTime(), StaTime.getTime())
		) {
			return item(time.getTime(), StaTime.getTime())
		}
		if (typeof item.rule === 'boolean') {
			if (item.rule) return formatTime(time, item.case)
		} else {
			const staUpdateStr = subtractTime([
				StaTime,
				item.rule,
				item.type,
			]).getTime()
			const staStr = subtractTime([StaTime, , item.type]).getTime()
			const timeStr = subtractTime([time, , item.type]).getTime()
			switch (true) {
				case item.rule >= 0 &&
					staStr > timeStr &&
					staUpdateStr <= timeStr:
					return formatTime(time, item.case)
				case item.rule <= 0 &&
					staStr < timeStr &&
					staUpdateStr >= timeStr:
					return formatTime(time, item.case)
			}
		}
	}

	return formatTime(time)
}

2、效果

使用

匹配规则可以传入如下所有方式

showTime(
		[
			{ rule: 1, type: 'day', case: '昨天 DD-hh-mm' },
			{ rule: -10, type: 'day', case: '明天 DD-hh-mm' },
			(time, StaTime) => {
				if (time > StaTime) {
					return time
				}
			},
			{ rule: 1 > 2, case: 'hh:mm' },
		],
		'2022/11/14'
	)

结果

输出就是，通过输入时间与基准时间经过匹配后的结果，case则是写时间格式，根据上一个方法。

最后

将所有的方法写到内置函数Date的原型上，并封装一个对象export。
通过两种方法使用，这里简单的赋值一下，如果说要做一个方法很多的时间库，那么可能还要在底层进行修改，让函数方法自动可以添加到实例和对象中，这个底层代码可以参考underscore的底层源码。
在这里插入图片描述

结尾

简单封装几个时间函数，完成了公司所需要的需求，并保留一个方法做为以后时间函数的基础，如果条件允许可以，开发并递进到前端基建的utils中。