前端常用工具库方法整理

骑猪看日落 2023-06-12 04:30 1阅读 0赞

##### 前言 #####

在闲余的时间整理一份我们可能用到的前端工具库方法。

##### 1.获取url地址参数 #####

export function getQueryStringByStr(data) { 
    	const url = data; // 获取url中"?"符后的字串
    	const theRequest = { };
    	if (url.indexOf('?') !== -1) { 
    		const str = url.substr(1);
    		const strs = str.split('&');
    		for (let i = 0; i < strs.length; i += 1) { 
    		theRequest[strs[i].split('=')[0]] = unescape(strs[i].split('=')[1]);
    		}
    	}
    	return theRequest;
    }

##### 2.针对检索值(搜索)统一处理空格问题 #####

/** * @param {Object} props * @description 针对搜索值做统一处理 */
    export function convertParams(props) { 
      const newParams = { };
      for (const index in props) { 
        const item = props[index];
        const type = typeof item;
        if (item && type === 'string') { 
           newParams[index] = item.replace(/\s/g, '');
         } if (Object.prototype.toString.call(item) === '[object Object]') { 
            newParams[index] = convertParams(item)
          } else { 
           newParams[index] = item;
         }
      }
      return newParams;
    };

##### 3.权限方法判断 #####

/** * @param {Array|String} target 目标数组 * @param {Boolean} boolean 是否开启与的关系 * @description 判断当前用户是否在权限数据中 */
    export const authority = (target, boolean = false) => { 
      const str = getProps('authority')  // 获取当前角色的所有权限码， 自定义获取;
      if (Array.isArray(target)) { 
        if (boolean) { 
          return target.every(item => roles.indexOf(item) > -1)
        }
        return target.some(item => roles.indexOf(item) > -1)
      }
      return str && str.indexOf(target) > -1
    }

##### 4.菜单栏权限控制是否显示 #####

/** * 菜单栏权限显示隐藏/现在很多架构都是自动化路由，有现成的权限配置 * @param {Array} list 通过路由列表得到菜单列表 * @returns {Array} * @description 通过用户权限控制的菜单列表（简易版） */
    export const hasChild = (item) => { 
      return item.children && item.children.length !== 0
    }
    export const getMenuByAside = (list) => { 
      let res = [];
      list.forEach(item => { 
        if (!item.access || authority(item.access)) { 
          let obj = { 
            title: item.title,
            index: item.index,
            icon: item.icon,
            access: item.access || undefined,
          }
          if (hasChild(item)) obj.children = getMenuByAside(item.children)
          if (hasChild(item) && authority(item.access)) { 
            obj.children = getMenuByAside(item.children)
          }
          res.push(obj)
        }
      })
      return res
    }

##### 5.二维数组转换 #####

/** * @param {Array} target 目标数组 * @param {String} key 目标key值 * @param {Boolean} boolean 是否需要数组转换 * @param {Object} option 匹配的对象key值,值：label/value/boolean * @return {Array} * @description 处理二维数组转一维数组匹配相关字段值 */
    export const reduceConcat = (target, key, boolean, option) => { 
      let newTarget = [];
      const {  label, bool, value } = option || { };
      newTarget = target && target.map(item => { 
        if (boolean) { 
          return item[key] && item[key].map(opt => ({ 
            ...item,
            [key]: opt,
            [label]: bool ? item[label][value] : item[label]
          }))
        }
        return item[key];
      }
      ).reduce((a, b) => a.concat(b));
      return newTarget || [];
    }

##### 7. 针对json数组对象的去重 #####

/** * @param {Array} array 目标数据 * @param {String} label 匹配对象的字段 * @description 针对json数组对象的去重 */
    export function uniqueArray(array, label) { 
      const obj = { };
      array = array.reduce((pre, next) => { 
        !obj[next[label]] ? (obj[next[label]] = true && pre.push(next)) : "";
        return pre;
      }, []);
      return array;
    }

##### 6. 时间类 #####

