分享一个平常用的工具包：前端开发实用工具函数集合

在日常前端开发中，我们经常会遇到各种重复性的功能需求。经过多个项目的积累，我整理了一套实用的工具函数，涵盖了数据类型判断、时间处理、颜色转换、数据校验等常见场景。

一、数据类型判断工具

1. 基础类型判断

javascript 复制代码

// 字符串判断
export function isString(arg) {
    return Object.prototype.toString.call(arg) == "[object String]";
}

// 数字判断（包含有效性验证）
export function isNumber(arg) {
    return (
        Object.prototype.toString.call(arg) == "[object Number]" &&
        /[\d\.]+/.test(String(arg))
    );
}

// 其他基础类型判断
export function isUndefined(arg) {
    return arg === void 0;
}

export function isBoolean(arg) {
    return Object.prototype.toString.call(arg) === "[object Boolean]";
}

export function isFunction(arg) {
    if (!arg) return false;
    var type = Object.prototype.toString.call(arg);
    return type == "[object Function]" || type == "[object AsyncFunction]";
}

2. 复杂类型判断

javascript 复制代码

// 数组判断（兼容不同环境）
export function isArray(arg) {
    if (Array.isArray && isFunction(isArray)) {
        return Array.isArray(arg);
    }
    return Object.prototype.toString.call(arg) === "[object Array]";
}

// 对象判断（排除null）
export function isObject(arg) {
    if (arg == null) {
        return false;
    }
    return Object.prototype.toString.call(arg) == "[object Object]";
}

// Buffer/Uint8Array判断
export function isBuffer(arg) {
    if (arg == null) return false;
    return Object.prototype.toString.call(arg) == "[object Uint8Array]";
}

// ASCII字符串判断
export function isAscii(str) {
    if (!str) return false;
    return /^[\x00-\x7F]*$/.test(str);
}

二、时间日期处理工具

1. 时间格式化基础函数

javascript 复制代码

// 数字补零格式化
export function formatNumber(n) {
    const str = n.toString();
    return str[1] ? str : `0${str}`;
}

2. 时间格式转换

javascript 复制代码

// 秒数转时间格式
export function formatSeconds(second, type = 'HH:MM:SS') {
    let hour = 0, middle = 0, theTime = parseInt(second);
    
    if (theTime > 60) {
        middle = parseInt(theTime / 60);
        theTime = parseInt(theTime % 60);
        if (middle > 60) {
            hour = parseInt(middle / 60);
            middle = parseInt(middle % 60);
        }
    }
    
    let format = type;
    format = format.replace('HH', formatNumber(hour));
    format = format.replace('MM', formatNumber(middle));
    format = format.replace('SS', formatNumber(theTime));
    
    return format;
}

// 时间戳格式化
export function formatTimeStamp(timeDate, type = 'YYYY-MM-dd HH:mm:ss') {
    let time = new Date(timeDate.length < 13 ? timeDate * 1000 : timeDate);
    
    const year = time.getFullYear();
    const month = time.getMonth() + 1;
    const day = time.getDate();
    const hour = time.getHours();
    const minute = time.getMinutes();
    const second = time.getSeconds();
    
    let format = type;
    format = format.replace('YYYY', formatNumber(year));
    format = format.replace('MM', formatNumber(month));
    format = format.replace('dd', formatNumber(day));
    format = format.replace('HH', formatNumber(hour));
    format = format.replace('mm', formatNumber(minute));
    format = format.replace('ss', formatNumber(second));
    
    return format;
}

3. 相对时间显示

javascript 复制代码

// 时间戳转相对时间（如：3小时前）
export function formatTimeAgo(time) {
    if (null == time) return;
    
    let ms = parseInt(new Date().getTime()) - parseInt(time);
    let s = parseInt(ms / 1000);
    let m = parseInt(s / 60);
    let h = parseInt(m / 60);
    let d = parseInt(h / 24);
    
    if (m < 1) return s + "秒前";
    if (h < 1) return m + "分钟前";
    if (h > 24) return Math.ceil(d) + "天前";
    return h + "小时前";
}

三、颜色处理工具

1. 颜色格式转换

javascript 复制代码

// 16进制颜色转换
export function cvtColor2Hex(color) {
    return color.replace("#", "0x");
}

// 16进制转RGBA
export function hexToRgba(hexColor = "#000000", alpha = 100) {
    let hex = hexColor.replace('#', '');
    let r = parseInt(hex.substring(0, 2), 16);
    let g = parseInt(hex.substring(2, 4), 16);
    let b = parseInt(hex.substring(4, 6), 16);
    return `rgba(${r}, ${g}, ${b}, ${alpha / 100})`;
}

