本文介绍如何将多个功能相同、仅 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"）实现更灵活的交互。
总之，善用函数参数是消除重复代码最直接有效的方式——一行逻辑抽象，胜过六份拷贝。
