防止骨干僵尸视图

Question

注意:我们使用的是主干1.0.0

我对Backbone相对较新,并且正在通过一些前同事写的代码.我不是盲目地复制粘贴的东西,而是想了解他是如何做的,当我开始想知道处理僵尸视图的最佳方法时.

var view = new editItemView({ model: this.model });
    this.ui.editItemPopup.html(view.render().el).modal({ modalOverflow: true });

这将创建一个视图实例并以boostrap模式弹出.该模型具有保存更改,取消和删除按钮.我们将查看在保存更改和删除时执行的干净工作.

onDelete: function() {
    this.stopListening(this.model);
    this.$el.parent().modal('hide');
    this.$el.remove();
},
onApplyChangesClick: function () {
    this.stopListening(this.model);
    this.close();
},
close: function () {
    this.$el.parent().modal('hide');
}

据我所知,此代码不会丢弃该视图.如果我要为上述视图添加另一个监听器

this.listenTo(this.model.AnotherItem, 'change', this.doSomething);

然后在this.model.AnotherItem上触发change事件,this.doSomething仍然会触发.正确？

在发布此问题之前,我对Zombie视图进行了一些阅读. http://lostechies.com/derickbailey/2011/09/15/zombies-run-managing-page-transitions-in-backbone-apps/

如果我这样做的话,根据那篇文章,我不会更好

 onDelete: function() {
    this.close()
},
onApplyChangesClick: function () {
    this.close();
},
close: function () {
    this.$el.parent().modal('hide');
    this.remove();
}

his.remove()将自动调用stopListening并删除dom元素(与此相同.$ el.remove)

我发布的文章也使用this.unbind()

this.unbind()will unbind any events that our view triggers directly – that is, anytime we may have calledthis.trigger(...)`在我们的视图中,为了让我们的视图引发一个事件.

Backbone 1.0.0(或最新版本)中仍然需要这样做吗？这篇文章已经有3年了,所以我很想知道,我在骨干文档中找不到view.unbind.该文档提到unbind是off的别名.我应该这样做

this.remove();
this.off();

Answer 1

好吧,首先让我说清楚:这里有一些僵尸视图或者不会给你带来任何问题.任何给定的僵尸视图都会占用少量内存,然后在用户点击刷新或导航时消失.所以,如果你对清理你的参考文献有点草率一般事情仍然可以正常工作.你会遇到问题的地方就是当你有很多僵尸视图时,比如因为你渲染了一个20x100的表,其中每个单元都有自己的View.

现在,要真正了解如何避免僵尸视图,您必须了解内存在Javascript中的工作原理.我鼓励你在其他地方阅读更多相关内容,但这里是悬崖笔记版本:你"停止使用"的任何内容都会被浏览器的垃圾收集器清理干净,因为垃圾收集器无法准确判断你何时"停止使用"某些东西它实际上取决于该东西是否在其他对象上有任何引用.

这是事件绑定发挥作用的地方,因为它们可以创建阻止视图被垃圾收集的引用.Backbone的一个特性是它处理清理这些绑定,如果它们是作为Backbone.View初始化的一部分(即你放在类的events属性中的事件View).因此,如果你View从页面中删除一个元素,它将被垃圾收集...

...除非它有另一个对它的引用,比如使用它的另一个对象,或者你使用jQuery创建的事件绑定.所以,只要你的Views没有任何其他参考,你就是对的:简单地删除元素就足够了.但是如果你有任何其他的引用,你将需要清理它们,否则View将不会收集垃圾,并将成为一个僵尸视图.