通过参数化函数消除JavaScript重复代码

本文介绍一种简洁有效的重构方法：将重复的 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 原则的落地姿势。