1. 前端工具函数的价值与应用场景在日常前端开发中我们经常会遇到各种重复性的数据处理、格式转换、校验判断等需求。这些看似简单的功能如果每次都重新实现不仅浪费时间还容易产生不一致和错误。工具函数库就是为解决这类问题而生的利器。以表单验证为例一个电商网站可能有几十个需要验证手机号的场景。如果每个地方都写一遍验证逻辑当业务规则变化时比如从11位改为支持国际号码就需要修改所有地方。而通过工具函数集中管理只需修改一处即可全局生效。2. 高频使用工具函数解析2.1 数据格式化函数日期格式化是前端最常用的功能之一。推荐使用day.js这个轻量级库import dayjs from dayjs // 日期格式化 const formatDate (date, pattern YYYY-MM-DD) { return dayjs(date).format(pattern) } // 使用示例 console.log(formatDate(new Date())) // 2023-08-15 console.log(formatDate(2023-08-15, YYYY年MM月DD日)) // 2023年08月15日金额格式化也经常用到const formatMoney (amount, decimal 2) { return parseFloat(amount).toFixed(decimal).replace(/\B(?(\d{3})(?!\d))/g, ,) } // 使用示例 console.log(formatMoney(1234567.89)) // 1,234,567.892.2 数据校验工具集表单验证是前端开发的重灾区以下是一些常用验证函数// 手机号验证 const isMobile (mobile) { return /^1[3-9]\d{9}$/.test(mobile) } // 邮箱验证 const isEmail (email) { return /^[a-zA-Z0-9._%-][a-zA-Z0-9.-]\.[a-zA-Z]{2,}$/.test(email) } // 身份证验证简单版 const isIDCard (id) { return /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(id) }2.3 浏览器环境判断针对不同浏览器环境需要做兼容处理// 判断移动端 const isMobileDevice () { return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) } // 判断微信环境 const isWeixin () { return /MicroMessenger/i.test(navigator.userAgent) } // 获取URL参数 const getUrlParams () { return Object.fromEntries(new URLSearchParams(window.location.search)) }3. 性能优化类工具函数3.1 防抖与节流滚动事件、窗口resize等高频触发场景必须使用// 防抖 const debounce (fn, delay 300) { let timer null return function(...args) { if (timer) clearTimeout(timer) timer setTimeout(() { fn.apply(this, args) }, delay) } } // 节流 const throttle (fn, interval 300) { let lastTime 0 return function(...args) { const now Date.now() if (now - lastTime interval) { fn.apply(this, args) lastTime now } } } // 使用示例 window.addEventListener(scroll, throttle(() { console.log(滚动事件处理) }, 500))3.2 深拷贝实现浅拷贝会导致引用类型数据共享的问题const deepClone (obj, hash new WeakMap()) { if (obj null) return null if (typeof obj ! object) return obj if (obj instanceof Date) return new Date(obj) if (obj instanceof RegExp) return new RegExp(obj) if (hash.has(obj)) return hash.get(obj) const cloneObj new obj.constructor() hash.set(obj, cloneObj) for (const key in obj) { if (obj.hasOwnProperty(key)) { cloneObj[key] deepClone(obj[key], hash) } } return cloneObj }4. 数据处理工具集4.1 数组操作// 数组去重 const uniqueArray (arr) { return [...new Set(arr)] } // 数组对象去重 const uniqueArrayByKey (arr, key) { const map new Map() return arr.filter(item !map.has(item[key]) map.set(item[key], 1)) } // 数组分组 const groupBy (arr, key) { return arr.reduce((acc, cur) { (acc[cur[key]] acc[cur[key]] || []).push(cur) return acc }, {}) }4.2 对象操作// 对象属性过滤 const filterObject (obj, keys) { return Object.keys(obj) .filter(key keys.includes(key)) .reduce((acc, key) { acc[key] obj[key] return acc }, {}) } // 对象深合并 const deepMerge (target, source) { for (const key in source) { if (source.hasOwnProperty(key)) { if (typeof source[key] object source[key] ! null) { if (!target[key]) Object.assign(target, { [key]: {} }) deepMerge(target[key], source[key]) } else { Object.assign(target, { [key]: source[key] }) } } } return target }5. 工具函数的管理与优化5.1 函数组织方式建议按功能模块划分工具函数utils/ ├── date.js # 日期相关 ├── validate.js # 验证相关 ├── device.js # 设备判断 ├── storage.js # 存储操作 └── index.js # 统一导出5.2 性能优化建议避免在工具函数内部创建重复对象// 不推荐 const isMobile (mobile) { const reg /^1[3-9]\d{9}$/ // 每次调用都创建新正则 return reg.test(mobile) } // 推荐 const MOBILE_REG /^1[3-9]\d{9}$/ const isMobile (mobile) { return MOBILE_REG.test(mobile) }合理使用缓存const memoize (fn) { const cache new Map() return (...args) { const key JSON.stringify(args) if (cache.has(key)) return cache.get(key) const result fn(...args) cache.set(key, result) return result } }6. 现代前端工具函数新趋势6.1 TypeScript支持为工具函数添加类型声明interface FormatMoneyOptions { decimal?: number symbol?: string } const formatMoney (amount: number, options?: FormatMoneyOptions): string { const { decimal 2, symbol } options || {} return ${symbol}${parseFloat(amount.toString()) .toFixed(decimal) .replace(/\B(?(\d{3})(?!\d))/g, ,)} }6.2 函数式编程工具// 函数组合 const compose (...fns) fns.reduce((f, g) (...args) f(g(...args))) // 使用示例 const add5 x x 5 const multiply10 x x * 10 const addThenMultiply compose(multiply10, add5) console.log(addThenMultiply(2)) // 706.3 工具函数测试使用Jest编写单元测试describe(formatMoney, () { it(should format money correctly, () { expect(formatMoney(1234567.89)).toBe(1,234,567.89) expect(formatMoney(1234.5678, 3)).toBe(1,234.568) }) })7. 实际项目中的经验分享命名约定要保持一致布尔类型函数用is/has/can开头isMobile、hasPermission数据处理函数用动词开头formatDate、parseQuery工具类函数用名词结尾arrayUtils、dateUtils错误处理要完善const safeParseJSON (str) { try { return JSON.parse(str) } catch (e) { console.error(JSON解析失败:, e) return null } }文档注释要规范/** * 格式化日期 * param {Date|string} date - 日期对象或字符串 * param {string} [patternYYYY-MM-DD] - 格式模板 * returns {string} 格式化后的日期字符串 * example * formatDate(new Date()) // 2023-08-15 */ function formatDate(date, pattern YYYY-MM-DD) { // ... }版本管理建议对工具函数库进行语义化版本控制重大变更要提供迁移指南保持向后兼容性在实际项目中我建议将工具函数单独维护为一个内部npm包这样可以在多个项目中共享。同时要建立完善的单元测试和文档这对团队协作和长期维护非常重要。
