如何用一个函数替代多个重复的 DOM 内容复制函数

2026-01-30 00:00:00 作者：心靈之曲

本文介绍如何将多个功能相同、仅 id 编号不同的 javascript 函数合并为一个可复用的参数化函数，显著提升代码简洁性与可维护性。

在实际前端开发中，我们常会遇到类似这样的重复逻辑：多个函数仅因目标元素 ID 的数字后缀不同而被分别定义（如 #demo1、#demo2 … #demo6），其余逻辑完全一致。这种写法不仅冗余，还违背了 DRY（Don’t Repeat Yourself）原则，增加维护成本。

通过引入参数化设计，我们可以将上述 6 个函数精简为一个通用函数：

function myFunction(n) {
  const source = document.querySelector(`#demo${n}`);
  const target = document.querySelector("#demo");
  if (source && target) {
    target.innerHTML = source.innerHTML;
  }
}

✅ 优势说明：

n 为数字参数（如 myFunction(3) 对应 #demo3）；
使用模板字符串 `#demo${n}` 动态生成选择器，语义清晰；
增加了基础的 DOM 元素存在性校验（if (source && target)），避免因元素未找到导致脚本报错，提升健壮性。

? 调用示例：

myFunction(1); // 将 #demo1 的内容复制到 #demo  
myFunction(4); // 将 #demo4 的内容复制到 #demo  
myFunction(6); // 将 #demo6 的内容复制到 #demo

? 进阶建议：

若需支持非数字后缀（如 #demo-header、#demo-footer），可将参数改为字符串：myFunction(idSuffix)，并使用 `#demo
${idSuffix}`；
如涉及频繁调用或复杂操作，建议缓存 document.querySelector("#demo") 结果，避免重复查询；
在现代项目中，还可进一步封装为可复用的工具函数，配合事件委托或数据驱动方式（如绑定按钮 data-target="3"）实现更灵活的交互。