JS常用工具类

1.获取当前dom相对于document的偏移量

 1 const getOffset = el => {
 2     console.log(el);
 3     const {top, left} = el.getBoundingClientRect();
 4     const {scrollTop, scrollLeft} = document.body;
 5     return {
 6         top: top + scrollTop,
 7         left: left + scrollLeft
 8     };
 9 };
10 console.log(getOffset(document.querySelector('div')));
11 //{top: 200, left: 8}

2.禁止网页复制粘贴

1 document.querySelector('html').oncopy = () => false;
2 document.querySelector('html').onpaste = () => false;

3.去除字符串前面空格

1 const trimStart = str => str.replace(new RegExp('^([\\s]*)(.*)$'), '$2');
2 console.log(trimStart(' abc1'));
3 //abc

4.时间格式化

 1 Date.prototype.Format = function (fmt) {
 2     var o = {
 3         'M+': this.getMonth() + 1, //月份
 4         'd+': this.getDate(), //日
 5         'h+': this.getHours(), //小时
 6         'm+': this.getMinutes(), //分
 7         's+': this.getSeconds(), //秒
 8         'q+': Math.floor((this.getMonth() + 3) / 3), //季度
 9         S: this.getMilliseconds() //毫秒
10     };
11     if (/(y+)/.test(fmt)) {
12         fmt = fmt.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length));
13     }
14     for (var k in o) {
15         if (new RegExp('(' + k + ')').test(fmt)) {
16             fmt = fmt.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length));
17         }
18     }
19     return fmt;
20 };
21 console.log(new Date().Format('yyyy年MM月dd日 hh时mm分ss秒'));
22 //2020年08月09日 14时54分27秒
23 
24 console.log(new Date().Format('yyyy-MM-dd hh:mm:ss'));
25 //2020-08-09 14:54:27
26 
27 console.log(new Date().Format('yyyy-MM-dd'));
28 //2020-08-09
29 
30 console.log(new Date().Format('hh:mm:ss'));
31 //14:54:27
32 
33 console.log(new Date().Format('yyyy-MM'));
34 //2020-08
35 
36 console.log(new Date().Format('hh:mm'));
37 //14:54
38 
39 console.log(new Date().Format('MM-dd'));
40 //08-09

5.查询url参数

 1 String.prototype.urlQuery = function () {
 2     var url = this.split('?')[1].split('&');
 3     this.urlobj = {};
 4     for (var i = 0; i < url.length; i += 1) {
 5         var cell = url[i].split('=');
 6         var key = cell[0];
 7         var val = cell[1];
 8         this.urlobj['' + key + ''] = val;
 9     }
10     return this.urlobj;
11 };
12 var url = 'http://www/baidu.com?name=12&age=1000';
13 // 查询所有参数
14 console.log(url.urlQuery());
15 // {name: "12", age: "1000"}
16 // 查询某一个参数
17 console.log(url.urlQuery().name);

6.电话模糊处理

 1 function fn(option) {
 2     // 判断传入的手机号码位数，不符合则返回提示
 3     if (String(option.mobile).length > 11) {
 4         return '手机号码格式错误';
 5     } else {
 6         let newmobile = String(option.mobile).slice(0, option.start) + '*'.repeat(option.num) + String(option.mobile).slice(option.start + option.num, String(option.mobile).length);
 7         // 如果新的手机号位数过长，则返回固定11位手机号
 8         return newmobile.slice(0, 11);
 9     }
10 }
11 console.log(fn({mobile: 13012345678, start: 3, num: 3}));
12 //130***45678

7.rgb转换为16进制

 1 function colorRGBtoHex(color) {
 2     var rgb = color.split(',');
 3     var r = parseInt(rgb[0].split('(')[1]);
 4     var g = parseInt(rgb[1]);
 5     var b = parseInt(rgb[2].split(')')[0]);
 6     var hex = '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
 7     return hex;
 8 }
 9 console.log(colorRGBtoHex('rgb(0,0,0)'));
10 //#000000

