如何防止 JavaScript 中的重复代码

通过提取通用逻辑并参数化变化部分，可有效消除重复代码，提升可维护性与可扩展性。本文以 jquery 中处理不同前缀 dom 元素为例，演示如何用单一函数替代多组相似代码。

通过提取通用逻辑并参数化变化部分，可有效消除重复代码，提升可维护性与可扩展性。本文以 jquery 中处理不同前缀 dom 元素为例，演示如何用单一函数替代多组相似代码。

在前端开发中，当多个功能逻辑高度相似（如仅 ID 前缀不同），硬编码多份几乎相同的代码不仅增加维护成本，还容易引发遗漏修改、修复不一致等问题。上述示例中，receive-xxx 和 send-xxx 的事件绑定逻辑完全一致，仅 DOM 选择器前缀不同——这正是典型的「重复代码」场景，也是重构的理想切入点。

核心思路：识别变化点，封装为参数
将 'receive' 和 'send' 抽象为可变的 prefix 参数，其余逻辑保持不变。借助 ES6 模板字符串（反引号 + ${}）动态生成选择器，使函数具备复用能力：

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

随后，在主函数中按需调用：

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

✅ 优势说明：

• ✅ 零重复：所有业务逻辑集中于一处，新增 draft-xxx 或 archive-xxx 时只需一行调用；
• ✅ 强一致性：修复 bug 或调整行为（如改为 toggle() 或添加动画）仅需修改 doTheThing 内部；
• ✅ 语义清晰：函数名 doTheThing 可根据实际语义优化（如 initAddressSelector），提升可读性。

⚠️ 注意事项：

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

• 确保传入的 prefix 是可信值（避免注入风险），若来源不可控，建议做白名单校验或使用 encodeURIComponent 处理；
• 若需支持多个前缀批量初始化，可进一步扩展为 doTheThing(['receive', 'send'])，内部遍历调用；
• 在现代项目中，建议结合模块化（ESM）或组件化（如 React/Vue）设计，从根本上规避此类 DOM 硬耦合问题。

重构不是“为了简洁而简洁”，而是让代码更贴近真实需求的抽象层次——把“做什么”（show dropdown, add class）和“对谁做”（receive/send）清晰分离，这才是高质量 JavaScript 的实践基石。