本文介绍如何将多个功能重复、仅数字编号不同的 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.`);
}
}? 使用示例：
内容一内容二内容三目标容器
? 关键改进点说明：
- 使用模板字符串 `#demo${n}` 替代字符串拼接，语义更清晰；
- 增加了元素存在性校验（if (source && target)），避免因 DOM 元素未加载或 ID 错误导致脚本中断；
- 将查询结果赋给变量，提升可读性与调试便利性；
- 支持任意合法数字 n（如 myFunction(10)），无需修改函数体即可扩展。
⚠️ 注意事项：
- 确保调用时传入的是有效整数（如 1, 2, 100），避免传入 undefined 或非数字字符串引发选择器错误；
- 若需支持字母后缀（如 #demoA）、多级嵌套或复杂映射，建议升级为接收字符串参数（如 myFunction("A")）或结合配置对象实现；
- 在现代项目中，还可进一步封装为可复用的工具函数，配合事件委托或数据属性（）实现更优雅的解耦。
通过这一重构，6 个函数精简为 1 个，代码体积减少约 85%，且具备天然的可扩展性与健壮性——这才是符合工程实践的 JavaScript 编写方式。
