前端使用次数最多的一些实用工具封装

更新时间：2026年05月28日 10:30:06 作者：一支鱼

在前端开发中,封装是实现代码复用、提高可维护性的重要手段,这篇文章主要介绍了前端使用次数最多的一些实用工具封装,文中通过代码介绍的非常详细,需要的朋友可以参考下

1. 数据处理工具

1.1 数组去重并保持顺序

功能分析：去除数组中的重复元素，并保持元素的原始顺序。在处理需要保持特定顺序的数据，如用户操作历史记录等场景中很有用。
代码实现：

const arrayUtils = {
    uniqueArrayPreserveOrder: function <T>(arr: T[]): T[] {
        const seen: { [key: string]: boolean } = {};
        return arr.filter((item) => {
            const key = typeof item === 'object'? JSON.stringify(item) : item;
            if (seen[key]) {
                return false;
            }
            seen[key] = true;
            return true;
        });
    }
};

使用示例：

const arrWithDuplicates = [1, { value: 'a' }, 2, { value: 'a' }, 3];
const uniqueArr = arrayUtils.uniqueArrayPreserveOrder(arrWithDuplicates);
console.log(uniqueArr); 
// 输出: [1, { value: 'a' }, 2, 3]

1.2 数组分组

功能分析：根据给定的分组函数，将数组元素分成不同的组。常用于数据统计、分类展示等场景，比如将订单按月份分组。
代码实现：

const arrayUtils = {
    groupArray: function <T, K>(arr: T[], keySelector: (item: T) => K): { [key: string]: T[] } {
        return arr.reduce((acc, item) => {
            const key = keySelector(item).toString();
            if (!acc[key]) {
                acc[key] = [];
            }
            acc[key].push(item);
            return acc;
        }, {} as { [key: string]: T[] });
    }
};

使用示例：

const orders = [
    { id: 1, date: new Date('2024 - 01 - 10'), amount: 100 },
    { id: 2, date: new Date('2024 - 02 - 15'), amount: 200 },
    { id: 3, date: new Date('2024 - 01 - 20'), amount: 150 }
];
const groupedOrders = arrayUtils.groupArray(orders, order => order.date.getMonth());
console.log(groupedOrders); 
// 输出: { '0': [ { id: 1, date: 2024 - 01 - 10, amount: 100 }, { id: 3, date: 2024 - 01 - 20, amount: 150 } ], '1': [ { id: 2, date: 2024 - 02 - 15, amount: 200 } ] }

2. DOM 操作工具

2.1 获取元素距离视口顶部的距离

功能分析：获取元素相对于浏览器视口顶部的距离，对于实现视口相关的交互，如元素进入视口时触发动画等功能很重要。
代码实现：

const domUtils = {
    getElementTopRelativeToViewport: function (element: HTMLElement): number {
        const rect = element.getBoundingClientRect();
        return rect.top + window.pageYOffset;
    }
};

使用示例：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF - 8">
    <title>DOM Utils Example</title>
    <style>
        #testDiv {
            margin - top: 200px;
        }
    </style>
</head>

<body>
    <div id="testDiv">Test Div</div>
    <script lang="ts">
        const testDiv = document.getElementById('testDiv') as HTMLElement;
        const divTop = domUtils.getElementTopRelativeToViewport(testDiv);
        console.log(divTop); 
    </script>
</body>

</html>

2.2 批量添加事件监听器

功能分析：为多个元素一次性添加相同类型的事件监听器，简化事件绑定操作，提高代码效率。适用于批量处理同类元素的交互，如按钮组的点击事件。
代码实现：

const domUtils = {
    addEventListeners: function (selector: string, eventType: string, handler: (event: Event) => void) {
        const elements = document.querySelectorAll(selector);
        elements.forEach((element) => {
            element.addEventListener(eventType, handler);
        });
    }
};

使用示例：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF - 8">
    <title>DOM Utils Example</title>
</head>

<body>
    <button class="actionButton">Button 1</button>
    <button class="actionButton">Button 2</button>
    <script lang="ts">
        domUtils.addEventListeners('.actionButton', 'click', (event) => {
            console.log('Button clicked');
        });
    </script>
</body>

</html>

