如何在jQuery中将两个功能重复的清除类函数封装为通用函数？

首先，我们可以把这两个函数里可变的部分提取为参数，比如按钮选择器、表格选择器、文本容器选择器，以此封装一个通用函数，彻底消除重复代码。

通用函数实现 #

function setupClearButton(buttonSelector, gridSelector, textSpanSelector) {
  $(buttonSelector).offOn('click', function(event) {
    // 清除表格过滤缓存
    $(gridSelector).igGridFiltering('filter', [], true);
    // 清空文本内容
    $(textSpanSelector).text('');
    // 隐藏当前点击的按钮（用this代替重复选择器更简洁）
    $(this).hide();
    return false;
  });
}

调用方式 #

原来的两个独立函数，现在可以用两行调用代码完全替代，功能和之前完全一致：

// 对应原CleartblCMRAssoc_click的功能
setupClearButton('#btnCleartblCMRAssoc', '#tblCMRAssociation', '#spanCMRAssocDetailId');

// 对应原ClearfldsetTTT_click的功能
setupClearButton('#btnClearfldsetTTT', '#tblTTT', '#spanfldsetTTTDetailId');

这样做的好处 #

• 减少冗余代码：重复的逻辑只写一次，后续修改清除规则时，只需要维护这一个函数即可，不用改多处。
• 提升可读性：每个调用都清晰传递了对应元素的选择器，一眼就能看出按钮和表格、文本容器的对应关系。
• 扩展性更强：以后新增类似的清除按钮，只需要一行调用代码，不用再复制粘贴整个函数结构。

内容的提问来源于stack exchange，提问作者John S.