Backbone.js事件和内存管理

Dan*_*iel 2 javascript backbone.js

我想使用Backbone.js进行一些事件处理,但我对周期性引用和内存管理没有信心.假设我有一些名为EventStation的静态事件源 - 所以,在脚本开头我说:

var source = new EventSource();
Run Code Online (Sandbox Code Playgroud)

source是为了生活的页面生活,这很好.现在,我还有一个事件消费者:

var EventConsumer = Backbone.Model.extend({
    initialize: function(params) {
        source.on("some_event",this.onSomeEvent,this);
    }
});

function later() {
    var consumer = new EventConsumer();

    // consumer now gets leaked... (I think)
}
Run Code Online (Sandbox Code Playgroud)

later()在某个时候打电话- 最后,我不再有任何消费者的权利,除非我去挖掘内部的东西source.我想我需要添加一些新功能EventConsumer,比如

cleanup: function() {
    source.off("some_event",this.onSomeEvent,this);
}
Run Code Online (Sandbox Code Playgroud)

然后在最后调用它later().

这似乎......不像我想的那么干净.有没有办法更好地做到这一点?如果我使用DOM事件,这会有不同的处理方式吗?

Der*_*ley 5

读这个:

http://lostechies.com/derickbailey/2011/09/15/zombies-run-managing-page-transitions-in-backbone-apps/

虽然它专门讨论了视图,但它适用于任何事件绑定对象.

这个:

Backbone.js:重新填充或重新创建视图?

Johnny Oshika用他的"bindTo"方法和"unbindAll"方法管理事件绑定和解除绑定的想法非常棒.我强烈建议您在管理事件的对象中使用这些方法.

如果您想要实现这一点,我将它内置到我的Backbone.Marionette框架中,在这里:

https://github.com/derickbailey/backbone.marionette/blob/master/src/backbone.marionette.bindto.js

此代码是MIT许可的开源代码,因此您可以随意复制并在任何地方使用它...无需使用Marionette来获得此功能.

要使用BindTo对象,请将其扩展到您自己的对象:


var source = _.extend({}, Backbone.Marionette.BindTo);
Run Code Online (Sandbox Code Playgroud)

或将其用作原型:


var source = Object.create(Backbone.Marionette.BindTo);
Run Code Online (Sandbox Code Playgroud)

然后绑定通过事件源作为第一个参数的事件,之后是所有标准的Backbone事件args:


source.bindTo(myObj, "some_event", this.doStuff, this);
Run Code Online (Sandbox Code Playgroud)

解开一切,


source.unbindAll();
Run Code Online (Sandbox Code Playgroud)

我的实施文档可以在这里找到:

https://github.com/derickbailey/backbone.marionette/blob/master/docs/marionette.bindto.md