开发常用方法记录

目录

获取数据类型

深拷贝

格式化金额

图片压缩

获取随机16进制颜色

证件号脱敏

uniapp小程序开发u-toast封装

获取身份证有效期限

 文件视频下载

银行卡手机号添加空格

div获取焦点和失去焦点问题

金额数字转成成大写汉子

判断是否IE浏览器（包括Edge浏览器）

---

获取数据类型

    getType() {
      var obj = Array.prototype.shift.apply(arguments);
      var toString = Object.prototype.toString;
      var map = {
        "[object Boolean]": "boolean",
        "[object Number]": "number",
        "[object String]": "string",
        "[object Function]": "function",
        "[object Array]": "array",
        "[object Date]": "date",
        "[object RegExp]": "regExp",
        "[object Undefined]": "undefined",
        "[object Null]": "null",
        "[object Map]": "map",
        "[object Object]": "object"
      };
      if (obj instanceof Element) {
        return "element";
      }
      return map[toString.call(obj)];
    },

    // 调用
    var type = this.getType(data);

深拷贝

deepClone() {
      var data = Array.prototype.shift.apply(arguments);
      var type = this.getType(data);
      var obj;
      if (type === "array") {
        obj = [];
        for (var i = 0, len = data.length; i < len; i++) {
          obj.push(this.deepClone(data[i]));
        }
      } else if (type === "object") {
        obj = {};
        for (var key in data) {
          obj[key] = this.deepClone(data[key]);
        }
      } else if (type === "map") {
        obj = new Map();
        data.forEach((item, key) => {
          obj.set(key, this.deepClone(item));
        });
      } else {
        return data;
      }
      return obj;
    },

格式化金额

/**
 * 格式化金额
 * 1000 => '1000.00'
 */
export const moneyFormat = x => {
  let f = parseFloat(x)
  if (isNaN(f)) {
    return 0.0
  }
  f = Math.round(x * 100) / 100
  let s = f.toString()
  let rs = s.indexOf('.')
  if (rs < 0) {
    rs = s.length
    s += '.'
  }
  while (s.length <= rs + 2) {
    s += '0'
  }
  return s
}

/**
 * 10000 => "10,000"
 */
export const toThousandFilter = num => {
  return (+num || 0)
    .toString()
    .replace(/^-?\d+/g, m => m.replace(/(?=(?!\b)(\d{3})+$)/g, ','))
}

/**
 * 大数值转换为万，亿函数
 *
 * @param {Number} 大数
 * @param {Number} 保留几位小数
 */
export const numConversion = (num, point = 2) => {
  const numStr = num.toString().split('.')[0] // 去掉小数点后的数值字符串
  const numLen = numStr.length
  if (numLen < 6) {
    return numStr
  } else if (numLen >= 6 && numLen <= 8) {
    const decimal = numStr.substring(numLen - 4, numLen - 4 + point)
    const res = parseInt(num / 10000) + '.' + decimal + '万'
    return res
  } else if (numLen > 8) {
    const decimal = numStr.substring(numLen - 8, numLen - 8 + point)
    const res = parseInt(num / 100000000) + '.' + decimal + '亿'
    return res
  }
}

/**
 * 大金额转换
 * @param {*} money 金额
 * @returns 
 */
export function formatMoney (money) {
    if (money !== undefined && money !== null && money !== ''){
        let s
        let m = parseFloat(money);
        if (m < 10000){
            s = '元';
        } else if (m >= 10000 && m < 100000000){
            s = '万元';
            m = m / 10000;
        } else {
            s = '亿';
            m = m / 100000000;
        }
        let result = m.toFixed(`${m}`.includes('.') ? 2 : 0) + s;
        return result;
    } else {
        return '/';
    }
}

图片压缩

需安装 lrz：npm i lrz

import lrz from 'lrz'

