美文网首页
封装一个自己的工具库JS my-utils

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

作者: 贺大大i | 来源:发表于2023-03-21 14:21 被阅读0次

    防抖

    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,
        });
      },
    

    相关文章

      网友评论

          本文标题:封装一个自己的工具库JS my-utils

          本文链接:https://www.haomeiwen.com/subject/wtsmrdtx.html