一、前言
参数归一化:是我们软件开发里一个非常重要且实用的技巧,用的好极大简化代码同时提升代码的可阅读性和可维护性。以下我用日期格式化为例,演示一下参数归一化的技巧。
二、日期格式化实例
/*** 辅助格式化函数* @param {string|function} formatter 格式化函数或格式化字符串* @returns {function} 格式化函数*/
function _formatNormalize(formatter) {if (typeof formatter === 'function') {return formatter;}if (typeof formatter !== 'string') {throw new Error('formatter must be a function or a string');}if (formatter === 'date') {formatter = 'yyyy-MM-dd';} else if (formatter === 'datetime') {formatter = 'yyyy-MM-dd HH:mm:ss';}const formatterFunc = (dateInfo) => {const { yyyy, MM, dd, HH, mm, ss, ms } = dateInfo;return formatter.replaceAll('yyyy', yyyy).replaceAll('MM', MM).replaceAll('dd', dd).replaceAll('HH', HH).replaceAll('mm', mm).replaceAll('ss', ss).replaceAll('ms', ms);}return formatterFunc
}
/*** 格式化日期--传入一个日期对象,返回一个格式化后的字符串* @param {Date}date 日期对象* @param {String | Function}formatter 格式化字符串或函数* @param {Boolean}isPad 是否补0* @returns {String}
*/
function dateFormat(date, formatter, isPad = false) {formatter = _formatNormalize(formatter)// console.log('formatter', formatter)const dateInfo = {year: date.getFullYear(),month: date.getMonth() + 1,day: date.getDate(),hour: date.getHours(),minute: date.getMinutes(),second: date.getSeconds(),millisecond: date.getMilliseconds(),}dateInfo.yyyy = dateInfo.year.toString()dateInfo.MM = dateInfo.month.toString()dateInfo.dd = dateInfo.day.toString()dateInfo.HH = dateInfo.hour.toString()dateInfo.mm = dateInfo.minute.toString()dateInfo.ss = dateInfo.second.toString()dateInfo.ms = dateInfo.millisecond.toString()function _pad(prop, len) {dateInfo[prop] = dateInfo[prop].padStart(len, '0')}if (isPad) {_pad('yyyy', 4)_pad('MM', 2)_pad('dd', 2)_pad('HH', 2)_pad('mm', 2)_pad('ss', 2)_pad('ms', 3)}const result = formatter(dateInfo)console.log('result--', result)return result
}
三、调用方式
// 2024-11-5
dateFormat(new Date(), 'date')// 2024-11-5 15:49:30
dateFormat(new Date(), 'datetime')// 2024-11-05
dateFormat(new Date(), 'date', true)// 2024-11-05 15:49:30
dateFormat(new Date(), 'datetime', true)// 2024年11月05日 15:49:41.336
dateFormat(new Date(), 'yyyy年MM月dd日 HH:mm:ss.ms', true)// 2024年11月05日
dateFormat(new Date('2023/1/1'), (dateInfo) => {const { year } = dateInfoconst thisYear = new Date().getFullYear()if (year < thisYear) {return `${thisYear - year}年前`} else if (year >= thisYear) {return `${year - thisYear}年前`} else {return '今年'}
})
四、输出结果
其他文章
基于ElementUi再次封装基础组件文档
vue3+ts基于Element-plus再次封装基础组件文档