javascript - $.empty() vs Backbone 的 View.remove()？

Question

我了解当通过 .remove() 删除 View 时，将在该 View 上调用 .stopListening() 以删除与 Backbone 中的该 View 关联的任何事件监听器。来自 Backbone 文档:

删除 view.remove()

从 DOM 中删除一个 View ，并调用 stopListening 以删除任何绑定(bind)的事件 该 View 已监听。

我有附加到容器的 View ，该容器仅通过 Backbone 的事件 Hook 在自身上具有与 dom 操作相关的事件。

var View = Backbone.View.extend({
   events : {
      'input keyup' : 'searchDropdown'
   },

   searchDropdown: function () {
      $('dropdown').empty();
      //Appends views based on search
   }
});

我的问题实际上是在容器上调用 $.empty() 时我是否泄漏了任何内存(重要的或不重要的)，该容器有效地删除了附加在其中的 View 。如果我是，是否有任何好的约定来访问和调用这些 View 上的 .remove()？

Answer 1

您不需要为此使用任何特殊框架，但正确实现删除是个好主意，而不是依赖于足够智能的浏览器来执行此操作。有时在一个大型应用程序中，您会发现您特别需要重写 remove 方法来执行一些特殊的清理工作 - 例如，您在该 View 中使用一个库，它有一个 destroy 方法。

现代浏览器往往有一个 GC，它在大多数情况下都足够智能，但我仍然不想依赖它。最近我在 Backbone 中进行了一个没有 subview 概念的项目，我通过从 empty 更改为 remove (在 Chrome 43 中)将泄漏节点减少了 50%。很难让大型 JavaScript 应用程序不泄漏内存，我的建议是尽早对其进行监控:If a DOM Element is removed, are its listeners also removed from memory?

注意会泄漏大量内存的东西——比如图像。我在一个项目上有一些代码做了这样的事情:

var image = new Image();

image.onLoad(.. reference `image` ..)

image.src = ...

基本上是一个预加载器。因为我们没有明确执行 image = null，GC 从未启动，因为回调引用了 image 变量。在图像繁重的网站上，我们会在每次页面转换时泄漏 1-2mb，这会导致手机崩溃。在 remove 覆盖中将变量设置为 null 修复了这个问题。

在 subview 上调用 remove 就像做这样的事情一样简单:

remove: function() {
    this.removeSubviews();
    Backbone.View.prototype.remove.call(this);
},

removeSubviews: function() {
    if (!_.isEmpty(this.subViews)) {
         _.invoke(this.subViews, 'remove');
         this.subViews = []; 
    }
}

您只需要将您的 subview 实例添加到一个数组中。例如，当您创建一个 subview 时，您可以选择 parentView: this 并将其添加到父 View 的数组中。我过去做过更复杂的 subview 系统，但那会很好用。在初始化 View 时，您可以执行以下操作:

var parentView = this.options.parentView;
if (parentView) {
    (parentView.subViews = parentView.subViews || []).push(this);
}