jQuery如何减少重复代码 优化批量hide等冗余操作

1 直接简化多行hide为一行 #

jQuery支持逗号分隔的多元素选择器，你所有的hide操作都可以直接替换为下面这一行：

// 一行隐藏所有目标板块
jQuery('#SECTION-MAPS, #PHONE-SECTION, #SECTION-CONTACT-FORM, #SECTION-BRICK-QUOTE-FORM, #SECTION-AGGREGATE-QUOTE-FORM').hide();

不管是初始化默认隐藏，还是每个按钮点击时先隐藏所有板块，都用这一行就行，直接替换原来的5行hide代码。

2 整体优化后完整代码 #

你可以直接替换原来的全部代码，功能完全和原来一致，代码量大幅缩减，后续维护也更方便：

jQuery(document).ready(function() {
  // 统一配置：所有需要控制的板块选择器
  const ALL_SECTIONS = '#SECTION-MAPS, #PHONE-SECTION, #SECTION-CONTACT-FORM, #SECTION-BRICK-QUOTE-FORM, #SECTION-AGGREGATE-QUOTE-FORM';
  // 统一隐藏所有板块的公共方法
  function hideAllSections() {
    jQuery(ALL_SECTIONS).hide();
  }

  // 初始化默认隐藏所有板块
  hideAllSections();

  // 按钮映射配置：只需要在这里维护所有按钮和对应板块的关系，加新功能直接加一行即可
  const btnConfig = [
    { openBtn: '.rv_callus_button', closeBtn: '.rv_close_button_callus', targetSection: '#PHONE-SECTION' },
    { openBtn: '.rv_sendusamessage_button', closeBtn: '.rv_close_button_contact', targetSection: '#SECTION-CONTACT-FORM' },
    { openBtn: '.rv_ourlocations_button', closeBtn: '.rv_close_button_maps', targetSection: '#SECTION-MAPS' },
    { openBtn: '.rv_request-aggregates-quotation_button', closeBtn: '.rv_close_button_quote', targetSection: '#SECTION-AGGREGATE-QUOTE-FORM' },
    { openBtn: '.rv_request-bricks-quotation_button', closeBtn: '.rv_close_brick_button', targetSection: '#SECTION-BRICK-QUOTE-FORM' }
  ];

  // 循环绑定所有打开按钮的事件，不用重复写N次逻辑
  btnConfig.forEach(item => {
    // 打开按钮逻辑
    jQuery(item.openBtn).click(function(e) {
      e.preventDefault();
      hideAllSections();
      jQuery(item.targetSection).slideDown();
      jQuery(item.openBtn).toggleClass('show hide');
      jQuery('html,body').animate({
        scrollTop: jQuery(item.targetSection).offset().top - 250
      });
    });

    // 关闭按钮逻辑
    jQuery(item.closeBtn).click(function(e) {
      e.preventDefault();
      jQuery(item.targetSection).slideUp();
      jQuery(item.openBtn).toggleClass('show hide');
      jQuery('html,body').animate({
        scrollTop: jQuery("#PAGE-HEADING").offset().top - 250
      });
    });
  });
});

优化说明 #

• 所有重复的hide操作统一封装为hideAllSections()方法，调用只需要一行，后续如果加新的板块，只要修改ALL_SECTIONS变量里的选择器即可，不用到处改代码
• 所有按钮的逻辑统一通过配置表管理，没有冗余重复代码，后续新增板块只需要在btnConfig数组里加一行对应配置即可，不用再复制粘贴整段点击事件
• 所有公共参数统一维护，比如滚动偏移量250如果要调整，只要改一处就全量生效

内容的提问来源于stack exchange，提问作者ganoobi