如何在onclick及window.resize时调用命名空间化的页脚折叠函数

我懂你想把这个页脚折叠功能的代码封装到命名空间里，避免全局变量污染的需求，这其实不难搞定！我们可以把相关的变量、函数都打包到一个自定义的命名空间对象里，同时给jQuery事件也加上命名空间，方便后续的事件管理。下面是改造后的完整代码，完全保留你的原有逻辑，只是做了命名空间封装：

// 创建自定义命名空间，把所有页脚控制相关的代码都装在这里
var FooterControls = {
  // 初始化方法：用来设置变量、绑定事件，统一启动功能
  init: function() {
    this.footerHeader = jQuery('.footer-heading');
    this.footerColumn = jQuery('.footer-heading + .footerlinks');
    this.cachedWidth = jQuery('body').prop('clientWidth');
    
    // 给点击事件加上命名空间.footerToggle，方便后续精准解绑
    this.footerHeader.on('click.footerToggle', jQuery.proxy(this.collapseFooter, this));
    
    // 如果需要监听窗口尺寸变化来适配断点，也给resize事件加命名空间
    jQuery(window).on('resize.footerToggle', jQuery.proxy(this.handleResize, this));
    
    // 页面加载完成后先执行一次，确保初始状态正确
    this.collapseFooter();
  },
  
  // 核心折叠/展开逻辑，和你原来的函数功能一致
  collapseFooter: function(el, ev) {
    if (window.matchMedia('(max-width: 991px)').matches) {
      // 这里替换成你原来的折叠代码，比如：
      this.footerColumn.slideToggle();
      this.footerHeader.toggleClass('expanded');
      // ...你的其他原有逻辑
    } else {
      // 当屏幕尺寸超过断点时，恢复所有页脚列的展开状态
      this.footerColumn.show();
      this.footerHeader.removeClass('expanded');
    }
  },
  
  // 处理窗口 resize 的方法（可选，如果你需要根据尺寸变化自动调整）
  handleResize: function() {
    var newWidth = jQuery('body').prop('clientWidth');
    // 只有宽度变化超过10px才触发，避免频繁执行
    if (Math.abs(newWidth - this.cachedWidth) > 10) {
      this.cachedWidth = newWidth;
      this.collapseFooter();
    }
  },
  
  // 可选：提供销毁方法，方便在页面卸载或不需要该功能时清理事件
  destroy: function() {
    this.footerHeader.off('click.footerToggle');
    jQuery(window).off('resize.footerToggle');
  }
};

// 页面DOM加载完成后启动这个功能
jQuery(document).ready(function() {
  FooterControls.init();
});

关键改动说明： #

• 命名空间封装：用FooterControls这个对象作为专属命名空间，把所有相关变量和方法都放在里面，彻底避免了全局变量冲突的问题。
• this指向修正：用jQuery.proxy()确保collapseFooter和handleResize里的this始终指向FooterControls对象，这样就能正确访问对象里的footerHeader、footerColumn等变量。
• 事件命名空间：给点击和resize事件加上了.footerToggle命名空间，后续如果需要解绑这些特定事件，直接用off('click.footerToggle')即可，不会影响其他同类型的事件绑定。
• 模块化结构：用init方法统一初始化，代码更整洁；可选的destroy方法让你能在需要时清理资源，更符合前端工程化的思路。

如果你只是单纯想给原有事件添加命名空间（不想封装整个函数），那只需要修改事件绑定的代码就行：

// 给点击事件加上命名空间，比如.footerCollapse
footerHeader.on('click.footerCollapse', collapseFooter);

// 后续解绑时可以精准操作，不会影响其他click事件
// footerHeader.off('click.footerCollapse');

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