3. 网络请求工具（基于 Axios）

3.1 带重试机制的网络请求封装

功能分析：在网络请求失败时，自动进行重试，提高请求的成功率。对于不稳定的网络环境或偶尔出现的短暂故障很实用。
代码实现：

import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios';

interface ResponseData<T> {
    code: number;
    message: string;
    data: T;
}

const httpUtils: {
    instance: AxiosInstance;
    init: () => void;
    get: <T>(url: string, params?: object, retries = 3): Promise<T>;
    post: <T>(url: string, data?: object, retries = 3): Promise<T>;
    put: <T>(url: string, data?: object, retries = 3): Promise<T>;
    delete: <T>(url: string, retries = 3): Promise<T>;
} = {
    instance: axios.create({
        baseURL: 'https://your - api - base - url.com',
        timeout: 5000,
        headers: {
            'Content - Type': 'application/json'
        }
    }),
    init: function () {
        this.instance.interceptors.request.use((config: AxiosRequestConfig) => {
            const token = localStorage.getItem('token');
            if (token) {
                config.headers.Authorization = `Bearer ${token}`;
            }
            return config;
        }, error => {
            return Promise.reject(error);
        });

        this.instance.interceptors.response.use((response: AxiosResponse<ResponseData<any>>) => {
            if (response.data.code!== 200) {
                throw new Error(response.data.message);
            }
            return response.data.data;
        }, error => {
            console.error('Request error:', error);
            return Promise.reject(error);
        });
    },
    get: async function <T>(url: string, params: object = {}, retries = 3): Promise<T> {
        let attempt = 0;
        while (attempt < retries) {
            try {
                const response = await this.instance.get(url, { params });
                return response.data;
            } catch (error) {
                attempt++;
                if (attempt === retries) {
                    throw error;
                }
            }
        }
        throw new Error('Max retries reached');
    },
    post: async function <T>(url: string, data: object = {}, retries = 3): Promise<T> {
        let attempt = 0;
        while (attempt < retries) {
            try {
                const response = await this.instance.post(url, data);
                return response.data;
            } catch (error) {
                attempt++;
                if (attempt === retries) {
                    throw error;
                }
            }
        }
        throw new Error('Max retries reached');
    },
    put: async function <T>(url: string, data: object = {}, retries = 3): Promise<T> {
        let attempt = 0;
        while (attempt < retries) {
            try {
                const response = await this.instance.put(url, data);
                return response.data;
            } catch (error) {
                attempt++;
                if (attempt === retries) {
                    throw error;
                }
            }
        }
        throw new Error('Max retries reached');
    },
    delete: async function <T>(url: string, retries = 3): Promise<T> {
        let attempt = 0;
        while (attempt < retries) {
            try {
                const response = await this.instance.delete(url);
                return response.data;
            } catch (error) {
                attempt++;
                if (attempt === retries) {
                    throw error;
                }
            }
        }
        throw new Error('Max retries reached');
    }
};

httpUtils.init();
export default httpUtils;

使用示例：

import httpUtils from './httpUtils';

// GET请求
httpUtils.get('/api/data', { param1: 'value1' }, 5)
  .then(data => {
        console.log(data);
    })
  .catch(error => {
        console.error(error);
    });

4. 存储管理工具

4.1 本地存储有效期管理

功能分析：为本地存储的数据设置有效期，过期后自动删除。适用于存储一些临时数据，如用户登录的短期凭证等。
代码实现：

const storageUtils = {
    setLocalStorageWithExpiry: function (key: string, value: any, durationInMinutes: number) {
        const data = {
            value,
            expiry: new Date().getTime() + durationInMinutes * 60 * 1000
        };
        localStorage.setItem(key, JSON.stringify(data));
    },
    getLocalStorageWithExpiry: function (key: string): any {
        const item = localStorage.getItem(key);
        if (!item) {
            return null;
        }
        const { value, expiry } = JSON.parse(item);
        if (new Date().getTime() > expiry) {
            localStorage.removeItem(key);
            return null;
        }
        return value;
    }
};

使用示例：

storageUtils.setLocalStorageWithExpiry('tempToken', 'abc123', 30); 
const tempToken = storageUtils.getLocalStorageWithExpiry('tempToken');
console.log(tempToken);

