一、class 类的工具函数

1、mix 混合类

适用于需要继承多个类，但是项目使用了eslint/tslint 不允许继承多个类的时候使用

  1. // 复制类的属性
  2. function copyProperties(target, source) {
  3.     for (let key of Reflect.ownKeys(source)) {
  4.         if (key !== 'constructor' && key !== 'prototype' && key !== 'name' && key !== 'length') {
  5.             let desc = Object.getOwnPropertyDescriptor(source, key)
  6.             Object.defineProperty(target, key, desc)
  7.         }
  8.     }
  9. }
  11. // 混合类
  12. export default function mix(...mixins) {
  13.     class Mix {
  14.         constructor(...args) {
  15.             for (let mixin of mixins) {
  16.                 copyProperties(this, new mixin(...args)); // 拷贝实例属性
  17.             }
  18.         }
  19.     }
  20.     for (let mixin of mixins) {
  21.         copyProperties(Mix, mixin); // 拷贝静态属性
  22.         copyProperties(Mix.prototype, mixin.prototype); // 拷贝原型属性
  23.     }
  24.     return Mix;
  25. }

二、基于 URL 的工具函数

1、获取地址栏参数

  1. /**
  2.  * 根据指定的key获取浏览器URL参数值
  3.  * @param key 获取的指定参数
  4.  * @param url 指定url 默认为当前地址
  5.  * @returns {string | Object }
  6.  */
  7. function getUrlParams(key = '', url = window.location.href) {
  8.     const regexP = /[^#&\?]+=[^#&\?]*/ig,
  9.         res: any = {},
  10.         ms = url.match(regexP);
  11.     if (ms) {
  12.         for (const temp of ms) {
  13.             const arr = temp.split('=');
  14.             res[arr[0]] = decodeURI(arr[1]);
  15.         }
  16.     }
  17.     if (key) {
  18.         return res[key]
  19.     } else {
  20.         return res;
  21.     }
  22. }

三、时间类型的工具函数

1、按照指定格式 格式化时间

  1. /**
  2.  * 按照指定格式格式化时间
  3.  * @param {String} formater 要格式的格式
  4.  * @param {Date} t 要格式的时间，如果不传默认格式化当前时间
  5.  * @param {Boolean} isDecimal  是否是十位
  6.  *  dateFormater('YYYYMMDD') ==> 20200306
  7.  *  dateFormater('YYMMDD') ==> "200306"
  8.  */
  9. function  dateFormater(t, formater = 'YYYY-MM-DD HH:mm:ss', isDecimal = true) {
  10.     const date = !isDecimal ? (t ? new Date(t) : new Date()) : (t ? new Date(t * 1000) : new Date()),
  11.         Y = date.getFullYear() + '',
  12.         M = date.getMonth() + 1,
  13.         D = date.getDate(),
  14.         H = date.getHours(),
  15.         m = date.getMinutes(),
  16.         s = date.getSeconds();
  17.     return formater.replace(/YYYY|yyyy/g, Y)
  18.         .replace(/YY|yy/g, Y.substr(2, 2))
  19.         .replace(/MM/g, (M < 10 ? '0' : '') + M)
  20.         .replace(/DD/g, (D < 10 ? '0' : '') + D)
  21.         .replace(/HH|hh/g, (H < 10 ? '0' : '') + H)
  22.         .replace(/mm/g, (m < 10 ? '0' : '') + m)
  23.         .replace(/ss/g, (s < 10 ? '0' : '') + s)
  24. }

四、Array 类型的工具函数

1、按照指定的 key 值对指定的 对象数组去重

  1. /**
  2.  * 根据指定key去重数组
  3.  * @param arr 去重的数组
  4.  * @param type 去重数组根据的key
  5.  */
  6. function  removedDuplicate(arr, type) {
  7.       const newArr: any = [];
  8.       const tArr: any = [];
  9.       if (arr.length === 0) {
  10.           return arr;
  11.       } else {
  12.           if (type) {
  13.               for (const item of arr) {
  14.                   if (!tArr[item[type]]) {
  15.                       newArr.push(item);
  16.                       tArr[item[type]] = true;
  17.                   }
  18.               }
  19.               return newArr;
  20.           } else {
  21.               for (const temp of arr) {
  22.                   if (!tArr[temp]) {
  23.                       newArr.push(temp);
  24.                       tArr[temp] = true;
  25.                   }
  26.               }
  27.               return newArr;
  28.           }
  29.       }
  30.   }

五、Number类型的工具函数

1、生成Min-Max的随机数

  1. /**
  2.  * 生成Min-Max的随机数
  3.  * @param {*number} Min
  4.  * @param {*number} Max
  5.  */
  6. function getRandomNum(Min, Max) {
  7.     const Range = Max - Min;
  8.     const Rand = Math.random();
  9.     return (Min + Math.round(Rand * Range));
  10. }

六、适用于所有的工具函数

1、基于类的防抖函数

  1. class CommonUtils {
  2.       /**
  3.      * 防抖函数
  4.      * @param fn 需要节流的函数
  5.      * @param contentThis 节流函数上下文this
  6.      * @param delay 节流阀门时间
  7.      */
  8.     debounce(fn: void, contentThis: object, delay = 1000) {
  9.         let timer; // 维护一个 timer
  10.         return function () {
  11.             const args: any = arguments;
  12.             if (timer) {
  13.                 clearTimeout(timer);
  14.             }
  15.             timer = setTimeout(function () {
  16.                 // @ts-ignore  忽略TS检查
  17.                 fn.apply(contentThis, args);
  18.             }, delay);
  19.         }.call(this);
  20.     }
  21. }

七、String 类型的工具函数

1、用于替换字符串中的标签，避免脚本攻击

  1. /**
  2.  * 用于替换字符串中的标签，避免脚本攻击
  3.  * @param str
  4.  * @returns string
  5.  */
  6. function htmlEncodeByRegExp(str) {
  7.     const tempStr = str || '';
  8.     if (tempStr.length === 0) { return ''; }
  9.     return tempStr.replace(/&/g, '&amp;')
  10.         .replace(/</g, '&lt;')
  11.         .replace(/>/g, '&gt;')
  12.         .replace(/ /g, '&nbsp;')
  13.         .replace(/\'/g, '&#39;')
  14.         .replace(/\"/g, '&quot;');
  15. }