javascript - 清除主干模型/集合内存泄漏

Question

尝试使用 Chrome 中的堆快照工具来处理 Backbone 的内存管理。 View 上有一个后退按钮，单击该按钮将通过主干路由器将当前 View 与新 View 切换。

我在初始页面上拍摄了一张快照，导航到带有后退按钮的页面，单击后退按钮并拍摄了另一张快照。我希望使用比较选项时堆快照是相同的。然而，旧模型/集合似乎没有被清除(它们在快照中以白色突出显示，即仍然可以通过图表的根访问)。而且看起来 View 本身也没有被删除(快照中相同的白色突出显示)。

我链接了一个图表来帮助解释( /image/mlN2I.jpg )。假设 View V1 嵌套三个 View ，其中 V2 包含模型 M1，V3 包含模型 M2，V4 包含 Backbone 集合 C1。 M1 监听 M2 的更改并相应地更新自身。为了正确删除 View V1，请执行以下操作:

• 在 V1 及其所有 subview (以及这些 subview 的 subview ，如果存在)上调用 Backbone.View.Remove
• 对所有模型(以及这些模型的子模型，如果存在)调用 Backbone.Events.StopListening

这足以完全清除 View 吗？似乎大多数在线资源都讨论了主干 View 的正确处理，但没有讨论其模型/集合。

任何帮助将不胜感激。谢谢。

Answer 1

使用此方法从内存中清除 subview 和当前 View 。

//FIRST EXTEND THE BACKBONE VIEW....
//Extending the backbone view...
Backbone.View.prototype.destroy_view = function()
{ 
   //for doing something before closing.....
   if (this.beforeClose) {
       this.beforeClose();
   }
   //For destroying the related child views...
   if (this.destroyChild)
   {
       this.destroyChild();
   }
   this.undelegateEvents();
   $(this.el).removeData().unbind(); 
  //Remove view from DOM
  this.remove();  
  Backbone.View.prototype.remove.call(this);
 }



//Function for destroying the child views...
Backbone.View.prototype.destroyChild  = function(){
   console.info("Closing the child views...");
   //Remember to push the child views of a parent view using this.childViews
   if(this.childViews){
      var len = this.childViews.length;
      for(var i=0; i<len; i++){
         this.childViews[i].destroy_view();
      }
   }//End of if statement
} //End of destroyChild function


//Now extending the Router ..
var Test_Routers = Backbone.Router.extend({

   //Always call this function before calling a route call function...
   closePreviousViews: function() {
       console.log("Closing the pervious in memory views...");
       if (this.currentView)
           this.currentView.destroy_view();
   },

   routes:{
       "test"    :  "testRoute"
   },

   testRoute: function(){
       //Always call this method before calling the route..
       this.closePreviousViews();
       .....
   }


   //Now calling the views...
   $(document).ready(function(e) {
      var Router = new Test_Routers();
      Backbone.history.start({root: "/"}); 
   });


  //Now showing how to push child views in parent views and setting of current views...
  var Test_View = Backbone.View.extend({
       initialize:function(){
          //Now setting the current view..
          Router.currentView = this;
         //If your views contains child views then first initialize...
         this.childViews = [];
         //Now push any child views you create in this parent view. 
         //It will automatically get deleted
         //this.childViews.push(childView);
       }
  });