封装一个自己的工具库JS my-utils

2023-03-21  本文已影响0人  贺大大i

防抖

export function debounce(func, wait, immediate) {
    let timeout, args, context, timestamp, result;
    const later = function() {
        const last = +new Date() - timestamp;
        // 上次被包装函数被调用时间间隔 last 小于设定时间间隔 wait
        if (last < wait && last > 0) {
            timeout = setTimeout(later, wait - last);
        } else {
            timeout = null;
            if (!immediate) {
                result = func.apply(context, args);
                if (!timeout) context = args = null;
            }
        }
    };
    return function(...args) {
        context = this;
        timestamp = +new Date();
        const callNow = immediate && !timeout;
        // 如果延时不存在,重新设定延时
        if (!timeout) timeout = setTimeout(later, wait);
        if (callNow) {
            result = func.apply(context, args);
            context = args = null;
        }
        return result;
    };
}
//使用方式
searchChange: debounce(function() {。。。}, 500),

节流

/**
 * 节流
 * @param {函数名} fnName
 * @param {函数} fn
 * @param {时间间距} interval
 */
export function throttle(fnName, fn, interval = 500) {
    if (!fnName) return;
    if (throttleObj[fnName]) return; // 时间间隔内不执行
    throttleObj[fnName] = true;
    setTimeout(() => {
        fn.apply(this, arguments);
        delete throttleObj[fnName];
    }, interval);
}

金额精度处理

export function roundFractional(x, n) {
    return Math.round(x * Math.pow(10, n)) / Math.pow(10, n);
}

金额过万处理

export function million(value) {
    let num;
    if (value > 9999) {
        //大于9999显示x.xx万
        num = Math.floor(value / 1000) / 10 + "W";
    } else if (value < 9999 && value > -9999) {
        num = value;
    } else if (value < -9999) {
        //小于-9999显示-x.xx万
        num = -(Math.floor(Math.abs(value) / 1000) / 10) + "W";
    }
    return num;
}

获取url中的参数

export function getWindonHref() {
    const searchPar = new URLSearchParams(window.location.search);
    const paramsObj = {};
    for (const [key, value] of searchPar.entries()) {
        paramsObj[key] = value;
    }
    return paramsObj;
}

验证邮箱的正则表达式

export function isAvailableEmail(sEmail) {
    var reg = /^([\w+\.])+@\w+([.]\w+)+$/;
    return reg.test(sEmail);
}

校验数据类型

/**
 *校验数据类型
 * typeOf([])  // array
 * typeOf(null) // null
 */
export function typeOf(obj) {
    return Object.prototype.toString.call(obj).slice(8, -1).toLowerCase();
}

数组对象根据字段去重

/**
 *数组对象根据字段去重
 queArrayObject(myList,'id')
 * @param {要去重的数组} arr
 * @param {根据去重的字段名} key
 * @returns
 * 
 */
export function queArrayObject(arr = [], key = "id") {
    if (arr.length === 0) return;
    let list = [];
    const map = {};
    arr.forEach((item) => {
        if (!map[item[key]]) {
            map[item[key]] = item;
        }
    });
    list = Object.values(map);

    return list;
}

滚动到页面顶部

/**
 *滚动到页面顶部
 */
export function scrollToTop() {
    const height = document.documentElement.scrollTop || document.body.scrollTop;
    if (height > 0) {
        window.requestAnimationFrame(scrollToTop);
        window.scrollTo(0, height - height / 8);
    }
}

滚动到元素位置

/**
 *滚动到元素位置
 smoothScroll('#target'); // 平滑滚动到 ID 为 target 的元素
 * @param {*} element
 */
export function smoothScroll(element) {
    document.querySelector(element).scrollIntoView({
        behavior: "smooth",
    });
}

下载文件

/**
 * 下载文件
 *downloadFile('/api/download', {id}, '文件名')
 * @param {接口} api
 * @param {请求参数} params
 * @param {文件名} fileName
 * @param {get/post} type
 */
