backbone.js - 使用主干从 DOM 中删除项目时出现内存泄漏

Question

我遇到了 DOM 元素删除后仍保留在内存中的问题。我设置了一个示例，如下所示。请注意，我正在使用主干布局管理器插件来管理我的 View (以及 jQuery)。

我在删除列表中的一项之前和之后在 Chrome 中做了堆快照，并对两者进行了比较:

如您所见，LI 元素仍在内存中。

当 View 被删除时，Backbone Layout Manager 会调用 view.unbind() 和 view.stopListening()。

下面是示例代码。

ListOfViewsToDelete.js

var TestModel = Backbone.Model.extend({
  });

  var TestCollection = Backbone.Collection.extend({
    model: TestModel,
  });

  var ViewToDelete = Backbone.View.extend({
    template: "ViewToDelete",
    tagName: "li",
    events: {
      "click .delete-button": "deleteItem"
    },
    deleteItem: function() {
      this.$el.trigger('remove-item', [this.model.id]);
    }
  });

  var ListOfViewsToDelete = Backbone.View.extend({
    template: "ListOfViewsToDelete",
    initialize: function() {
      this.collection = new TestCollection();

      for (var i = 0; i < 5; i++) {
        this.collection.add(new TestModel({id: i}));
      }

      this.listenTo(this.collection, 'all', this.render);
    },
    events: {
      "remove-item": "removeItemFromCollection"
    },
    beforeRender: function() {

      this.collection.each(function(testModel) {
        this.insertView("ul", new ViewToDelete({
          model: testModel
        }));
      }, this);

    },
    removeItemFromCollection: function(event, model) {
      this.collection.remove(model);
    }
  });

路由器.js

app.useLayout("MainLayout").setViews({
                    "#main": new ListOfViewsToDelete()
                }).render();

ListOfViewsToDelete.html

<ul>
</ul>

ViewToDelete.html

View to delete
<button class="delete-button">x</button>

Answer 1

您的代码存在几个问题:

• 您使用 this.$el 作为模型来触发 remove-item 事件。您应该使用您的模型。

• View 应该等待来自模型的事件来知道何时删除自身。

这是我想出的代码。如果它不起作用，请将您的代码发布到某个地方，以便我可以自己运行它。

var ViewToDelete = Backbone.View.extend({
    template: "ViewToDelete",

    tagName: "li",

    events: {
      "click .delete-button": "deleteItem"
    },

    initialize: function () {
      this.listenTo(this.model, 'remove', this.remove);
    },

    deleteItem: function() {
      this.model.remove();
    }
});

default implementation view.remove() 将删除 this.$el 并停止监听模型:

remove: function() {
  this.$el.remove();
  this.stopListening();
  return this;
},

编辑:感谢您在线发布代码。这就是我认为正在发生的事情(我也在为 future 的观众记录)。

如果您拍摄快照，过滤分离的 DOM 树，您会看到:

重要的部分是保留树:防止 LI 被删除的引用。唯一重要的是sizzle-1364380997635。它不是来自您的代码，它实际上来自 jQuery，更具体地说，来自它的 Sizzle 引擎。关键来自这里:

https://github.com/jquery/sizzle/blob/master/sizzle.js#L33

如果您进一步查看代码，您会发现有一个缓存:

https://github.com/jquery/sizzle/blob/master/sizzle.js#L1802

所以，简而言之，您的代码不会泄漏，但 jQuery 有一个内部缓存，可以防止它被删除。该缓存只能包含几十个元素，因此它不会永远保留元素。