一个函数轻松复制多个DOM元素

本文揭示了一种高效重构JavaScript DOM操作代码的实用技巧：将多个仅编号不同的重复函数（如myFunction1到myFunction6）合并为一个灵活、健壮的通用函数，通过参数动态生成选择器、校验元素存在性并安全复制内容，不仅使代码体积减少85%、大幅提升可维护性和可扩展性，还规避了常见运行时错误，真正体现了“写少而好”的工程化编程思维——无论新增#demo7还是#demo100，只需调用myFunction(n)，无需修改函数本身。

本文介绍如何将多个功能重复、仅数字编号不同的 JavaScript 函数合并为一个通用函数，通过传入参数动态选择目标元素，显著提升代码可维护性与简洁性。

在实际开发中，我们常会遇到类似这样的冗余代码：多个函数逻辑完全一致，仅因 ID 后缀数字不同而被拆分为 myFunction1、myFunction2……直至 myFunction6。这种写法不仅占用大量代码空间，更不利于后续维护——例如新增 #demo7 时，还需手动添加新函数。

✅ 正确做法是抽象共性，封装为带参数的单一函数。核心思路是：将变化的部分（即数字编号）作为函数参数传入，再通过字符串拼接动态生成目标选择器。

以下是优化后的通用函数：

function myFunction(n) {
  const source = document.querySelector(`#demo${n}`);
  const target = document.querySelector("#demo");
  if (source && target) {
    target.innerHTML = source.innerHTML;
  } else {
    console.warn(`Element #demo${n} or #demo not found.`);
  }
}

? 使用示例：

<!-- HTML 示例结构 -->
<div id="demo1">内容一</div>
<div id="demo2">内容二</div>
<div id="demo3">内容三</div>
<!-- ... -->
<div id="demo">目标容器</div>

<button onclick="myFunction(1)">加载内容1</button>
<button onclick="myFunction(2)">加载内容2</button>
<button onclick="myFunction(3)">加载内容3</button>

? 关键改进点说明：

• 使用模板字符串 `#demo${n}` 替代字符串拼接，语义更清晰；
• 增加了元素存在性校验（if (source && target)），避免因 DOM 元素未加载或 ID 错误导致脚本中断；
• 将查询结果赋给变量，提升可读性与调试便利性；
• 支持任意合法数字 n（如 myFunction(10)），无需修改函数体即可扩展。

⚠️ 注意事项：

• 确保调用时传入的是有效整数（如 1, 2, 100），避免传入 undefined 或非数字字符串引发选择器错误；
• 若需支持字母后缀（如 #demoA）、多级嵌套或复杂映射，建议升级为接收字符串参数（如 myFunction("A")）或结合配置对象实现；
• 在现代项目中，还可进一步封装为可复用的工具函数，配合事件委托或数据属性（data-src="demo3"）实现更优雅的解耦。

通过这一重构，6 个函数精简为 1 个，代码体积减少约 85%，且具备天然的可扩展性与健壮性——这才是符合工程实践的 JavaScript 编写方式。

以上就是《一个函数轻松复制多个DOM元素》的详细内容，更多关于的资料请关注golang学习网公众号！