前端开发必备工具函数集与最佳实践

1. 前端工具函数的价值与应用场景

在前端开发领域，工具函数就像瑞士军刀一样不可或缺。它们不仅能提升开发效率，还能保证代码质量和可维护性。经过多年实践，我整理出一套经过实战检验的工具函数集，这些函数覆盖了数据处理、DOM操作、类型判断等高频场景。

工具函数的核心价值在于：

• 避免重复造轮子，减少代码冗余
• 统一处理逻辑，降低出错概率
• 提升代码可读性和可维护性
• 便于团队协作和知识共享

2. 数据处理工具函数

2.1 深拷贝实现方案

深拷贝是前端开发中最常遇到的问题之一。JSON.parse(JSON.stringify())虽然简单，但无法处理函数、循环引用等特殊情况。这里分享一个更健壮的实现：

javascript复制function deepClone(obj, hash = new WeakMap()) {
  if (obj === null || 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 (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      cloneObj[key] = deepClone(obj[key], hash)
    }
  }
  return cloneObj
}

这个实现解决了以下问题：

1. 处理基本数据类型直接返回
2. 特殊对象类型(Date/RegExp)单独处理
3. 使用WeakMap解决循环引用问题
4. 保持原型链关系

2.2 数据格式化工具

在实际项目中，我们经常需要格式化各种数据：

javascript复制// 金额格式化
function formatMoney(num, decimals = 2, symbol = '¥') {
  if (isNaN(num)) return '--'
  const n = Number(num)
  return symbol + n.toFixed(decimals).replace(/\B(?=(\d{3})+(?!\d))/g, ',')
}

// 时间格式化
function formatDate(date, fmt = 'YYYY-MM-DD HH:mm:ss') {
  if (!date) return ''
  date = new Date(date)
  const o = {
    'M+': date.getMonth() + 1,
    'D+': date.getDate(),
    'H+': date.getHours(),
    'm+': date.getMinutes(),
    's+': date.getSeconds()
  }
  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