Backbone.js：无需刷新页面，在resize事件中修改View事件监听器

这个思路完全可行，但因为 Backbone.View 的 events 哈希默认是静态定义的，要在窗口缩放时动态修改事件监听器，我们需要借助 Backbone 提供的 delegateEvents() 方法来实现。下面是具体的优化方案：

核心实现步骤 #

1. 定义不同断点的事件配置 #

先把移动端和桌面端需要的事件分别定义好，方便后续切换：

// 移动端事件集合
const mobileEvents = {
  "click .item": "onExpand",
  "click .panel": "onPanelExpand"
};

// 桌面端事件集合
const desktopEvents = {
  "mouseenter .item": "onHoverExpand",
  "click .panel": "onPanelExpand" // 部分事件可复用
};

2. 实现动态事件绑定的 View 类 #

在 View 的初始化过程中添加 resize 监听，并通过方法动态更新事件绑定：

module.exports = View.extend({
  className: 'results',
  
  initialize: function() {
    // 对 resize 事件做节流处理，避免频繁触发
    this.resizeHandler = _.throttle(this.updateEvents.bind(this), 200);
    $(window).on('resize', this.resizeHandler);
    
    // 视图加载时初始化事件绑定
    this.updateEvents();
  },
  
  updateEvents: function() {
    // 判断当前视口是否属于移动端（可自定义断点数值）
    const isMobile = window.matchMedia('(max-width: 768px)').matches;
    
    // 根据断点选择对应的事件配置
    const eventOptions = isMobile ? mobileEvents : desktopEvents;
    
    // 重新绑定事件，自动替换原有监听器
    this.delegateEvents(eventOptions);
  },
  
  // 移动端展开逻辑
  onExpand: function(e) {
    // 你的业务代码
  },
  
  // 通用面板展开逻辑
  onPanelExpand: function(e) {
    // 你的业务代码
  },
  
  // 桌面端 hover 展开逻辑
  onHoverExpand: function(e) {
    // 你的业务代码
  },
  
  // 视图销毁时清理监听，防止内存泄漏
  remove: function() {
    $(window).off('resize', this.resizeHandler);
    View.prototype.remove.apply(this, arguments);
  }
});

关键细节说明 #

• 动态事件更新：Backbone 的 delegateEvents() 是核心，它允许我们在运行时重新绑定事件，传入新的事件哈希后会自动覆盖之前的绑定。
• 节流优化：窗口 resize 事件会频繁触发，使用 _.throttle 限制回调执行频率（比如每 200ms 一次），能有效避免性能问题。
• 初始化绑定：视图初始化时必须调用一次 updateEvents()，确保页面加载时就使用正确的事件配置。
• 内存泄漏防范：在视图的 remove 方法中移除 resize 监听，避免视图销毁后仍然存在无效的事件回调。

扩展：添加而非替换事件 #

如果你的需求是在基础事件上追加移动端专属事件（不是完全替换），可以修改事件合并逻辑：

// 基础通用事件
const baseEvents = {
  "click .panel": "onPanelExpand"
};

// 移动端额外事件
const mobileAddons = {
  "click .item": "onExpand"
};

// 在 updateEvents 方法中：
const currentEvents = {...baseEvents};
if (isMobile) {
  Object.assign(currentEvents, mobileAddons);
}
this.delegateEvents(currentEvents);

这种方案可以完美实现窗口缩放时无需刷新页面，自动切换响应式事件逻辑的需求，是 Backbone 开发中常用的实践方式。

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