Appearance

「项目初始化」Utils

WXL570CN2023/02/17initlang.js moment.js localStorage

「项目初始化」Utils

常用库

lang.js

/**
 * @description: 判断字符串是否为空
 */
export const strEmpty = (value) => {
  return value === undefined || value === null || value === '';
}

/**
 * @description: 判断数值是否为空
 */
export const numEmpty = (value) => {
  return strEmpty(value) || value === 0
}

/**
 * @description: 回显变量
 */
const showValue = (value, fixed) => {
  if (strEmpty(value)) {
    return '--';
  }
  return value;
}

/**
 * @description: 将传入变量(有可能为空、非数值)保留n位小数
 */
export const toFixed = (value, decimals = 2) => {
  if (strEmpty(value)) return '--';
  if (isNaN(value)) return value;
  return Number(value).toFixed(decimals);
};

/**
 * @description: 判断字符串中是否包含字母
 */
export const hasLetter = (str) => {
  for (const i in str) {
    const asc = str.charCodeAt(i);
    if ((asc >= 65 && asc <= 90) || (asc >= 97 && asc <= 122)) {
      return true;
    }
  }
  return false;
}

/**
 * @description: 将小数的经纬度转化成度分秒
 */
export const formatDegree = (value, isLng, extra = {}) => {
  // returnObj:返回度分秒
  // second:是否返回秒
  const { returnObj = false, second = true } = extra
  const absValue = Math.abs(value);
  const v1 = Math.floor(absValue); // 度
  const v2 = second ? Math.floor((absValue - v1) * 60) : ((absValue - v1) * 60).toFixed(4) // 分
  const v3 = (((absValue - v1) * 3600) % 60).toFixed(1); // 秒
  // eslint-disable-next-line no-nested-ternary
  if (returnObj) return {
    degree: v1,
    minute: v2,
    second: v3,
  };
  return `${v1}°${v2}'${second ? `${v3}"` : ''}${value > 0 ? (isLng ? 'E' : 'N') : isLng ? 'W' : 'S'
    }`;
}

/**
 * @description: 将度分秒转化成小数的经纬度
 */
export const formatTransform = (arg1, arg2, arg3, arg4) => {
  const arg = Number(arg1) + arg2 / 60 + arg3 / 3600;
  if (arg4 === 'W' || arg4 === 'S') {
    return -arg;
  }
  return arg;
}

/**
 * @description: 将常量中的对象常量转换为数组(用于下拉框)
 * @param {*} constantObj:传入的对象({ name: { value: '', text: '' } })
 * @param {*} addAll:是否添加全部
 */
export const objectToOptions = (constantObj, addAll = false) => {
  const _options = Object.values(constantObj)
  if (addAll) {
    const allItem = {
      value: '',
      text: '全部',
    }
    _options.unshift(allItem)
  }
  return _options
};

/**
 * @description: 通过value获取对应常量中的匹配项(默认返回text)
 * @param {*} options:传入的常量格式
 * 格式一:[{ [name]: { value: '', text: '' } }]
 * 格式二:[{ value: '', text: '' }]
 * @param {*} value:要查找的value
 * @param {*} keyName:要返回的值对应的key
 * returnObj 为 true 时 keyName 无效
 * @param {*} returnObj:是否返回匹配上的对象
 */
export const getOptionsMatch = (options, value, extra = {}) => {
  const { keyName = 'text', valueName = 'value', returnObj = false } = extra || {}
  const _options = isArray(options) ? options : Object.values(options)
  const res = _options.find(item => `${item[valueName]}` === `${value}`) || {}
  if (returnObj) return res
  return res[keyName] || '--'
}

/**
 * @description: 获取DOM
 */
export const $ = (selector) => {
  return document.querySelector(selector)
}

/**
 * @description: 获取缩放比例
 * 物体宽高:width, height
 * 容奇宽高:boxWidth, boxHeight
 */
export const getScale = (width, height, boxWidth, boxHeight) => {
  const scale = width / height
  const boxScale = boxWidth / boxHeight
  if (boxScale > scale) {
    return boxHeight / height
  }
  return boxWidth / width
}

dateFormater.js(依赖moment.js

import moment from 'moment';
import { strEmpty, numEmpty } from './lang';

// 日期格式类型
export const DATE_FORMAT_TYPE = {
  YMD: 'YYYY-MM-DD', // 年月日
  YMDH: 'YYYY-MM-DD HH', // 年月日-时
  YMDHM: 'YYYY-MM-DD HH:mm', // 年月日-时分
  YMDHMS: 'YYYY-MM-DD HH:mm:ss', // 年月日-时分秒
  YMD_START: 'YYYY-MM-DD 00:00:00',
  YMD_END: 'YYYY-MM-DD 23:59:59',
};

/**
 * @description: 将时间对象转换成易读格式(YYYY年-MM月-DD日 HH时mm分ss秒)
 */
export function dateFormat(date = moment(), formatString = DATE_FORMAT_TYPE.YMDHMS) {
  return moment(date).format(formatString);
}

/**
 * @description 时长格式化(将一段时长转换为几年几月几日几分几时几秒的格式)
 * @val 传入的时长
 * @type 传入时长的单位(years/months/weeks/days/hours/minutes/seconds)
 * @placeholder 数值为空时的占位符
 * @notShow 列表,不显示的单位
 */
export function formatDuration({
  value,
  type,
  placeholder = '--',
  notShow = [],
  defaultUnit = 'h'
}) {
  if (strEmpty(value)) return placeholder;
  if (isNaN(value)) return value
  if (value === 0) return `${value}${defaultUnit}`
  let years = moment.duration(value, type).years();
  years = !numEmpty(years) && !notShow.includes(type) ? `${years}y` : '';
  let days = moment.duration(value, type).days();
  days = !numEmpty(days) && !notShow.includes(type) ? `${days}d` : '';
  let hours = moment.duration(value, type).hours();
  hours = !numEmpty(hours) && !notShow.includes(type) ? `${hours}h` : '';
  let minutes = moment.duration(value, type).minutes();
  minutes = !numEmpty(minutes) && !notShow.includes(type) ? `${minutes}m` : '';
  let seconds = moment.duration(value, type).seconds();
  seconds = !strEmpty(seconds) && !notShow.includes(type) ? `${seconds}s` : '';
  return `${years}${days}${hours}${minutes}${seconds}`;
}

/**
 * @description: 毫秒级时间戳转换成易读格式(YYYY年-MM月-DD日 HH时mm分ss秒)
 */
export function formateMilliseconds(milliseconds, formateString = DATE_FORMAT_TYPE.YMDHMS) {
  return moment(milliseconds).format(formateString);
}

/**
 * @description: 秒级时间戳转换成易读格式(YYYY年-MM月-DD日 HH时mm分ss秒)
 */
export function formateUnixTime(seconds, formateString = DATE_FORMAT_TYPE.YMDHMS) {
  return moment.unix(seconds).format(formateString);
}

/**
 * @description: 当前时间转换成易读格式(YYYY年-MM月-DD日 HH时mm分ss秒)
 */
export function formateNow(formateString = DATE_FORMAT_TYPE.YMDHMS) {
  return moment().format(formateString);
}

/**
 * @description: 将易读格式时间字符串(YYYY年-MM月-DD日 HH时mm分ss秒)转换成时间戳(秒级)
 */
export function dateStrToUnix(dateString) {
  return moment(dateString).unix();
}

/**
 * @description: 将易读格式时间字符串(YYYY年-MM月-DD日 HH时mm分ss秒)转换成时间戳(毫秒级)
 */
export function dateStrToMillisecond(dateString) {
  return moment(dateString).valueOf();
}

/**
 * @description: 时间选择器禁用函数(禁用今天之前的日期)
 */
export function disabledDate(current) {
  return current && current < moment().startOf('day');
}

/**
 * @description: 计算时间戳差值
 */
export function timeDiff(startTime, endTime) {
  return dateStrToUnix(endTime) - dateStrToUnix(startTime)
}

/**
 * @description: 获取一段时间前/后
 * @note 这与 getSomeTimeBefore 完全相同,只是不减去时间,而是增加时间。
 * @num 取负值为前,正值为后
 * @type 取值:years	y
              quarters	Q
              months	M
              weeks	w
              days	d
              hours	h
              minutes	m
              seconds	s
              milliseconds	ms
 * @eg 一年前/一月前/一周前...,一年后/一月后/一周后...
 */
export function getAfewDaysAgo(num, type = 'd', formateString = DATE_FORMAT_TYPE.YMDHMS) {
  return moment().add(num, type).format(formateString)
}

/**
 * @description: 获取一段时间前/后
 * @note 这与 getAfewDaysAgo 完全相同,只是不增加时间,而是减去时间。
 * @num 取负值为后,正值为前
 * @type 取值:years	y
              quarters	Q
              months	M
              weeks	w
              days	d
              hours	h
              minutes	m
              seconds	s
              milliseconds	ms
 * @eg 一年前/一月前/一周前...,一年后/一月后/一周后...
 */
export function getSomeTimeBefore(num, type, formateString = DATE_FORMAT_TYPE.YMDHMS) {
  return moment().subtract(num, type).format(formateString);
}

/**
 * @description: 获取一段时间的开始
 * @timeType year/quarter/month/week/day/hour/minute/second
 * @eg 某年/某季度/某月/某星期/某天的开始...
 */
export function getSomeTimeStart(time, timeType, formateString = DATE_FORMAT_TYPE.YMDHMS) {
  return moment(time).startOf(timeType).format(formateString);
}

/**
 * @description: 获取一段时间的结束
 * @timeType year/quarter/month/week/day/hour/minute/second
 * @eg 某年/某季度/某月/某星期/某天的结束...
 */
 export function getSomeTimeEnd(time, timeType, formateString = DATE_FORMAT_TYPE.YMDHMS) {
  return moment(time).endOf(timeType).format(formateString);
}

storage.js

import { isObject } from 'lodash';

const storage = {
  //设置缓存
  set: (params) => {
    const obj = {
      name: ' ',
      value: '',
      expires: '',
      startTime: new Date().getTime(), //记录何时将值存入缓存,毫秒级
    };
    const options = {};
    //将obj和传进来的params合并
    Object.assign(options, obj, params);
    if (options.expires) {
      //如果options.expires设置了的话
      //以options.name为key,options为值放进去
      localStorage.setItem(options.name, JSON.stringify(options));
    } else {
      //如果options.expires没有设置,就判断一下value的类型
      const type = Object.prototype.toString.call(options.value);
      //如果value是对象或者数组对象的类型,就先用JSON.stringify转一下,再存进去
      if (type === '[object Object]') {
        options.value = JSON.stringify(options.value);
      }
      if (type === '[object Array]') {
        options.value = JSON.stringify(options.value);
      }
      localStorage.setItem(options.name, options.value);
    }
  },
  //拿到缓存
  get: (name) => {
    let item = localStorage.getItem(name);
    //先将拿到的试着进行json转为对象的形式
    try {
      item = JSON.parse(item);
    } catch (error) {
      //如果不行就不是json的字符串,就直接返回
      return item;
    }
    //如果有startTime的值,说明设置了失效时间
    if (isObject(item) && item.startTime) {
      const date = new Date().getTime();
      //何时将值取出减去刚存入的时间,与item.expires比较,如果大于就是过期了,如果小于或等于就还没过期
      if (date - item.startTime > item.expires) {
        //缓存过期,清除缓存,返回false
        localStorage.removeItem(name);
        return false;
      }
      //缓存未过期,返回值
      return item.value;
    }
    //如果没有设置失效时间,直接返回值
    return item;
  },
  //移除缓存
  remove: (name) => {
    localStorage.removeItem(name);
  },
  //移出全部缓存
  clear: () => {
    localStorage.clear();
  },
};

export default storage;
Last Updated 2023-04-03 09:05:56