/**
 * 图片压缩
 *
 * @export
 * @param {*} file 通过 input:file 得到的文件，或者直接传入图片路径
 * @param {number} [width=1200] 图片最大不超过的宽度，默认为1200
 * @param {number} [height=1200] 同上
 * @param {number} [quality=0.7] 图片压缩质量，取值 0 - 1，默认为0.7
 * @returns 返回值是一个promise对象
 * rst.formData 后端可处理的数据
 * rst.file 压缩后的file对象（默认已经丢在rst.formData有一份了），需要注意的是如果压缩率太低的话，这个会是原始的file对象
 * rst.fileLen 生成后的图片的大小，后端可以通过此值来校验是否传输完整
 * rst.base64 生成后的图片base64，后端可以处理此字符串为图片，也直接用于img.src = base64
 * rst.base64Len 生成后的base64的大小，后端可以通过此值来校验是否传输完整 (如果采用base64上传方式)
 * rst.origin 也就是原始的file对象，里面存了一些原始文件的信息，例如大小，日期等。
 *
 */
export default async function compress(file, width = 1200, height = 1200, quality = 0.7) {
  return await lrz(file, { width, height, quality })
}

获取随机16进制颜色

/**
 * 随机16进制颜色 hexColor
 * return  string str 带#号的随机16进制颜色
 */
export const hexColor = () => {
  let str = '#'
  const arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F']
  for (let i = 0; i < 6; i++) {
    const index = Number.parseInt(Math.random() * 16)
    str += arr[index]
  }
  return str
}

证件号脱敏

export const stringEncrypt = (str) => {
  if (!str) return
  const len = str.length
  if (len < 8) return str
  const center = str.slice(4, len - 4)
  const b = center.replace(/\w/gi, '*')
  str = str.slice(0, 4) + b + str.slice(len - 4, len)
  return str
}

uniapp小程序开发u-toast封装

export const uUnits= {
  uToast({ refs, msg, zIndex = 10079}) {
    let platForm = ""
    // #ifdef H5
    platForm = "H5"
    // #endif
    let tipRef = null
    if (platForm === 'H5') {
      tipRef = this.$refs[refs]
    } else {
      tipRef = this.$children.find(item => item.$options.name === 'u-toast')
    }
    tipRef.show({
      message: msg || '',
      duration: 2000,
      zIndex: zIndex
    })
  }
}
// 调用
uUnits.uToast.call(this, {
	refs: 'tipRef',
	msg: '报名成功',
})

获取身份证有效期限

/**
 * 计算身份证有效期限
 * @param {*} idCardNo 身份证号
 * @param {*} startTime 身份证有效期开始日期
 */
function getRightSpanTime(idCardNo,startTime) {
	let valid = 5;
	const year = +idCardNo.substring(6, 10);
	const month = +idCardNo.substring(10,12);
	const day = +idCardNo.substring(12,14);
	// 领证年份
	const getLiceDate = new Date(startTime.replace(/-/g,'/'));
	const getLiceYear = getLiceDate.getFullYear();
	const getLiceMonth = getLiceDate.getMonth() + 1;
	const getLiceDay = getLiceDate.getDate();
	// 领证年龄(领证年龄取整岁)
	let getLicenseAge = getLiceYear - year;
	if(getLiceMonth < month) {
		getLicenseAge--
	} else if(getLiceMonth === month) {
		if(getLiceDay < day) {
			getLicenseAge--
		}
	}
	/* 年龄小于16，有效期5年
    年龄大于等于16，小于等于25，有效期10年
    年龄大于等于26，小于等于45，有效期20年
    年龄大于等于46，长期 */
	if(getLicenseAge < 0) {
		valid = 0;
	} else if(getLicenseAge < 16) {
		valid = 5;
	} else if(getLicenseAge >= 16 && getLicenseAge <=25) {
		valid = 10;
	} else if(getLicenseAge >= 26 && getLicenseAge <= 45) {
		valid = 20;
	} else {
		// 长期
		valid = 21
	}
	return valid
}


