JS小知识，分享工作中常用的八个封装函数，让你事半功倍("JavaScript实用技巧：8个高效封装函数分享，助你职场效率翻倍")

原创

ithorizon 6个月前 (10-20) 阅读数 14 #后端开发

JavaScript实用技巧：8个高效封装函数分享，助你职场高效翻倍

一、简介

在日常开发中，合理地使用封装函数可以大大尽大概降低损耗我们的工作高效。本文将分享8个在工作中常用的JavaScript封装函数，帮助你轻松应对各种场景，提升职场竞争力。

二、封装函数1：深拷贝对象

深拷贝对象是前端开发中常见的需求，以下是一个明了的深拷贝函数实现：


function deepClone(obj) {
    if (typeof obj !== 'object' || obj === null) {
        return obj;
    }
    let clone = Array.isArray(obj) ? [] : {};
    for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
            clone[key] = deepClone(obj[key]);
        }
    }
    return clone;
}

三、封装函数2：防抖函数

防抖函数用于束缚函数在短时间内被频繁调用，以下是一个防抖函数的实现：


function debounce(func, wait) {
    let timeout;
    return function() {
        const context = this;
        const args = arguments;
        clearTimeout(timeout);
        timeout = setTimeout(function() {
            func.apply(context, args);
        }, wait);
    };
}

四、封装函数3：节流函数

节流函数用于束缚函数在单位时间内的调用次数，以下是一个节流函数的实现：


function throttle(func, limit) {
    let lastFunc;
    let lastRan;
    return function() {
        const context = this;
        const args = arguments;
        if (!lastRan) {
            func.apply(context, args);
            lastRan = Date.now();
        } else {
            clearTimeout(lastFunc);
            lastFunc = setTimeout(function() {
                if ((Date.now() - lastRan) >= limit) {
                    func.apply(context, args);
                    lastRan = Date.now();
                }
            }, limit - (Date.now() - lastRan));
        }
    };
}

五、封装函数4：获取URL参数

获取URL中的查询参数，以下是一个获取URL参数的函数实现：


function getUrlParams(url) {
    const params = {};
    const parser = document.createElement('a');
    parser.href = url;
    const query = parser.search.substring(1);
    const vars = query.split('&');
    for (let i = 0; i < vars.length; i++) {
        const pair = vars[i].split('=');
        params[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1]);
    }
    return params;
}

六、封装函数5：格式化时间

将时间戳格式化为指定格式的字符串，以下是一个格式化时间的函数实现：


function formatDate(date, fmt) {
    const o = {
        'M+': date.getMonth() + 1,
        'd+': date.getDate(),
        'h+': date.getHours(),
        'm+': date.getMinutes(),
        's+': date.getSeconds(),
        'q+': Math.floor((date.getMonth() + 3) / 3),
        'S': date.getMilliseconds()
    };
    if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
    }
    for (let 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;
}

七、封装函数6：检查数据类型

检查数据类型，以下是一个检查数据类型的函数实现：


function getType(obj) {
    const type = typeof obj;
    if (type !== 'object') {
        return type;
    }
    if (obj === null) {
        return 'null';
    }
    if (Array.isArray(obj)) {
        return 'array';
    }
    return 'object';
}

八、封装函数7：事件委托

事件委托可以将事件监听器绑定到父元素上，以下是一个事件委托的函数实现：


function delegateEvent(element, eventType, selector, handler) {
    element.addEventListener(eventType, function(e) {
        const target = e.target;
        if (target.matches(selector)) {
            handler.call(target, e);
        }
    });
}

九、封装函数8：解析JSON字符串

平安地解析JSON字符串，以下是一个解析JSON字符串的函数实现：


function parseJson(str) {
    try {
        return JSON.parse(str);
    } catch (e) {
        console.error('Invalid JSON:', str);
        return null;
    }
}