8.对象扁平化

 1 const flatten = function (obj) {
 2     var result = {};
 3     function recurse(src, prop) {
 4         var toString = Object.prototype.toString;
 5         if (toString.call(src) == '[object Object]') {
 6             var isEmpty = true;
 7             for (var p in src) {
 8                 isEmpty = false;
 9                 recurse(src[p], prop ? prop + '.' + p : p);
10             }
11             if (isEmpty && prop) {
12                 result[prop] = {};
13             }
14         } else if (toString.call(src) == '[object Array]') {
15             var len = src.length;
16             if (len > 0) {
17                 src.forEach(function (item, index) {
18                     recurse(item, prop ? prop + '.[' + index + ']' : index);
19                 });
20             } else {
21                 result[prop] = [];
22             }
23         } else {
24             result[prop] = src;
25         }
26     }
27     recurse(obj, '');
28     const _ = [];
29     Object.keys(result).forEach(item => {
30         _.push(`${item}=${result[item]}`);
31     });
32 
33     return _.join('&');
34 };
35 
36 console.log(flatten({a: {b: {c: {d: 1, e: 2}, f: 3}, h: 5}, g: 4}));
37 // a.b.c.d=1&a.b.c.e=2&a.b.f=3&a.h=5&g=4

 9.防抖

const debounce = (func, wait = 3000, immediate = true) => {
            let timeout = null;
            return function () {
                let context = this;
                let args = arguments;
                if (timeout) clearTimeout(timeout);
                if (immediate) {
                    var callNow = !timeout; //true
                    timeout = setTimeout(() => {
                        timeout = null;
                    }, wait); //定时器ID
                    if (callNow) func.apply(context, args);
                } else {
                    timeout = setTimeout(function () {
                        func.apply(context, args);
                    }, wait);
                }
            };
        };

10.节流

// 时间戳方案
        function throttle(fn, wait = 2000) {
            var pre = Date.now();
            return function () {
                var context = this;
                var args = arguments;
                var now = Date.now();
                if (now - pre >= wait) {
                    fn.apply(context, args);
                    pre = Date.now();
                }
            };
        }
        // 定时器方案
        function throttle(fn, wait = 3000) {
            var timer = null;
            return function () {
                var context = this;
                var args = arguments;
                if (!timer) {
                    timer = setTimeout(function () {
                        fn.apply(context, args);
                        timer = null;
                    }, wait);
                }
            };
        }

 11.使用iframe下载文件

const exportFile = ({ url, params }) => {
    if (url) {
        var _iframe = document.getElementById('download-file');
        if (_iframe) {
            document.body.removeChild(_iframe);
        }
        var _iframe = document.createElement('iframe');
        _iframe.style.display = 'none';
        _iframe.id = 'download-file';
        if (params) {
            _iframe.src = `${url}?${parseParams(params)}`;
        } else {
            _iframe.src = url;
        }
        document.body.appendChild(_iframe);
    }
};

12.将参数转化为url拼接格式

const parseParams = params => {
    if (params && typeof params == 'object') {
        let str = '';
        Object.keys(params).forEach(key => {
            str += `${key}=${params[key]}&`;
        });
        return str.substring(0, str.length - 1);
    }
};

13.获取文件后缀

cosnt getFileExt = fileName => {
    //获取最后一个.的位置
    var index = fileName.lastIndexOf('.');
    //获取后缀
    var ext = fileName.substr(index + 1);
    return ext;
};

14.获取url中的文件名

// url = 'http://xxxx/xxx/xx/file.png'
const getFileName = url => {
    let num = url.lastIndexOf('/') + 1;
    let name = url.substring(num);
    return name;
};

15.判断文件类型是否符合

const getFileType = (ext, target = ['xls', 'xlsx']) => {
    return target.indexOf(ext.toLowerCase()) !== -1;
};

16.是否以指定名称开头

const isAppointName = (name, fullName) => {
    if (name && fullName) {
        const nameLen = name.length;
        return fullName.substr(0, nameLen) === name;
    }
};
isAppointName(test,test123)
//true

17.数组中根据某个属性排序

