[Backbone.js] イベント関連で起きやすいメモリリーク

Backbone.jsを使っていて起きやすい問題ってのを紹介してくれている記事があった。 その中で、頻繁に起きてしまいそうなメモリリークの問題。 onを使ってview側でmodelのchangeイベントをbindしていると、viewを削除した後でもイベント経由でmodelからviewへの参照が残ってしまうらしく、メモリが解放されない。

view plainprint?

1. var MyView = Backbone.View.extend({  
2.     initialize: function(){  
3.         this.model.on('change', this.render, this);  
4.     },  
5.     render: function(){  
6.         //render処理  
7.     }  
8. });  

var MyView = Backbone.View.extend({
	initialize: function(){
		this.model.on('change', this.render, this);
	},
	render: function(){
		//render処理
	}
});

viewをremoveした際に自動で参照を解除するにはonではなくlistenToに変更するとよい。

view plainprint?

1. initialize: function() {  
2.     this.listenTo(this.model, 'change', this.render);  
3. }  

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

違いはイベントをひもづけているのがmodel->viewからview->modelへ変わったこと。 なのでviewを削除すればview->modelへの参照も自動でなくなり、メモリも解放される。 参考Avoiding Common Backbone.js Pitfalls