js--高阶函数之参数归一化

一、前言

参数归一化：是我们软件开发里一个非常重要且实用的技巧，用的好极大简化代码同时提升代码的可阅读性和可维护性。以下我用日期格式化为例，演示一下参数归一化的技巧。

二、日期格式化实例

/**
 * 辅助格式化函数
 * @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 } = dateInfo
  const thisYear = new Date().getFullYear()
  if (year < thisYear) {
    return `${thisYear - year}年前`
  } else if (year >= thisYear) {
    return `${year - thisYear}年前`
  } else {
    return '今年'
  }
})

四、输出结果

其他文章

基于ElementUi再次封装基础组件文档

vue3+ts基于Element-plus再次封装基础组件文档