每个项目中我都会复用的10个实用代码片段

在多年的全栈开发历程中，我总结出一套高效的代码复用策略。以下是 10 个在每个新项目中都会率先复用的实用代码片段，它们如同我的开发 “神器”，能帮我节省时间、规避错误，避免重复劳动。

不知道你在新建项目时，是否常有这种感觉：“这个功能我明明写过... 到底放在哪个项目了？” 我之前也深受其扰。在开发过数十个 React、Node 和全栈项目后，我痛定思痛，决心打造一个专属工具箱，于是便有了这 10 个 “核心成员”。

这些代码片段不是华而不实的噱头，也不是 ChatGPT 随意生成的产物，而是经过实战检验的可靠工具。它们实用性强，能轻松融入各类项目，为开发工作保驾护航。接下来，我将为你详细介绍这些代码片段及其应用场景。

一、防抖函数：守护输入与滚动事件的 “防线”

在开发过程中，我们经常会遇到输入变化或滚动事件被过度触发的问题。比如实现一个实时搜索功能，用户每输入一个字符就触发 API 请求，这不仅会导致大量不必要的请求，还可能造成系统卡顿。防抖函数就可以很好地解决这个问题。

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

在实际应用中，你可以这样使用它：

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

当用户在输入框中输入内容时，防抖函数会等待用户停止输入 400 毫秒后再发起 API 请求，有效减少了请求次数，提升了系统的稳定性和性能。

二、日期格式化：让日期显示变得轻松简单

在很多项目中，我们都需要将日期以特定的格式展示给用户，比如在仪表盘、收据等场景显示 “2024 年 4 月 22 日” 这样的格式。自己写日期格式化代码不仅繁琐，还容易出错。有了这个日期格式化函数，一切变得简单。

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

你只需要将日期字符串和目标语言环境传入函数，就能得到格式化的日期，完美解决了日期格式化难题，再也不用反复搜索各种复杂的方法了。

三、类名组合工具：让类名处理变得优雅高效

在 React 开发中，我们常常需要根据条件来组合类名。传统的写法不仅繁琐，还容易出错。这个类名组合工具可以让我们轻松应对各种复杂的类名组合场景。

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

实际应用场景如下：

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

通过这个工具函数，我们能够以一种更加优雅、简洁的方式处理条件类名，让代码更具可读性和可维护性。

四、安全 JSON 解析：轻松应对 JSON 解析错误

我们在解析 localStorage 或 API 返回数据时，经常会遇到格式错误的问题，导致程序崩溃。安全 JSON 解解析函数可以有效解决这个问题。

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

在使用 localStorage 存储和读取用户信息时，就可以这样用：

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

即使 JSON 字符串格式错误，它也能返回一个默认值，避免程序因错误而中断，提升了程序的健壮性。

五、空对象检测：精准判断对象是否为空

判断对象是否为空是一个常见的需求。传统的 Object.keys(obj).length === 0 判断方法在某些情况下并不完全可靠。这个空对象检测函数提供了更精准的判断方式。

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

比如在表单提交前验证表单错误信息是否为空时：

if (isEmpty(formErrors)) submitForm();

它能准确地判断对象是否为空，为程序逻辑的正确执行提供有力保障。

六、复制到剪贴板：实现便捷的复制功能

几乎所有的产品都离不开 “复制链接” 或 “复制代码” 功能。这个复制到剪贴板的函数可以轻松帮你实现这个需求。

export async function copyToClipboard(text) {
  try {
    await navigator.clipboard.writeText(text);
    return true;
  } catch (err) {
    console.error('复制失败:', err);
    return false;
  }
}

在实际项目中，你可以这样使用它：

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

用户点击按钮后，就能将指定内容复制到剪贴板，操作简单方便，提升了用户体验。

七、首字母大写：提升文本显示的专业度

在很多场景下，我们需要将文本的首字母大写，以符合特定的显示规范。这个首字母大写函数可以轻松实现这个功能。

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

比如将状态文本 “pending” 转换为 “Pending”：

capitalize('pending'); // => "Pending"

通过这个简单实用的函数，我们能轻松提升文本显示的专业度和美观度。

八、延时函数：助力测试、动画与节流操作

在测试、动画和节流操作中，延时函数有着广泛的用途。它可以让我们轻松实现指定时间的延迟操作。

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

在实现加载动画时，可以这样用：

await sleep(1000);
// 确保加载动画至少显示 1 秒

通过延时函数，我们可以更好地控制程序的执行节奏，让各种动画效果和交互逻辑更加流畅自然。

九、数组去重：保持数组元素的唯一性

在处理数组时，我们经常会遇到需要去重的情况。这个数组去重函数可以简洁高效地实现这个目标。

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

比如将两个标签数组合并并去重：

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

它能快速去除数组中的重复元素，保持数组的唯一性，方便我们后续的数据处理。

十、文件下载：打造便捷的下载体验

为用户提供了一个便捷的文件下载功能是很多项目的需求之一。这个文件下载函数可以轻松实现这个功能。

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', '我的简历.pdf');

用户点击下载按钮后，就能快速下载指定文件，操作方便快捷，提升了用户的使用满意度。

文件组织方式：让代码更易管理

在 React/Next.js 项目中，我通常采用以下文件组织方式，方便管理和复用这些工具函数：

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

使用时按需引入即可：

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

这种清晰的文件组织方式，不仅方便我们快速找到并使用这些工具函数，也有利于项目的长期维护和发展。

为什么这些代码如此重要

这些代码片段虽小，却有着不可忽视的重要性：

• 有效预防常见错误 ：它们经过实战检验，能够有效避免我们在开发过程中因重复编写类似功能代码而引入的常见错误，提升代码的可靠性。
• 保持代码整洁 ：有了这些工具函数，我们无需在项目中写大量的重复代码，让代码结构更加简洁清晰，便于阅读和维护。
• 避免重复搜索解决方案 ：当我们需要实现某个功能时，直接复用这些代码片段即可，不再需要花费时间去网上搜索各种解决方案，大大提高了开发效率。
• 适用性强 ：它们适用于任何前端或全栈项目，无论是小型应用还是大型系统，都能发挥重要作用。

你不需要收集上千个工具函数，这 10 个真正可靠的核心工具就足以满足大多数项目的基本需求。

核心建议：提升开发效率的关键策略

• 拒绝重复编写相同工具函数 ：养成复用代码片段的习惯，避免无谓的重复劳动，把精力集中在核心业务逻辑的开发上。
• 打造专属代码片段库 ：根据自己的开发经验和项目需求，建立并不断完善自己的代码片段库。这个库就像你的开发 “百宝箱”，随时为你提供有用的工具。
• 准备项目启动模板 ：为每个项目准备一个包含常用工具函数和基础配置的启动模板，这样在新项目开始时就能快速搭建起开发环境，实现快速开发。
• 善用小工具，规避大问题 ：不要小看这些看似简单的代码片段，它们在实际开发中能够发挥巨大作用，帮助我们避免各种潜在的大问题，让项目开发更加顺利。

这 10 个函数虽不会让你瞬间成为 10 倍效率开发者，但它们能让你的开发速度稳步提升，让你在开发的道路上越走越快、越走越稳。

希望这些代码片段和相关建议对你有所帮助，让你在全栈开发的旅程中更加轻松高效。