本文分享一种高效的前端代码重构方法：将重复的 DOM 操作逻辑抽象为接受前缀参数的通用函数，杜绝手动复制粘贴与硬编码，显著提升代码的可维护性和扩展性。

简单来说，就是将重复出现的 DOM 操作逻辑封装成一个通用函数，把变化的 ID 前缀作为参数传入，实现一次编写、多次复用。在前端开发中，许多相似功能往往仅 ID 前缀不同。很多开发者为了省事直接复制粘贴，但后续维护时往往改了一处却遗漏另一处，导致 bug 难以排查。以 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');}

✅ 核心优势：

• ✅ 零重复：所有行为逻辑集中在一个函数 doTheThing 中，修改一处即可全局生效；
• ✅ 易扩展：未来如果需要添加 #draft-address，只需增加一行 doTheThing('draft') 即可；
• ✅ 类型安全友好：后续若迁移到 TypeScript，可为 prefix 定义字符串字面量类型（如 'receive' | 'send' | 'draft'），在编译阶段即可捕获拼写错误；
• ✅ 兼容性良好：ES6 模板字符串已在主流浏览器和构建工具中得到广泛支持，无需担心兼容性问题。

⚠️ 使用注意事项：

• 如果前缀来自用户输入或不可信数据源，务必进行校验或转义，以防止选择器注入攻击；
• 避免在循环中反复调用 doTheThing() 绑定事件——每个元素只需绑定一次，必要时可采用事件委托进行优化；
• 若不同前缀对应不同样式类或回调函数，可进一步封装为配置对象，实现更灵活的抽象。

一句话总结：从“写两遍”变为“写一次，用两次”，这正是 DRY 原则的最佳落地实践。