// 获取身份证表单起止时间间隔
function getIDFormTimeSpan(startTime,endTime) {
	let year;
	const sTime = startTime.replace(/-/g,'/');
	const eTime = endTime.replace(/-/g,'/');
	let sYear = new Date(sTime).getFullYear();
	let eYear = new Date(eTime).getFullYear();
	let sMonth = new Date(sTime).getMonth() + 1;
	let eMonth = new Date(eTime).getMonth() + 1;
	let sDay = new Date(sTime).getDate();
	let eDay = new Date(eTime).getDate();
	year = eYear - sYear;
	// 计算年间距后，保证月份日期相等
	const IsEquel = sMonth === eMonth && sDay === eDay;
	return {year,IsEquel}
}

 文件视频下载

/**
 * 下载文件
 * @param res 必传，服务端返回的响应
 * @param fileName 生成文件名称，可不传，使用响应头content-disposition设置
 * @param type 文件媒体类型，可匹配默认值，也可传其他值
 */
export const downloadFile = function({ res, fileName, type }) {
  // find more in https://www.iana.org/assignments/media-types/media-types.xhtml
  const mimeTypeMap = {
    doc: 'application/msword',
    pdf: 'application/pdf',
    excel: 'application/vnd.ms-excel'
  }

  let name = fileName
  const contentDisposition = res.response.headers['content-disposition']
  if (!fileName && contentDisposition) {
    name = decodeURIComponent(contentDisposition.replace(/attachment;\s?filename=/g, ''))
  }

  const typeVale = mimeTypeMap[type] || type
  const blob = new Blob([res], { typeVale })

  if ('download' in document.createElement('a')) {
    const link = document.createElement('a')
    link.download = name
    link.style.display = 'none'
    link.href = URL.createObjectURL(blob)
    document.body.appendChild(link)
    link.click()
    URL.revokeObjectURL(link.href)
    document.body.removeChild(link)
  } else {
    navigator.msSaveBlob(blob, name)
  }
}

// 根据video 播放链接下载视频
// 如果跨域需前端配置proxy代理解决跨域问题
downloadVideo(url, fileName) {
      // 下载跨域代理使用 /downloadApi
      // document.execCommand 另存为api
      let link = document.createElement("a");
      link.style.display = "none";
      document.body.appendChild(link);
      // 使用XMLHttpRequest下载视频
      let xhr = new XMLHttpRequest();
      xhr.open("GET", url, true);
      xhr.responseType = "blob";
      xhr.onload = function () {
        console.log(xhr, "xhr=========");
        if (xhr.status === 200) {
          // 将视频Blob对象创建一个临时URL
          let url = window.URL.createObjectURL(xhr.response);
          // 设置a标签的属性，并触发点击事件进行下载
          link.href = url;
          link.download = fileName;
          link.click();
          // 释放URL对象
          window.URL.revokeObjectURL(url);
          document.body.removeChild(link);
        }
      };
      xhr.send();
    },

银行卡手机号添加空格

// 银行卡号
// 添加空格
card.replace(/\s/g, '').replace(/[^\d]/g, '').replace(/(\d{4})(?=\d)/g, '$1 ');
// 取消空格
card.replace(/[, ]/g,'')

// 手机号
// 添加空格
phone.replace(/\D/g,'').replace(/^/,'$& ').replace(/....(?!$)/g,'$& ')

div获取焦点和失去焦点问题

默认情况下 div 标签是没有获得焦点 focus() 和失去焦点 blur() 事件的。

如果想要 div 可以拥有这两个事件，可以给 div 标签加上 tabindex="-1" 属性，如下：

<div tabindex="-1">...</div>

这样就可以给 div 加上焦点事件了。

同理，利用tabindex="-1" 也可以给其他不支持焦点事件的标签添加焦点事件。

金额数字转成成大写汉子

