如何在不影响 DOM 的情况下从元素中分离 Backbone 视图？答案

【问题标题】：How do you detach a Backbone view from an element without affecting the DOM?如何在不影响 DOM 的情况下从元素中分离 Backbone 视图？
【发布时间】：2013-05-17 21:27:43
【问题描述】：

我们正在使用 Backbone 视图来增强我们的应用程序，而我们的应用程序架构要求我们将视图附加到现有的 DOM 元素。

我们最近遇到了一种情况，需要在不移除 DOM 元素本身的情况下从 DOM 元素中分离 Backbone 视图。因此，我们不能使用View.remove()，因为它会反过来调用this.$el.remove()；

我最初创建了以下分离视图的方法，但我担心我可能会导致内存泄漏：

detach: function() {
  this.stopListening();
  this.unbind();
  this.setElement(null);
}

这有效地用空的 jQuery 对象替换了 View 的元素，并且它解除了所有 Backbone 事件的绑定。但是，我想到 jQuery 可能正在存储对新空对象的引用。我对 jQuery 的内部结构不是很清楚，所以我无法评论这种方法的有效性。

然后我将方法修改如下：

detach: function() {
  this.stopListening();
  this.unbind();
  this.undelegateEvents();
  this.el = null;
  this.$el = null;
}

我认为这更好地实现了预期的结果，因为它删除了对 DOM 和 jQuery 的所有引用。我对这种方法不是 100% 有信心，所以我想知道其他人是如何处理这种情况的。

这个方法听起来不错吗？有没有更好的方法来实现这一点？

【问题讨论】：

标签： javascript jquery backbone.js

【解决方案1】：

扩展 View 并覆盖 remove 使其不再调用 this.$el.remove();

例子

var EnhanceView = Backbone.View.extend({
 remove: function() {
  this.stopListening();
  return this;
 }
});

应该就这么简单。

【讨论】：

这个视图是否会被垃圾收集器清理掉，因为它仍然引用了一个 jQuery 元素？
删除引用永远不会受到伤害。但是我不能确定GC将如何处理他的（并且没有时间找出）。我会说在 .$el 上使用 delete 并使用 remove 方法与原始 Backbone 流程保持一致。
我认为你也需要undelegateEvents，否则仍然会有一个jQuery on附加到视图的el。