// 转换时间（时分秒）
    /** * @param {Number|String} msd 转换时间戳 * @description 将时间戳转换成时分秒 */
    export function dealTimeToText(value) { 
      let time = Math.floor(value / 1000)
      let h = Math.floor(Math.floor(time / 60) / 60)
      let min = Math.floor(time / 60) % 60
      let s = Math.round(time % 3600 % 60)
      if (h > 0) { 
        return `${ h}h${ min}min${ s}s`
      } else if (min > 0) { 
        return `${ min}min${ s}s`
      } else { 
        return `${ s}s`
      }
    }

*  秒转时分秒

// 当天晚上23:59:59
    const endTime = new Date(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1);
    // 一月时间
    let start = new Date();
    start.setMonth(start.getMonth() - 3);
    return start.getTime() > time.getTime() || time.getTime() > endTime;
    
    // 一周时间
    const operateTime = [
      new Date(new Date().toLocaleDateString()).getTime() - 7 * 24 * 3600 * 1000,
      new Date().setHours("23", "59", "59")
    ];
    
    /** * @param {Number|String} value * @description 秒数转化为时分秒 */
    export const formatSeconds = (value) => { 
      let secondTime = parseInt(value), minuteTime = 0, hourTime = 0;
      if (secondTime > 60) { 
        minuteTime = parseInt(secondTime / 60);
        secondTime = parseInt(secondTime % 60);
        if (minuteTime > 60) { 
          hourTime = parseInt(minuteTime / 60);
          minuteTime = parseInt(minuteTime % 60);
        }
      }
      let result = "" + parseInt(secondTime) + "秒";
      if (minuteTime > 0) { 
        result = "" + parseInt(minuteTime) + "分" + result;
      }
      if (hourTime > 0) { 
        result = "" + parseInt(hourTime) + "小时" + result;
      }
      return result;
    }

*  计算当前年龄

/** * @param {String} dateTime 接收的日期eg: 1994-03-2 || 1569404854000 * @description 通用年龄计算公式 * */
    import moment from 'moment';
    export const getAgeYear = (dateTime) => { 
      let reg = /^(\d{4})-(\d{1,2})-(\d{1,2})$/
      let time = !reg.test(dateTime) ? moment(dateTime, 'YYYY-MM-DD') : dateTime;
      let regexp = time.match(/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})$/);
      if (!regexp) return '';
      let date = new Date(regexp[1], regexp[3] - 1, regexp[4]);
      if (date.getFullYear() == regexp[1] && (date.getMonth() + 1) == regexp[3]
        && date.getDate() == regexp[4]) { 
        let year = new Date().getFullYear();
        return year - regexp[1];
      }
    }

*  时间转换

/** * @param {Number} timelong 时间戳 * @param {String} format 格式类型 * @description 时间转换格式方法 * */
    export const formatDate = (timelong, format = 'YYYY-MM-DD') => { 
      function format2n(val) { 
        return val < 10 ? '0' + '' + val : val;
      }
      let date = new Date(timelong);
      let year = date.getFullYear() + '';
      let month = format2n(date.getMonth() + 1) + '';
      let day = format2n(date.getDate()) + '';
      let hour = format2n(date.getHours()) + '';
      let minute = format2n(date.getMinutes()) + '';
      let second = format2n(date.getSeconds()) + '';
      return format.replace(/YYYY/g, year).replace(/YYY/g, year.slice(1)).replace(/YY/g, year.slice(2)).replace(/Y/g, year.slice(1)).replace(/MM/g, month).replace(/M/g, month.slice(1)).replace(/DD/g, day).replace(/D/g, day.slice(1)).replace(/hh/g, hour).replace(/h/g, hour.slice(1)).replace(/mm/g, minute).replace(/m/g, minute.slice(1)).replace(/ss/g, second).replace(/s/g, second.slice(1));
    };
    
    /** * @param {Number} timelong 时间戳 * @description 显示时间之前 * */
    
    export const formatTimeAgo = (timelong) => { 
      const nowtime = new Date().getTime();
      let diffValue = nowtime - timelong;
      const bs = (diffValue >= 0 ? '前' : '后'); // 判断时间点是在当前时间的 之前 还是 之后
      diffValue = Math.abs(diffValue);
      if (diffValue < 6e4) {  return '刚刚' } // 小于60秒,刚刚
      if (diffValue < 36e5) {  return parseInt(diffValue / 6e4) + '分钟' + bs } // 小于1小时,按分钟
      if (diffValue < 864e5) {  return parseInt(diffValue / 36e5) + '小时' + bs } // 小于1天按小时
      if (diffValue > 864e5 && diffValue < 1728e5) {  return '昨天' } // 大于24小时小于48小时
      if (diffValue > 1728e5 && diffValue < 31536e6) {  return formatDate(timelong, 'MM-DD') } // 大于48小时小于365天
      return formatDate(timelong, 'YYYY-MM-DD')
    }