5. 日期时间处理工具

5.1 获取指定月份的所有日期

功能分析：获取指定年份和月份的所有日期，在日历组件开发等场景中经常用到。
代码实现：

const dateTimeUtils = {
    getDatesOfMonth: function (year: number, month: number): Date[] {
        const dates: Date[] = [];
        const lastDay = new Date(year, month + 1, 0).getDate();
        for (let day = 1; day <= lastDay; day++) {
            dates.push(new Date(year, month, day));
        }
        return dates;
    }
};

使用示例：

const dates = dateTimeUtils.getDatesOfMonth(2024, 9); 
dates.forEach(date => {
    console.log(date.toISOString().split('T')[0]);
});
// 输出2024年10月的所有日期

5.2 计算两个日期之间的工作日天数

功能分析：计算两个日期之间的工作日天数，不包括周末。在项目进度管理、考勤计算等场景中有实际应用。
代码实现：

const dateTimeUtils = {
    getWorkingDaysBetween: function (startDate: Date, endDate: Date): number {
        let currentDate = new Date(startDate);
        let workingDays = 0;
        while (currentDate <= endDate) {
            const dayOfWeek = currentDate.getDay();
            if (dayOfWeek!== 0 && dayOfWeek!== 6) {
                workingDays++;
            }
            currentDate.setDate(currentDate.getDate() + 1);
        }
        return workingDays;
    }
};

使用示例：

const start = new Date('2024 - 10 - 01');
const end = new Date('2024 - 10 - 10');
const workingDays = dateTimeUtils.getWorkingDaysBetween(start, end);
console.log(workingDays); 
// 计算2024年10月1日到10月10日之间的工作日天数

总结

到此这篇关于前端使用次数最多的一些实用工具封装的文章就介绍到这了,更多相关前端工具封装内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

JavaScript前端实用的工具函数封装

JS不间断向上滚动效果代码
不间断向上滚动的效果，想必大家都有见到过吧，本文也为大家准备一个使用js实现的不间断向上滚动效果，感兴趣的朋友可以参考下
2013-12-12
uni-app使用uniCloud实现图形验证码(uni-captcha)详细过程
这篇文章主要给大家介绍了关于uni-app使用uniCloud实现图形验证码(uni-captcha)的相关资料,实际开发工作中在登陆的时候经常需要图形验证码,需要的朋友可以参考下
2023-07-07
JavaScript数值转换的三种方式总结
JavaScript数值转换一般有三种方式，Number(param)函数、parseInt(param)、parseIFloat(param),下面为大家详细介绍，需要的朋友可以参考下
2014-07-07
javascript创建cookie、读取cookie
这篇文章主要介绍了javascript创建cookie、读取cookie的操作方法，内容简单易学，感兴趣的小伙伴们可以参考一下
2016-03-03
详解js中Array的方法及技巧
这篇文章我们给大家总结了关于js中Array的方法及技巧，有需要的朋友们可以学习参考下。
2018-09-09
js数组去重的11种方法
这篇文章主要介绍了js数组去重的11种方法，对js数组感兴趣的同学，可以把这11种方法实验一下
2021-04-04
js中哈希表的几种用法总结
本篇文章只要是对js中哈希表的几种用法进行了总结介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2014-01-01
温习Javascript基础语法之词法结构
javascript是一门简单的语言，也是一门复杂的语言。这篇文章主要介绍了温习Javascript基础语法之词法结构的相关资料,需要的朋友可以参考下
2016-05-05
微信小程序 JS动态修改样式的实现代码
这篇文章主要介绍了微信小程序 JS动态修改样式的实现代码,原理是绑定数据，然后动态的修改数据，从而实现动态样式的改变而已,需要的朋友可以参考下
2017-02-02
前端JavaScript彻底解决重复请求问题的五种方案
在前端开发中,重复请求是一个常见且棘手的问题,比如用户快速点击保存按钮导致生成多条重复单据,或者列表页频繁刷新造成服务器压力飙升,本文将系统梳理重复请求的解决方案,从基础到进阶进行对比分析,并结合实际代码案例解决这一痛点,需要的朋友可以参考下
2025-11-11