求最优JavaScript语法：实现最大宽度检测及交互功能

咱们先聊聊你给出的两个版本里存在的小问题：

• 第一个版本每次触发resize都会重复绑定click事件，多次触发后点击会执行多次逻辑；而且宽于960px时的点击逻辑和窄屏重复，完全没必要分开写。
• 第二个版本只在页面初始化时检测一次窗口宽度，窗口大小改变后不会重新适配，而且点击逻辑是addClass，和原需求的toggleClass行为不一致。

接下来分享几种更优的实现方案，兼顾性能和可维护性：

方案一：使用matchMedia + 媒体查询监听（首推） #

这个方案利用原生API监听媒体查询变化，比频繁监听resize更高效，能精准响应断点切换：

// 定义目标媒体查询规则
const mobileQuery = matchMedia('only screen and (max-width: 959px)');

// 统一处理footer切换的逻辑函数
function toggleFooterState() {
  $('.home-footer').toggleClass('open-in-mob');
}

// 根据屏幕宽度更新交互绑定
function updateFooterInteraction(isMobile) {
  const $trigger = $('.slect span');
  // 先移除旧的事件绑定，避免重复触发
  $trigger.off('click', toggleFooterState);
  
  if (isMobile) {
    $trigger.on('click', toggleFooterState);
  } else {
    // 非移动端时重置footer状态
    $('.home-footer').removeClass('open-in-mob');
  }
}

// 页面初始化时执行一次
updateFooterInteraction(mobileQuery.matches);
// 监听媒体查询状态变化
mobileQuery.addEventListener('change', (e) => {
  updateFooterInteraction(e.matches);
});

优势： #

• 只有当屏幕宽度跨越断点时才会执行逻辑，比监听resize更高效，避免频繁触发。
• 统一管理事件绑定，彻底解决重复绑定导致的多次执行问题。
• 逻辑清晰，状态切换更可靠。

方案二：防抖优化的resize监听 #

如果需要兼容极少数不支持matchMedia监听的旧浏览器，可以用防抖来优化resize事件：

// 防抖函数，减少resize事件的触发频率
function debounce(func, delay = 200) {
  let timer;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(() => func.apply(this, arguments), delay);
  };
}

// 处理窗口尺寸变化的逻辑
function handleResize() {
  const isMobile = $(window).width() < 960;
  const $trigger = $('.slect span');
  const $footer = $('.home-footer');
  
  $trigger.off('click', toggleFooterState);
  
  if (isMobile) {
    $trigger.on('click', toggleFooterState);
  } else {
    $footer.removeClass('open-in-mob');
  }
}

// 统一的footer切换逻辑
function toggleFooterState() {
  $('.home-footer').toggleClass('open-in-mob');
}

// 页面初始化与事件绑定
$(document).ready(() => {
  handleResize();
  // 绑定防抖后的resize事件
  $(window).resize(debounce(handleResize));
});

优势： #

• 防抖函数大幅减少resize事件的触发次数，提升页面性能。
• 同样避免了重复绑定事件的问题。

额外优化小建议： #

• 尽量使用事件委托，比如把点击事件绑定到更上层的父元素上，既能避免元素动态生成时事件失效，也能减少事件绑定的开销：

  // 事件委托版本的交互设置
  function setupDelegate(isMobile) {
    const $container = $('body'); // 建议用更接近目标元素的父容器
    $container.off('click', '.slect span', toggleFooterState);
    
    if (isMobile) {
      $container.on('click', '.slect span', toggleFooterState);
    }
  }
  

• 如果项目中可以不用jQuery，直接替换为原生DOM API（比如document.querySelector、classList.toggle），能进一步提升性能。

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