WinJS.Navigation 名前空間が促進する単一ページ ナビゲーション モデルでのメモリ リークについて心配する必要があります。
セットアップしたモデル (アンロードを実装する場所) は、間違いなく正しいアプローチです。取得する複雑さと深さは、アプリケーションの複雑さに依存します。具体的には、複数のコントロールがあり、複数の手動イベント ハンドラーを使用している場合、これらのハンドラーを一度にクリーンアップできるようにする一連のヘルパーを作成することができます。これは、要素、イベント名、およびハンドラー インスタンスを配列にプッシュするのと同じくらい簡単な場合があります。そのページを離れて DOM から破棄/削除するときに、クリーンアップが必要な項目を削除して配列を焼き尽くすことができます。
ハンドラーと DOM オブジェクトの有効期間が異なる場合のみ、明示的にクリーンアップする必要があることに注意してください。ページ内の DOM 要素にアタッチされたコントロールなど、それらが一緒になくなる場合は、すべてを明示的にクリーンアップする必要はありません。ガベージ コレクターは最終的にそれをクリーンアップします。特にメモリを大量に使用するアプリケーションの場合は、リスナーをより積極的に削除することで、ここでいくつかの利点が得られる可能性があります。
他にも覚えておくべきことがいくつかあります。
- これは、addEventListener コントラクト、つまりリスト ビューを実装する純粋な JavaScript オブジェクトにも適用されます。
- attachEvent を使用しないでください。内部にある古い実装により、壊れないサイクルが発生します。これは実際には非推奨の API であるため、とにかく使用しないでください。
- this ポインターをバインドした場所にイベント ハンドラーを指定するとき、それらをアンバインドしようとするときは注意してください。例えば
例:
var element = getInterestingElement();
element.addEventListener("click", this.handleClick.bind(this));
イベントをデタッチしようとすると、道に迷ってしまいます -- .bind() からの戻り値が風の中で失われ、フックを外すことができなくなります:
var element = getInterestingElement();
element.removeEventListener("click", this.handleClick); // Won't remove the listener
element.removeEventListener("click", this.handleClick.bind(this)); // Won't remove, since it's a different function object
ここでの最善の解決策は、モンキー パッチをhandleClick
適用する前にパッチを適用することです。
または、後で使用するために保管します。
this.handlerClickToCleanup = this.handleClick.bind(this);
element.addEventListener("click", this.handleClickToCleanup);