##### 7.随机生成16进制颜色值，并改变状态 #####

// 组件渲染后，500毫秒改变一次组件颜色
    componentDidMount() { 
    	this.interval = setInterval(this.getRandomColor, 500);
    }
    getRandomColor = () => { 
    	this.setState({  
    		col: '#'+('00000'+(Math.random()*0x1000000<<0).toString(16)).slice(-6),
    	});
    }

##### 8.背景水印简易版 #####

/** * @param {str} 用户需要显示的水印信息 * @description 背景水印 * */
    export function addWaterMarker(str) { 
      const can = document.createElement('canvas');
      // const { body } = document;
      // body.appendChild(can);
      can.width = 200;
      can.height = 100;
      can.style.display = 'none';
      const cans = can.getContext('2d');
      cans.rotate(20 * Math.PI / 180);
      cans.font = '16px Microsoft JhengHei';
      cans.fillStyle = 'rgba(17, 17, 17, 0.50)';
      cans.textAlign = 'left';
      cans.textBaseline = 'Middle';
      cans.fillText(str, can.width / 3, can.height / 2);
      return `url(${ can.toDataURL('image/png')})`;
    }
    
    /** * url转base64 */
    urlToBase64(url) { 
        return new Promise((resolve, reject) => { 
          let canvas = document.createElement("canvas"),
            ctx = canvas.getContext("2d"),
            img = new Image();
          img.crossOrigin = "Anonymous";
          img.src = url;
          img.onload = () => { 
            canvas.width = img.width;
            canvas.height = img.height;
            ctx.drawImage(img, 0, 0, img.width, img.height);
            let dataUrl = canvas.toDataURL("image/jpeg");
            canvas = null;
            resolve(dataUrl);
          };
        });
      },

##### 9.常用code码统一报错提示 #####

const codeMessage = { 
      200: '服务器成功返回请求的数据。',
      201: '新建或修改数据成功。',
      202: '一个请求已经进入后台排队（异步任务）。',
      204: '删除数据成功。',
      400: '发出的请求有错误，服务器没有进行新建或修改数据的操作。',
      401: '用户没有权限（令牌、用户名、密码错误）。',
      403: '用户得到授权，但是访问是被禁止的。',
      404: '发出的请求针对的是不存在的记录，服务器没有进行操作。',
      406: '请求的格式不可得。',
      410: '请求的资源被永久删除，且不会再得到的。',
      422: '当创建一个对象时，发生一个验证错误。',
      500: '服务器发生错误，请检查服务器。',
      502: '网关错误。',
      503: '服务不可用，服务器暂时过载或维护。',
      504: '网关超时。',
    };

##### 10.原生ajax下载导出 #####