// 16进制转RGB对象
export function hexToRgbObj(hex) {
    hex = hex.replace(/^[#|0x]/, '');
    const bigint = parseInt(hex, 16);
    return {
        r: (bigint >> 16) & 255,
        g: (bigint >> 8) & 255,
        b: bigint & 255
    };
}

2. 特殊颜色格式处理

javascript 复制代码

// RGB565格式转换（嵌入式设备常用）
export function hexToRgb565(hex) {
    if (!hex) return hex;
    
    hex = hex.replace(/^#/, '');
    let r = parseInt(hex.substring(0, 2), 16);
    let g = parseInt(hex.substring(2, 4), 16);
    let b = parseInt(hex.substring(4, 6), 16);
    
    let r565 = ((r >> 3) << 11);
    let g565 = ((g >> 2) << 5);
    let b565 = (b >> 3);
    
    return (r565 | g565 | b565).toString(16);
}

// RGB565转RGB888
export function rgb565To888(rgb565) {
    let color565 = isNumber(rgb565) ? rgb565 : (rgb565[1] << 8) | rgb565[0];
    
    let R565 = (color565 >> 11) & 0x1F;
    let G565 = (color565 >> 5) & 0x3F;
    let B565 = color565 & 0x1F;
    
    return (R565 << 19) | (G565 << 10) | (B565 << 3);
}

3. 颜色渐变生成

javascript 复制代码

// 生成颜色渐变数组
export function getGradientColor(start, end, steps) {
    const startRgb = hexToRgbObj(start);
    const endRgb = hexToRgbObj(end);
    let gradient = [];
    
    if (steps < 2) {
        gradient.push(`rgba(${startRgb.r},${startRgb.g},${startRgb.b})`);
        return gradient;
    }
    
    for (let i = 0; i < steps; i++) {
        const ratio = i / (steps - 1);
        const r = Math.round(endRgb.r * ratio + startRgb.r * (1 - ratio));
        const g = Math.round(endRgb.g * ratio + startRgb.g * (1 - ratio));
        const b = Math.round(endRgb.b * ratio + startRgb.b * (1 - ratio));
        gradient.push(`rgb(${r},${g},${b})`);
    }
    
    return gradient;
}

四、数据校验和处理工具

1. 数据安全校验

javascript 复制代码

// 类型安全验证
export function verifyType(fn, value, defaultValue = value) {
    if (!fn(value)) {
        console.warn(`输入值${value}不符合${fn}规则，返回默认值${defaultValue}`);
        return defaultValue;
    }
    return value;
}

2. 数据排序和转换

javascript 复制代码

// 对象数组按属性排序
export function sortBy(prop, reverse = 0) {
    return function(item1, item2) {
        var value1 = item1[prop];
        var value2 = item2[prop];
        if (reverse) return value2 < value1 ? -1 : (value2 > value1 ? 1 : 0);
        return value1 < value2 ? -1 : (value1 > value2 ? 1 : 0);
    };
}

// 字符串数组安全反序列化
export function string2Arr(text) {
    if (text && isString(text) && /^\[.*\]$/.test(text)) {
        return JSON.parse(text);
    }
    return [];
}

五、二进制数据处理工具

1. 字节操作

javascript 复制代码

// 数值按字节分割
export function splitByte(value, len, reverse = 0) {
    let bytes = [];
    try {
        bytes = new Uint8Array(len);
        new DataView(bytes.buffer)[`setUint${Math.min(32, len * 8)}`](0, value, true);
    } catch (error) {
        console.warn("储存数据溢出了！请确认结果是否符合预期", value, error);
        const valueLength = Math.min(Math.ceil(value.toString(2).length / 8), len) || 0;
        for (let i = 0; i < valueLength; i++) {
            bytes[i] = (value >> (i * 8)) & 0xFF;
        }
    }
    return reverse ? bytes.reverse() : bytes;
}

// 16进制字符串转Buffer
export function hexStringToBuffer(hexString, len, reverse = 0) {
    const str = hexString.toString().length % 2 == 0 ? hexString : '0' + hexString;
    const buffer = len == Infinity ? [] : new Uint8Array(len);
    
    for (let i = 0; i < str.length; i += 2) {
        buffer[i / 2] = parseInt(str.substr(str.length - i - 2, 2), 16);
    }
    
    return reverse ? buffer.reverse() : buffer;
}

2. 位操作

javascript 复制代码

// 设置特定位的值
export function setBit(number, position, value) {
    return value ? number | (1 << position) : number & ~(1 << position);
}

// 设置位区间
export function setBitsRange(number, start, end, value) {
    let mask = ((1 << (end - start + 1)) - 1) << start;
    return (number & ~mask) | ((value << start) & mask);
}

六、文件类型判断工具

javascript 复制代码

// 文件类型判断
export function fileType(str) {
    const videoRegex = /(\mp4|\avi|\mkv)$/i;
    const imgRegex = /(\bmp|\jpg|\jpeg|\png|\gif|\webp)$/i;
    
    if (videoRegex.test(str)) return "video";
    if (imgRegex.test(str)) return "img";
    return false;
}

七、CRC校验工具

javascript 复制代码

// MODBUS-RTU CRC校验
export function MODBUS_CRC(data, poly = 0xA001, init = 0xFFFF, xorout = 0x0001) {
    let crcValue = init;
    
    for (let i = 0; i < data.length; i++) {
        crcValue ^= data[i] & 0xFFFF;
        for (let j = 0; j < 8; j++) {
            if (crcValue & xorout) {
                crcValue >>= 1;
                crcValue ^= poly;
            } else {
                crcValue >>= 1;
            }
        }
    }
    
    crcValue = crcValue.toString(16);
    return [crcValue.substring(2, 4), crcValue.substring(0, 2)];
}

实际应用示例

场景一：API数据安全处理

javascript 复制代码

// 处理不可靠的API返回数据
const userData = {
    age: '25',      // 接口返回字符串，应该是数字
    tags: '[1,2,3]' // 接口返回JSON字符串，应该是数组
};

const safeAge = verifyType(isNumber, parseInt(userData.age), 0);
const safeTags = verifyType(isArray, string2Arr(userData.tags), []);

console.log(safeAge);  // 25
console.log(safeTags); // [1, 2, 3]

场景二：UI色彩管理系统

javascript 复制代码

// 设计系统颜色处理
const primaryColor = '#3498db';

// 多种格式转换应用
const rgba = hexToRgba(primaryColor, 80); // 带透明度
const gradient = getGradientColor(primaryColor, '#2ecc71', 5); // 渐变色彩

// 在图表组件中使用
const chartConfig = {
    backgroundColor: gradient[0],
    colors: gradient,
    borderColor: rgba
};

这套工具包在实际项目中经过了充分验证，能够有效提高开发效率并减少重复代码。每个函数都针对特定场景进行了优化，具有良好的实用性和稳定性。