const compareByProp = prop => {
    return function (obj1, obj2) {
        var val1 = obj1[prop];
        var val2 = obj2[prop];
        if (!isNaN(Number(val1)) && !isNaN(Number(val2))) {
            val1 = Number(val1);
            val2 = Number(val2);
        }
        if (val1 < val2) {
            return -1;
        } else if (val1 > val2) {
            return 1;
        } else {
            return 0;
        }
    };
};

18.生成UUID

const generateUUID = () => {
    var d = new Date().getTime();
    if (window.performance && typeof window.performance.now === 'function') {
        d += performance.now(); //use high-precision timer if available
    }
    var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
        var r = (d + Math.random() * 16) % 16 | 0;
        d = Math.floor(d / 16);
        return (c == 'x' ? r : (r & 0x3) | 0x8).toString(16);
    });
    return uuid;
};

19.将file转为blob

const fileToBlob = file => {
    return new Promise(resolve => {
        resolve(window.URL.createObjectURL(file));
    });
};

20.将file转为base64

const fileToBase64 = file => {
    return new Promise(resolve => {
        let fileReader = new FileReader();
        fileReader.readAsDataURL(file);
        fileReader.onload = () => {
            resolve(fileReader.result);
        };
    });
};

21.将base64转为file

       // base64转file
     const  base64Tofile = (base64, filename) => {
            var arr = base64.split(','),
                mime = arr[0].match(/:(.*?);/)[1],
                bstr = atob(arr[1]),
                n = bstr.length,
                u8arr = new Uint8Array(n);
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n);
            }
            return new File([u8arr], filename, { type: mime });
        },

22.将file地址转为base64

const fileUrlToBase64 = src => {
    function getBase64Image(img, width, height) {
        var canvas = document.createElement('canvas');
        canvas.width = width ? width : img.width;
        canvas.height = height ? height : img.height;
        const ctx = canvas.getContext('2d');
        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
        var dataURL = canvas.toDataURL();
        return dataURL;
    }
    return new Promise(resolve => {
        const image = new Image();
        image.crossOrigin = '';
        image.src = src;
        image.onload = function () {
            resolve(getBase64Image(image));
        };
    });
};

23.是否是空对象

const isEmptyObject = obj => {
    return Object.keys(obj).length === 0;
};

 24.压缩图片

  const compressImg = ({ width, quality = 0.7, file, maxSize }) => {
            const _this = this;
            // 最大接受图片尺寸 2M
            maxSize = maxSize || 2 * 1024 * 1024;
            return new Promise(async (resolve, reject) => {
                if (!file) {
                    reject(new Error('img 不存在'));
                } else {
                    // 获取图片类型
                    let imgType = file.type;
                    // 获取图片名称
                    let imgName = file.name;
                    // 获取图片base64
                    let base64 = await this.fileToBase64(file);
                    let image = new Image();
                    image.src = base64;
                    image.onload = function () {
                        // 获得长宽比例
                        const scale = this.width / this.height;
                        //创建一个canvas
                        const canvas = document.createElement('canvas');
                        //获取上下文
                        const context = canvas.getContext('2d');
                        //获取压缩后的图片宽度,如果width为-1，默认原图宽度
                        canvas.width = width ? width : this.width;
                        canvas.height = width ? parseInt(width / scale) : this.height;
                        //把图片绘制到canvas上面
                        context.drawImage(image, 0, 0, canvas.width, canvas.height);
                        //压缩图片，获取到新的base64Url
                        const newBase64 = canvas.toDataURL(imgType, quality);
                        //将base64转化成文件流
                        const resultFile = _this.base64Tofile(newBase64, imgName);
                        let blobSrc = '';
                        if (resultFile.size > maxSize) {
                            _this.compressImg({ file: resultFile }).then(file => resolve(file));
                        } else {
                            // 压缩图片 获取到新的blob地址
                            canvas.toBlob(
                                function (blob) {
                                    blobSrc = URL.createObjectURL(blob);
                                    resolve({ resultFile, blobSrc, newBase64 });
                                },
                                imgType,
                                quality
                            );
                        }
                    };
                }
            });
        }