function numToChinese(money) {
                // 汉字的数字
                var cnNums = new Array('零', '壹', '贰', '叁', '肆', '伍', '陆',
                    '柒', '捌', '玖');
                // 基本单位
                var cnIntRadice = new Array('', '拾', '佰', '仟');
                // 对应整数部分扩展单位
                var cnIntUnits = new Array('', '万', '亿', '兆');
                // 对应小数部分单位
                var cnDecUnits = new Array('角', '分', '毫', '厘');
                // 整数金额时后面跟的字符
                var cnInteger = '整';
                // 整型完以后的单位
                var cnIntLast = '元';
                // 最大处理的数字
                var maxNum = 999999999999999.9999;
                // 金额整数部分
                var integerNum;
                // 金额小数部分
                var decimalNum;
                // 输出的中文金额字符串
                var chineseStr = '';
                // 分离金额后用的数组，预定义
                var parts;
                if (money == '') {
                    return '';
                }
                money = parseFloat(money);
                if (money >= maxNum) {
                    // 超出最大处理数字
                    return '';
                }
                if (money == 0) {
                    chineseStr = cnNums[0] + cnIntLast + cnInteger;
                    return chineseStr;
                }
                // 转换为字符串
                money = money.toString();
                if (money.indexOf('.') == -1) {
                    integerNum = money;
                    decimalNum = '';
                } else {
                    parts = money.split('.');
                    integerNum = parts[0];
                    decimalNum = parts[1].substr(0, 4);
                }
                // 获取整型部分转换
                if (parseInt(integerNum, 10) > 0) {
                    var zeroCount = 0;
                    var IntLen = integerNum.length;
                    for (var i = 0; i < IntLen; i++) {
                        var n = integerNum.substr(i, 1);
                        var p = IntLen - i - 1;
                        var q = p / 4;
                        var m = p % 4;
                        if (n == '0') {
                            zeroCount++;
                        } else {
                            if (zeroCount > 0) {
                                chineseStr += cnNums[0];
                            }
                            // 归零
                            zeroCount = 0;
                            chineseStr += cnNums[parseInt(n)]
                                + cnIntRadice[m];
                        }
                        if (m == 0 && zeroCount < 4) {
                            chineseStr += cnIntUnits[q];
                        }
                    }
                    chineseStr += cnIntLast;
                }
                // 小数部分
                if (decimalNum != '') {
                    var decLen = decimalNum.length;
                    for (let i = 0; i < decLen; i++) {
                        let n = decimalNum.substr(i, 1);
                        if (n != '0') {
                            chineseStr += cnNums[Number(n)] + cnDecUnits[i];
                        }
                    }
                }
                if (chineseStr == '') {
                    chineseStr += cnNums[0] + cnIntLast + cnInteger;
                } else if (decimalNum == '') {
                    chineseStr += cnInteger;
                }
                return chineseStr;
            }

判断是否IE浏览器（包括Edge浏览器）

//判断是否是IE浏览器，包括Edge浏览器
      function IEVersion() {
        var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
        var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判断是否IE浏览器
        var isEdge = userAgent.indexOf("Windows NT 6.1; Trident/7.0;") > -1 && !isIE; //判断是否IE的Edge浏览器
        if (isIE) {
          var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
          reIE.test(userAgent);
          var fIEVersion = parseFloat(RegExp["$1"]);
          if (fIEVersion == 7) {
            return "IE7";
          } else if (fIEVersion == 8) {
            return "IE8";
          } else if (fIEVersion == 9) {
            return "IE9";
          } else if (fIEVersion == 10) {
            return "IE10";
          } else if (fIEVersion == 11) {
            return "IE11";
          } else {
            return "0";
          } //IE版本过低
        } else if (isEdge) {
          return "Edge";
        } else {
          return "-1"; //非IE
        }
      }
      if (IEVersion() == "IE7" || IEVersion() == "IE8" || IEVersion() == "IE9" || IEVersion() == "0") {
        setTimeout(function () {
          // 浏览器版本过低的提示页面
          location.href = "http://60.205.164.169/TMS-WEB/NotSupport";
        });
      }