10个JavaScript实用代码片段：前端与全栈项目开发必备

原文地址：https://medium.com/javascript-in-plain-english/i-copy-these-10-code-snippets-into-every-project-8410176ca560
原文作者： Babar saad

你是否曾在新建项目时，突然陷入思考：“这个函数我是不是在之前的哪个项目中已经写过一遍了？”

是的，这种感觉我经历得太多。因此，在构建了几十个 React、Node 以及全栈应用之后，我不再每次都从零开始，而是整理了一个属于自己的工具箱：一套包含 10 个经过实战检验的代码片段。如今，在启动大多数新项目时，我都会先将它们粘贴进去。

这些片段并不复杂，也不是什么框架，但它们是我最信赖的辅助工具。下面就是这份清单，以及它们的真实使用场景。

1. 防抖函数 (Debounce Function)

防止在 scroll、resize 或 input change 等高频触发事件中执行过多无谓操作。

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

使用场景：实时搜索框，等待用户停止输入后再发起网络请求。

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

---

2. 日期格式化 (Format Date to Readable String)

从此告别反复搜索“JavaScript 日期格式化”的烦恼。

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

使用场景：在仪表板或收据上显示类似 Apr 22, 2025 这样易读的日期格式。

---

3. 类名合并工具 (ClassNames Utility)

让那些需要根据条件动态添加的 CSS 类名看起来整洁有序，避免逻辑混乱。

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

使用场景：在 React 或 Vue 中动态设置元素类名。

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

---

4. 安全的 JSON 解析 (Safe JSON Parse)

在解析来自 localStorage 或 API 响应的字符串时，优雅处理格式错误，避免应用直接崩溃。

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

使用场景：安全地读取可能被用户或意外情况修改过的本地存储数据。

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

---

5. 判断空对象 (IsEmpty Object)

比 Object.keys(obj).length === 0 更严谨、更优雅的方案，能准确判断一个对象是否为空。

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

使用场景：在提交表单前，检查表单错误对象是否为空。

if (isEmpty(formErrors)) submitForm();

---

6. 复制到剪贴板 (Copy to Clipboard)

因为几乎每个应用都会需要一个“复制链接”或“复制验证码”的按钮。

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)}>Copy</button>

---

7. 首字母大写 (Capitalize First Letter)

一个小细节，却能在处理状态、标题或用户输入时显著提升 UI 质感。

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

使用场景：将状态值从 “pending” 格式化为 “Pending” 后展示。

capitalize(“pending”); // “Pending”

---

8. 休眠助手 (Sleep Helper)

适用于模拟加载延迟、控制动画节奏，或实现简单的节流操作。

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

使用场景：确保 loading 状态至少展示 1 秒，避免闪烁。

await sleep(1000);
// 至少展示 1 秒 loading

---

9. 数组去重 (Remove Duplicates From Array)

简洁高效地清除数组中的重复项，无需冗长的样板代码。

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

使用场景：合并用户标签和默认标签并去重。

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

---

10. 从 URL 下载文件 (Download Any File from 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 目录下：

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

然后在需要的地方按需引入：

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

这10个JavaScript代码片段覆盖了日常开发中的高频需求，从数据处理到用户交互，能有效提升编码效率与代码质量。如果你有自己珍藏的“万能”代码片段，欢迎在 云栈社区 与其他开发者分享和探讨。