Backbone视图显示与隐藏事件：原生支持还是需手动实现？

嘿，这个问题问到点子上了！先给你明确结论：Backbone.js本身并没有为视图提供原生的on show和on hide事件机制。它的视图系统核心聚焦在DOM渲染、事件绑定与基础生命周期管理上，但没有内置监听元素显示/隐藏状态变化的专属事件。

那要实现这类需求，通常有两种常用的思路：

1. 结合jQuery手动封装显示/隐藏逻辑 #

jQuery本身提供了show()、hide()、toggle()等DOM操作方法，我们可以在视图里封装自定义的显示/隐藏方法，同时手动触发对应的自定义事件：

var MyView = Backbone.View.extend({
  initialize: function() {
    // 绑定自定义事件的处理函数
    this.$el.on('view:show', this.handleShow.bind(this));
    this.$el.on('view:hide', this.handleHide.bind(this));
  },
  
  handleShow: function() {
    console.log('视图已显示！');
    // 这里可以写显示后的逻辑：比如加载数据、启动轮询定时器等
  },
  
  handleHide: function() {
    console.log('视图已隐藏！');
    // 这里可以写隐藏后的逻辑：比如清理定时器、取消未完成的请求等
  },
  
  // 自定义显示方法，触发show事件
  showView: function() {
    this.$el.show();
    this.$el.trigger('view:show');
  },
  
  // 自定义隐藏方法，触发hide事件
  hideView: function() {
    this.$el.hide();
    this.$el.trigger('view:hide');
  }
});

如果需要监听外部代码修改视图显示状态的情况，还可以用MutationObserver监听元素的display/visibility属性变化，比老旧的DOMSubtreeModified事件更高效。

2. 利用Backbone自身事件系统自定义生命周期事件 #

Backbone.View继承了Backbone.Events，所以可以直接在视图内部触发自定义事件，再绑定处理函数，更贴合Backbone的设计风格：

var MyView = Backbone.View.extend({
  initialize: function() {
    // 直接绑定Backbone事件
    this.on('show', this.onShow, this);
    this.on('hide', this.onHide, this);
  },
  
  onShow: function() {
    // 处理视图显示后的逻辑
  },
  
  onHide: function() {
    // 处理视图隐藏后的逻辑
  },
  
  renderAndAttach: function() {
    this.render();
    this.$el.appendTo('#app-container');
    this.trigger('show'); // 手动触发show事件
  },
  
  detachView: function() {
    this.$el.detach();
    this.trigger('hide'); // 手动触发hide事件
  }
});

总结一下：Backbone不自带show/hide事件支持，需要你结合jQuery或Backbone自身的事件系统手动实现，两种方案都很常用，可根据业务场景灵活选择。

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