export function downloadFile(api, params, fileName, type = "get") {
    axios({
            method: type,
            url: api,
            responseType: "blob",
            params: params,
        })
        .then((res) => {
            let str = res.headers["content-disposition"];
            if (!res || !str) {
                return;
            }
            let suffix = "";
            // 截取文件名和文件类型
            if (str.lastIndexOf(".")) {
                fileName
                    ?
                    "" :
                    (fileName = decodeURI(
                        str.substring(str.indexOf("=") + 1, str.lastIndexOf("."))
                    ));
                suffix = str.substring(str.lastIndexOf("."), str.length);
            }
            //  如果支持微软的文件下载方式(ie10+浏览器)
            if (window.navigator.msSaveBlob) {
                try {
                    const blobObject = new Blob([res.data]);
                    window.navigator.msSaveBlob(blobObject, fileName + suffix);
                } catch (e) {
                    console.log(e);
                }
            } else {
                //  其他浏览器
                let url = window.URL.createObjectURL(res.data);
                let link = document.createElement("a");
                link.style.display = "none";
                link.href = url;
                link.setAttribute("download", fileName + suffix);
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
                window.URL.revokeObjectURL(link.href);
            }
        })
        .catch((err) => {
            console.log(err.message);
        });
}

遍历树节点

/**
 *遍历树节点
 * @param {树形结构列表} data
 * @param {回调} callback
 * @param {子集名字} childrenName
 * 示例:
 * let result
    foreachTree(data, (item) => {
    if (item.id === 9) {
     result = item
     }
    })
 */
export function foreachTree(data, callback, childrenName = "children") {
    for (let i = 0; i < data.length; i++) {
        callback(data[i]);
        if (data[i][childrenName] && data[i][childrenName].length > 0) {
            foreachTree(data[i][childrenName], callback, childrenName);
        }
    }
}

DOM元素转换成图片

  /**
   * DOM元素转换成图片
   * @param {id名} idName
   * @param {是否下载} download
   * @param {放大倍数} enlarge
   *注意安装html2canvas
   */
  DOMSwitchImage(idName, download = true, enlarge = 3) {
    let scrollX = 0;
    // switch (window.screen.width + '*' + window.screen.height) {
    //     case '1920*1080':
    //         scrollX = 5;
    //         break;
    //     case '1680*1050':
    //         scrollX = 0;
    //         break;
    //     case '1600*900':
    //         scrollX = -6;
    //         break;
    //     case '1440*900':
    //         scrollX = -85;
    //         break;
    //     case '1366*768':
    //         scrollX = -123;
    //         break;
    //     case '1280*800':
    //         scrollX = -165;
    //         break;
    //     case '800*600':
    //         scrollX = -200;
    //         break;
    // }
    return new Promise(async (resolve, reject) => {
      let id = document.getElementById(idName),
        height = parseInt(id.style.height) + 50 + "px",
        opts = {
          logging: true, // 启用日志记录以进行调试 (发现加上对去白边有帮助)
          useCORS: true, // 如果截图的内容里有图片,解决文件跨域问题
          allowTaint: true, // 否允许跨源图像污染画布
          backgroundColor: null, // 解决生成的图片有白边
          height: id.offsetHeight, //canvas 窗口的高度
          // height: height,
          width: id.offsetWidth,
          // windowWidth: document.body.scrollWidth,
          scrollX: scrollX,
          // x: 0,
          // y: height, // 页面在垂直方向的滚动距离
          // windowHeight: document.body.scrollHeight,
          windowHeight: height, // 获取y方向滚动条中的内容
          dpi: window.devicePixelRatio * enlarge, // 解决图片不清晰问题
          scale: enlarge,
        };
      document.body.scrollLeft =
        document.body.scrollTop =
        document.documentElement.scrollTop =
        document.documentElement.scrollLeft =
          0;
      let canvas = await html2canvas(id, opts);
      const context = canvas.getContext("2d");
      // 关闭抗锯齿
      context.mozImageSmoothingEnabled = false;
      context.msImageSmoothingEnabled = false;
      context.imageSmoothingEnabled = false;
      //
      let url = canvas.toDataURL("image/png");
      if (download) {
        this.labelDownload(url);
      }
      resolve(url);
    });
  },

bs64转文件流

  /**
   * bs64转文件流
   * @param {base64} dataurl
   * @param {*} filename
   */
  base64toFile(dataurl, filename = "file") {
    let arr = dataurl.split(",");
    let mime = arr[0].match(/:(.*?);/)[1];
    let suffix = mime.split("/")[1];
    let bstr = atob(arr[1]);
    let n = bstr.length;
    let u8arr = new Uint8Array(n);
    while (n--) {
      u8arr[n] = bstr.charCodeAt(n);
    }
    return new File([u8arr], `${filename}.${suffix}`, {
      type: mime,
    });
  },
上一篇下一篇

猜你喜欢

热点阅读