你是否也有这种感觉：在搭建新项目时，你会想：
"这个函数我是不是已经写过了...在某个地方？"

是的——我也是。

所以在开发了数十个React、Node和全栈应用后，我不再重复造轮子。
我创建了一个小工具箱——10个我会粘贴到每个项目的代码片段。

它们是我经常依赖的经过实战检验的辅助函数。

下面我将展示这些代码片段，并附上实际应用示例。

1. 防抖函数

用途： 防止输入变化或滚动事件过度触发。

export function debounce(func, delay = 300) {
  let timeout;
  return (...args) => {
    clearTimeout(timeout);
    timeout = setTimeout(() => func(...args), delay);
  };
}

使用场景：
实时搜索，在用户停止输入后再触发API调用。

const handleChange = debounce((val) => searchUsers(val), 400);

2. 格式化日期为可读字符串

用途： 总是需要它。再也不想谷歌搜索怎么做了。

export function formatDate(dateStr, locale = "en-US") {
  return new Date(dateStr).toLocaleDateString(locale, {
    year: "numeric",
    month: "short",
    day: "numeric",
  });
}

使用场景：
在仪表盘、收据等地方显示"2024年4月22日"这样的格式。

3. ClassNames 工具函数

用途： 条件类名不应该写得很难看。

export function classNames(...args) {
  return args.filter(Boolean).join(" ");
}

使用场景：

<button className={classNames("btn", isActive && "btn-primary")} />

4. 安全JSON解析

用途： 解析格式错误的localStorage或API字符串？你需要这个。

export function safeJsonParse(str, fallback = {}) {
  try {
    return JSON.parse(str);
  } catch {
    return fallback;
  }
}

使用场景：

const user = safeJsonParse(localStorage.getItem("user"));

5. 判断对象是否为空

用途： 在边界情况下比Object.keys(obj).length === 0更可靠。

export function isEmpty(obj) {
  return obj && Object.keys(obj).length === 0 && obj.constructor === Object;
}

使用场景：

if (isEmpty(formErrors)) submitForm();

6. 复制到剪贴板

用途： 每个产品都有需要"复制链接"或"复制代码"的时刻。

export async function copyToClipboard(text) {
  try {
    await navigator.clipboard.writeText(text);
    return true;
  } catch (err) {
    console.error("Copy failed:", err);
    return false;
  }
}

使用场景：

<button onClick={() => copyToClipboard(url)}>复制</button>

7. 首字母大写

用途： 小细节。大提升。

export function capitalize(str) {
  return str.charAt(0).toUpperCase() + str.slice(1);
}

使用场景：

capitalize("pending")

8. 延迟(等待)辅助函数

用途： 在测试、动画、节流操作中很有用。

export function sleep(ms) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}

使用场景：

await sleep(1000);

9. 从数组中移除重复项

用途： 保持数组整洁，无需冗长的逻辑。

export function uniqueArray(arr) {
  return [...new Set(arr)];
}

使用场景：

const tags = uniqueArray([...userTags, ...defaultTags]);

10. 从URL下载任何文件

用途： 实现快速、用户友好的下载功能。

export function downloadFile(url, filename) {
  const a = document.createElement("a");
  a.href = url;
  a.download = filename;
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
}

使用场景：

downloadFile("/resume.pdf", "MyResume.pdf");

额外分享：我存放这些代码的文件夹结构

在大多数React/Next.js项目中，我会把这些代码放在：

/utils
  ├── debounce.js
  ├── formatDate.js
  ├── classNames.js
  ├── jsonHelpers.js
  ├── clipboard.js
  └── etc...

然后按需导入：

import { debounce, formatDate, copyToClipboard } from "@/utils";

为什么这些代码片段如此重要(甚至超出你的想象)

• 它们能防止bug
• 它们让代码更整洁
• 它们让你不用在StackOverflow上浪费时间
• 它们可以在每个前端或全栈项目中复用

你不需要1000个辅助函数。

你需要10个真正有用且值得信赖的函数。

要点总结

• 不要每次都重写辅助函数
• 收集你自己的代码片段库
• 为每个项目构建一个"启动模板"(或使用模板仓库)
• 使用小工具函数来避免大bug

行动号召
关注我，获取更多实战开发模式、简洁代码片段和我实际使用的东西——而不仅仅是发推文谈论的内容。

这10个函数不会让你成为10倍效率的开发者。但它们会让你工作速度快数倍。