Emberコンポーネントのクリーンアップコード

Question

Webページにレンダリングされるコンポーネントが増えていることを想像してください。リンクをクリックすると、ホームページ全体が表示されます。 （UI内のすべてのコンポーネントが終了したことを意味します）

メモリリークを避けるために私がクリーンアップするべきことは何ですか？

いくつかの例：

私は、コンポーネントのdidInsertElementでEmber.addObserverを使用した場合、私はwillDestroyElement方法でEmber.removeObserverを使用して、それを削除する必要があります。

添付されているイベントハンドラはすべて切り離す必要があります。

私はいくつかの例を得ることができます/私はクリーンアップする必要がありますすべてのものを参照してリンクをどこですか？

Answer 1

クリーンアップが不要になるようにコードを記述するのが理想的です。あなたは

observeWhatever: Ember.observer('whatever', function() {... 

としてオブザーバを定義した場合例えば

は、特別な解体は必要ありません。同様に、イベントハンドラを

click: function(event) { ... 

と定義した場合、イベントハンドラは必要ありません。しかし、あなたのコンポーネント内のいくつかの要素でDOMイベントを聴きたいのであれば、どうでしょうか？

setupWhatever: function() { 
    Ember.$('.foo.bar.baz').on('click', function() { alert('baz clicked!'); }); 
}.on('init') 

これはかなりアンチパターンであり、それは解体する必要がないという理由だけで：私たちはしばしば、彼らが同じようなことを行うエンバーかのjQueryでプログラミングしているかどうかを思い出すことができない人々を参照してください。それは、アプリケーションの部分を参照する方法と、コールバックを設定する方法と、アクションを処理する方法を完全に混乱しています。 .foo.bar.bazという名前のコンポーネントは、コンポーネントレベルで独自のリスナーを設定する独自のコンポーネントである必要があります。あなたもあなたのため解体されるよう

listen: Ember.on('message', function() ... 

としてのフックを、設定したい場合は

{{foo-bar-baz action=(action 'bazClicked')}} 

actions: { 
    bazClicked() { alert('baz clicked'); } 
    ... 
} 

：それは次のように処理されるアクションを、送信します。

私は、コンポーネントのdidInsertElementでEmber.addObserverを使用した場合、私はwillDestroyElement方法でEmber.removeObserverを使用して、それを削除する必要があります。

didInsertElementにはどのようなオブザーバーを設定しますか？ didInsertElementの過度の使用もアンチパターンです。 Emberを正しく使用している場合は、ほとんど必要ありません。 jQueryアドオンを初期化する可能性がある例外は、そのうちの1つを使用することに非常に不幸な場合です。

タイマーを使用している理由が何であれ、終了時にキャンセルする必要がある場合があります。