如何借助参数化函数消除 JavaScript 中的重复代码

本文介绍一种简洁有效的重构方法：将重复的 dom 操作逻辑提取为接受前缀参数的通用函数，避免手动复制粘贴和硬编码，提升代码可维护性与扩展性。

本文介绍一种简洁有效的重构方法：将重复的 dom 操作逻辑提取为接受前缀参数的通用函数，避免手动复制粘贴和硬编码，提升代码可维护性与扩展性。

在前端开发中，当多个功能逻辑高度相似（如仅 ID 前缀不同），直接复制粘贴不仅增加维护成本，还容易引入遗漏或不一致的错误。以 jQuery 为例，若需为 receive-xxx 和 send-xxx 两类元素分别绑定相同行为，理想做法是抽象共性、参数化差异。

核心思路是将变化的部分（如 'receive' 或 'send'）作为函数参数传入，利用模板字符串动态生成选择器：

function doTheThing(prefix) {    $(`#${prefix}-address`).on('click', function() {        $(`#${prefix}-dropdown`).show();        $(`#${prefix}-address`).addClass('box-click');    });}

该函数完全复用了原逻辑，仅通过 ${prefix} 实现选择器的动态拼接。调用时只需传入对应前缀：

function onSelectAddress() {    doTheThing('receive');    doTheThing('send');}

✅ 优势说明：

立即学习“Java免费学习笔记（深入）”；

• ✅ 零重复：所有业务逻辑集中于一处，修改一次即全局生效；
• ✅ 易扩展：新增 #draft-address 等类似结构时，只需调用 doTheThing('draft')；
• ✅ 类型安全友好：若后续迁移到 TypeScript，可为 prefix 添加字符串字面量类型约束（如 'receive' | 'send' | 'draft'）；
• ✅ 兼容性注意：确保运行环境支持 ES6 模板字符串（现代浏览器及主流构建工具均默认支持）。

⚠️ 注意事项：

• 若前缀来自用户输入或不可信数据，需严格校验或转义，防止选择器注入；
• 避免在循环中反复调用 doTheThing() 绑定事件——应确保每个元素只绑定一次，必要时可结合事件委托优化；
• 对于更复杂场景（如不同前缀对应不同样式类或回调），可进一步将行为封装为配置对象，实现更高阶的抽象。

通过这一重构，代码从“写两遍”变为“写一遍，用两次”，真正践行了 DRY（Don’t Repeat Yourself）原则。