在 Backbone.js 中实例化子视图时如何避免内存泄漏

myView =  Backbone.View.extend({
    //event binding etc etc

    render: function() {
        //render some DOM
    }
})

anotherView = Backbone.View.extend({
    events: {
        'click .selector doThis'
    },

    createNewView: function() {
        var view = new myView();
    }
})

createNewView可能会被调用多次。我的理解是变量view不一定会被 JavaScript 的内置垃圾回收删除，因为它引用的对象/代码在createNewView功能完成。

它是否正确？这该如何处理呢？

我目前的方法是初始化myView一旦在我的应用程序级别：

myApp.view = new myView()

Then in createNewView我只是调用渲染：

myApp.view.render()

本质上，我只拥有其中之一，并且会重复使用它。

另一种方法是跟踪数组中子视图的创建，然后我调用.remove()当我知道不再需要它们时，依次对每一个进行处理。

我走在正确的轨道上吗？

我认为第二种方法更好，因为如果myView在其他对象上创建绑定回调listenTo，这些不会简单地通过重新分配变量来删除。也就是说，如果我打电话new要实例化视图的新实例，我应该调用remove()首先是关于被丢弃的实例......看来。

在您的示例中，您没有将视图的el进入 DOM，因此没有任何内容引用该视图，那么它将被垃圾收集器收集。

确保视图不再绑定到某些东西的一件好事是call .remove() on it。它将删除：

• 观点el从 DOM 中，
• jQuery DOM 事件
• Backbone 事件监听器。

骨干.remove source:

// Remove this view by taking the element out of the DOM, and removing any
// applicable Backbone.Events listeners.
remove: function() {
    this._removeElement();
    this.stopListening();
    return this;
},

// Remove this view's element from the document and all event listeners
// attached to it. Exposed for subclasses using an alternative DOM
// manipulation API.
_removeElement: function() {
    this.$el.remove();
},

正如所提到的mu 太短了在评论中（以及我自己在几乎所有其他答案中），你应该始终favor listenTo over on or bind以避免内存泄漏并简化解除绑定事件。

渲染嵌套在父视图中的子视图时，一个好的做法是保留子视图的数组以供以后调用.remove()在他们每个人身上。

一个简单的列表视图可能如下所示：

var ListView = Backbone.View.extend({
    initialize: function() {
        // Make an array available to keep all the child views
        this.childViews = [];
    },
    addOne: function(model) {
        var view = new Backbone.View({ model: model });

        // as you create new views, keep a reference into the array.
        this.childViews.push(view);

        this.$el.append(view.render().el);
    },

    renderList: function() {
        // replace the view content completely with the template
        this.$el.html(this.templates());

        // then cleanup
        this.cleanup();

        // then render child views
        this.collection.each(this.addOne, this);

        return this;
    },

    cleanup: function() {
        // quick way to call remove on all views of an array
        _.invoke(this.childViews, 'remove');
        // empty the array
        this.childViews = [];
    },
});

尽管如果其他对象正在监听它，它不会被收集并且可能是泄漏。跟踪引用并在不再需要时将其全部删除非常重要。