JS常用工具类

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

const getOffset = el => {
    console.log(el);
    const {top, left} = el.getBoundingClientRect();
    const {scrollTop, scrollLeft} = document.body;
    return {
        top: top + scrollTop,
        left: left + scrollLeft
    };
};
console.log(getOffset(document.querySelector('div')));
//{top: 200, left: 8}

 

2.禁止网页复制粘贴

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

 

3.去除字符串前面空格

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

 

4.时间格式化

Date.prototype.Format = function (fmt) {
    var o = {
        'M+': this.getMonth() + 1, //月份
        'd+': this.getDate(), //日
        'h+': this.getHours(), //小时
        'm+': this.getMinutes(), //分
        's+': this.getSeconds(), //秒
        'q+': Math.floor((this.getMonth() + 3) / 3), //季度
        S: this.getMilliseconds() //毫秒
    };
    if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length));
    }
    for (var k in o) {
        if (new RegExp('(' + k + ')').test(fmt)) {
            fmt = fmt.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length));
        }
    }
    return fmt;
};
console.log(new Date().Format('yyyy年MM月dd日 hh时mm分ss秒'));
//2020年08月09日 14时54分27秒

console.log(new Date().Format('yyyy-MM-dd hh:mm:ss'));
//2020-08-09 14:54:27

console.log(new Date().Format('yyyy-MM-dd'));
//2020-08-09

console.log(new Date().Format('hh:mm:ss'));
//14:54:27

console.log(new Date().Format('yyyy-MM'));
//2020-08

console.log(new Date().Format('hh:mm'));
//14:54

console.log(new Date().Format('MM-dd'));
//08-09

5.查询url参数

String.prototype.urlQuery = function () {
    var url = this.split('?')[1].split('&');
    this.urlobj = {};
    for (var i = 0; i < url.length; i += 1) {
        var cell = url[i].split('=');
        var key = cell[0];
        var val = cell[1];
        this.urlobj['' + key + ''] = val;
    }
    return this.urlobj;
};
var url = 'http://www/baidu.com?name=12&age=1000';
// 查询所有参数
console.log(url.urlQuery());
// {name: "12", age: "1000"}
// 查询某一个参数
console.log(url.urlQuery().name);

6.电话模糊处理

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

 

7.rgb转换为16进制

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

 

8.对象扁平化

const flatten = function (obj) {
    var result = {};
    function recurse(src, prop) {
        var toString = Object.prototype.toString;
        if (toString.call(src) == '[object Object]') {
            var isEmpty = true;
            for (var p in src) {
                isEmpty = false;
                recurse(src[p], prop ? prop + '.' + p : p);
            }
            if (isEmpty && prop) {
                result[prop] = {};
            }
        } else if (toString.call(src) == '[object Array]') {
            var len = src.length;
            if (len > 0) {
                src.forEach(function (item, index) {
                    recurse(item, prop ? prop + '.[' + index + ']' : index);
                });
            } else {
                result[prop] = [];
            }
        } else {
            result[prop] = src;
        }
    }
    recurse(obj, '');
    const _ = [];
    Object.keys(result).forEach(item => {
        _.push(`${item}=${result[item]}`);
    });

    return _.join('&');
};

console.log(flatten({a: {b: {c: {d: 1, e: 2}, f: 3}, h: 5}, g: 4}));
// 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
                            );
                        }
                    };
                }
            });
        }