/** * @param {String} url 下载URL地址 * @param {String|Number} downloadName 下载文件名称 * @Parma {type} 下载请求方法get||post * @description 导出Excel文件 * */
    import Vue from 'vue';
    import moment from 'moment';
    import Cookies from "js-cookie";
    const that = new Vue();
    
    export function fileDownload(url, downloadName = moment(new Date(), 'YYYY-MM-DD') + "任务监控数据表", option) { 
      const {  type, status, message, messageErr, params } = option;
    
      let fileName = downloadName + '.xlsx';
    
      let request = new XMLHttpRequest();
    
      status ? that.$message({ 
        type: 'warning',
        showClose: true,
        message: message || '已点击正在下载，请稍后...',
      }) : null;
    
      request.open(type || 'GET', url, true);
    
      request.setRequestHeader("Authorization", Cookies.get("user-token"));
    
      request.setRequestHeader(
        "Content-Type",
        params ? 'application/json' : "application/x-www-form-urlencoded; charset=UTF-8"
      );
    
      request.responseType = "blob";
    
      request.onload = function () { 
        if (this.status === 200) { 
          let blob = this.response;
          if (window.navigator.msSaveOrOpenBlob) { 
            window.navigator.msSaveBlob(blob, fileName);
          } else { 
            let downloadLink = document.createElement("a");
            let contentTypeHeader = request.getResponseHeader("Content-Type");
            downloadLink.href = window.URL.createObjectURL(
              new Blob([blob], {  type: contentTypeHeader })
            );
            downloadLink.download = fileName;
            document.body.appendChild(downloadLink);
            downloadLink.click();
            document.body.removeChild(downloadLink);
            window.URL.revokeObjectURL(downloadLink.href)
          }
        } else { 
          that.$message({ 
            type: 'error',
            showClose: true,
            message: messageErr ||'文件下载失败...',
          });
        }
      };
      request.send(params ? JSON.stringify(params) : void null);
    }

##### 10.file文件转码 #####

##### 11. url参数加密 #####

export const Base64 = { 
      //加密
      encode(params) { 
        return btoa(encodeURIComponent(params).replace(/%([0-9A-F]{2})/g,
          function toSolidBytes(match, option) { 
            return String.fromCharCode('0x' + option);
          }));
      },
      //解密
      decode(params) { 
        return decodeURIComponent(atob(params.replace(/\s/g, '+')).split('').map(option => '%' + ('00' + option.charCodeAt(0).toString(16)).slice(-2)).join(''));
      }
    }

> \\s : 表示 space ，空格  
> \+： 一个或多个  
> ^： 开始，^\\s，以空格开始 结束，\\s$，以空格结束  
> |：或者  
> /g：global， 全局

##### 12. 背景水印 #####

'use strict'
    
    const watermark = { };
    
    /** * @param {String} str // 要设置的水印的内容 * @param {String} container // 需要设置水印的容器 */
    const id = '1.23452384164.123412415';
    
    const setWatermark = (str, container) => { 
      if (!container) return false;
    
      if (document.getElementById(id) !== null) {  // 查看页面上有没有，如果有则删除
        const childelement = document.getElementById(id)
        childelement.parentNode.removeChild(childelement)
      }
    
      const containerWidth = container.offsetWidth // 获取父容器宽
      const containerHeight = Math.max(container.scrollHeight, document.body.clientHeight); // 获取父容器高
      container.style.position = 'relative' // 设置布局为相对布局
    
      const can = document.createElement('canvas') // 创建canvas元素(先制作一块背景图)
      can.width = 300 // 设置每一块的宽度
      can.height = 200 // 高度
      const cans = can.getContext('2d') // 获取canvas画布
      cans.rotate(20 * Math.PI / 180) // 逆时针旋转π/9
      cans.font = '14px Microsoft JhengHei'; // 设置字体
      cans.fillStyle = 'rgba(17, 17, 17, 0.2)' // 设置字体的颜色
      cans.textAlign = 'left' // 文本对齐方式
      cans.textBaseline = 'Middle' // 文本基线
      cans.fillText(str, can.width / 3, can.height / 2); // 绘制文字
    
      const div = document.createElement('div') // 创建一个div元素
      div.id = id // 设置id
      div.style.pointerEvents = 'none' // 取消所有事件
      div.style.top = '0px'
      div.style.left = '0px'
      div.style.position = 'absolute'
      div.style.zIndex = '10000'
      div.style.width = containerWidth + 'px'
      div.style.height = containerHeight + 'px'
      div.style.background = 'url(' + dataURLtoBlob(can.toDataURL('image/png')) + ')'
      container.appendChild(div) // 追加到页面
      return id
    }
    
    function dataURLtoBlob(dataurl) { 
      let arr = dataurl.split(',');
      let mime = arr[0].match(/:(.*?);/)[1];
      let bstr = atob(arr[1]);
      let n = bstr.length;
      let u8arr = new Uint8Array(n);
      while (n--) { 
        u8arr[n] = bstr.charCodeAt(n);
      }
      return URL.createObjectURL(new Blob([u8arr], {  type: mime }));
    }
    
    let _interval = null;
    
    // 该方法只允许调用一次
    watermark.set = (str, container) => { 
      let id = setWatermark(str, container)
      _interval = setInterval(() => { 
        if (document.getElementById(id) === null) { 
          id = setWatermark(str, container)
        }
      }, 500)
      window.onresize = () => {   // 监听页面大小的变化
        setWatermark(str, container)
      }
    }
    
    export default watermark;

