JavaScript代码去重：高效避免重复编写的技巧

在前端开发实践中，代码重复往往是影响可维护性的最大障碍——尤其是当多个功能高度相似，仅有个别细节存在差异时。这种情形下，手动编写多份几乎完全相同的代码，不仅让后期维护者倍感困扰，还极易导致“漏改”或“只改了一半”等低级错误。例如，使用 jQuery 处理 `receive-xxx` 和 `send-xxx` 等 DOM 元素时，事件绑定逻辑完全相同，唯一区别仅在于选择器的前缀——这正是典型的重用代码场景，也是进行重构的绝佳时机。

**核心思路其实非常清晰：识别出变化的部分，并将其封装为参数。** 将 `'receive'` 和 `'send'` 这类前缀抽象为一个可变的 `prefix` 参数，其余逻辑保持不变。借助 ES6 的模板字符串（反引号配合 `${}`），可以动态构建选择器，使一个函数能够处理多种场景： ```javascript function doTheThing(prefix) { $(`#${prefix}-address`).on('click', function() { $(`#${prefix}-dropdown`).show(); $(`#${prefix}-address`).addClass('box-click'); }); } ``` 接着在主函数中按需调用： ```javascript function onSelectAddress() { doTheThing('receive'); doTheThing('send'); } ``` 这种做法带来的效果立竿见影： - **零重复**：所有业务逻辑集中在一个位置。后续如果需要添加 `draft-xxx` 或 `archive-xxx`，只需增加一行调用即可。 - **强一致性**：当需要修复缺陷或调整行为时——例如将 `show()` 替换为 `toggle()` 或加入动画——仅需修改 `doTheThing` 函数内部实现，所有调用点会自动同步更新。 - **语义清晰**：函数名 `doTheThing` 可依据实际语义进行优化，例如改为 `initAddressSelector`，可读性将大幅提升。 不过，以下细节值得特别关注： - **参数的安全性**：如果 `prefix` 来自不可控的源头（例如用户输入或外部数据），必须进行白名单校验。直接使用不可信字符串拼接选择器，存在注入风险。更稳妥的做法是使用 `encodeURIComponent` 进行转义处理。 - **批量处理场景**：当需要同时初始化多个前缀时，可以进一步将函数扩展为支持数组形式，例如 `doTheThing(['receive', 'send'])`，内部通过遍历依次调用。 - **与现代框架的集成**：在当前 React、Vue 等组件化框架主导的项目中，这类 DOM 操作通常不再直接编写在逻辑层中。最理想的方案是从设计层面避免这种硬耦合——例如通过数据驱动或组件化封装来彻底取代手动选择器。 重构的真正价值从来不是让代码看起来更短，而是让代码更贴近实际需求的抽象层次。明确区分“对谁做”（`receive`/`send`）与“做什么”（显示下拉框、添加样式类）——将这两个层次清晰分离，才是编写高质量 JavaScript 代码的核心功底。