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

防抖

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,
    });
  },
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,402评论 6 499
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,377评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,483评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,165评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,176评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,146评论 1 297
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,032评论 3 417
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,896评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,311评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,536评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,696评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,413评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,008评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,659评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,815评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,698评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,592评论 2 353

推荐阅读更多精彩内容