##### 12. 随机生成颜色 #####

getArrRandomly() { 
        const tagsColor = ["info", "warning", "danger", ""];
        var colorIndex = Math.floor(Math.random() * tagsColor.length);
        var color = tagsColor[colorIndex];
        tagsColor.splice(colorIndex, 1);
        return color;
      },

##### 13. 倒计时 #####

startTime(bolean, endTimer) { 
        let minute = 0
        let second = 0
        const that = this
        if (endTimer) { 
          ;[minute, second] = this.callinTime.split(':')
          minute = Number(minute)
          second = Number(second)
        }
        if (bolean === true) { 
          that.timer = setInterval(() => { 
            if (second >= 0) { 
              second = second + 1
            }
            if (second >= 60) { 
              second = 0
              minute = minute + 1
            }
            if (endTimer && that.callinTime === endTimer) { 
              this.suspendStatus = false
              this.callinTime = '00:00'
              return clearInterval(that.timer)
            }
            that.callinTime =
              (minute < 10 ? '0' + minute : minute) +
              ':' +
              (second < 10 ? '0' + second : second)
          }, 1000)
        } else { 
          clearInterval(that.timer)
        }
      }

##### 14. 金额转换 #####

function toThousands(num) { 
      if (num && num.toString().length > 4) { 
        const result = num.toString().replace(/(\d)(?=(?:\d{4})+$)/g, '$1.')
        return Number(result).toFixed(1) + 'w'
      }
      return num
    }

##### 15. 页面滚动监听事件，实现滚动加载 #####

// 页面滚动监听事件
    export function scrollToBottom(callBack: any) { 
      window.onscroll = () => { 
        let scrollTop = 0
        let bodyScrollTop = 0
        let documentScrollTop = 0
        if (document.body) { 
          bodyScrollTop = document.body.scrollTop
        }
        if (document.documentElement) { 
          documentScrollTop = document.documentElement.scrollTop
        }
        scrollTop =
          bodyScrollTop - documentScrollTop > 0 ? bodyScrollTop : documentScrollTop
        let scrollHeight = 0
        let bodyScrollHeight = 0
        let documentScrollHeight = 0
        if (document.body) { 
          bodyScrollHeight = document.body.scrollHeight
        }
        if (document.documentElement) { 
          documentScrollHeight = document.documentElement.scrollHeight
        }
        // 获取文档元素的内容垂直滚动的像素数
        scrollHeight =
          bodyScrollHeight - documentScrollHeight > 0
            ? bodyScrollHeight
            : documentScrollHeight
        let windowHeight = 0
        // 判断当前文档的渲染模式是混杂模式还是"标准模式"
        if (document.compatMode === 'CSS1Compat') { 
          // “标准模式”或者“准标准模式(almost standards mode)”
          windowHeight = document.documentElement.clientHeight
        } else { 
          // 混杂模式,值为"BackCompat"
          windowHeight = document.body.clientHeight
        }
        // 若文档内容垂直滚动像素 + 当前窗口高度的像素 === document.body.scrollHeight或document.documentElement.scrollHeight返回Promise对象，执行后续操作
        if (scrollHeight - (scrollTop + windowHeight) < 1000) { 
          callBack()
        }
      }
    }
    
    // 使用
    scrollToBottom(() => { 
       if (!this.loadMore) return false
       this.getDataList()
     })