2012-04-04 6 views
9

私はwhy it's betterhow it's implementedを読みました。しかし、私が実際に理解していないのはどのように循環参照を壊すのですか?jQuery data()が循環参照を破る方法

基準円をどのように破るのですか?

$(div1).data('item', div2); 
$(div2).data('item', div1); 

例のように、上記のdivは互いにどのように防止されていますか?私は勘違いしているが、ちょうど私の感情が正しいかどうか確かめたい。

答えて

12

循環参照の問題は、DOMオブジェクトのDOMオブジェクトへの参照をそのDOMオブジェクトのプロパティとして配置すると、一部のブラウザで発生します。次に、2つのDOMオブジェクトが互いに向き合うようにします。カスタムプロパティを持つDOMオブジェクトを削除しても、そのカスタムプロパティはクリアされません。このスマートではないガベージコレクタは、このDOMリファレンスがカウントされないため、スタックされず、リークを引き起こす可能性があるいくつかの方法があることに気付きません。

.data()は、.data()のデータがDOMオブジェクト上に存在しないため、この問題を解決します。これは、一意の文字列IDを介してDOMオブジェクトに関連付けることができる、JavaScriptのデータ構造です。

これの一部を混乱1は、あなたが.data("key")で読み、keyは、その後だけにして、javascriptを.data()データ構造において発見されたときに、jQueryの"data-key"と呼ばれるDOMオブジェクトの属性を探すということです。しかし、.data("key", "myData")で書くと、DOMオブジェクトには書き込まれず、JavaScriptのデータ構造にのみ書き込まれます。

したがって、.data()はDOMオブジェクトにデータを書き込むことはないので、一部のブラウザで問題となるこれらの循環参照型は存在しません。

.data()データ構造について知っておくと便利なことがいくつかあります。 jQueryの.remove()を使用してDOMから要素を削除した場合、または$(elem).html("new html")を呼び出すと、削除された項目のデータはすべて削除されます。.data()これは、jQueryとプレーンなjavascriptを混在させないのが良いケースです。 .data()を使用している場合、jQuery関数を使用してDOMからアイテムを削除する必要があります。.data()は適切にクリーンアップされます。そうしないと、メモリリークが発生する可能性があります(.data()のデータが漏れる可能性があり、.data()で参照されている削除されたDOMオブジェクトが漏れる可能性がありますが、DOMからアイテムを削除するjQueryメソッド)、その後、jQueryのは、適切に物事をクリーンアップしますし、何のリークは存在しません

ので、例えば、これはメモリリークが作成されます:。

// suppose elem is a DOM element reference 

// store some data in jQuery's data storage on behalf of a DOM element 
$(elem).data("someKey", "someValue"); 

// remove DOM element with plain Javascript 
elem.parentNode.removeChild(elem); 

をあなたは無地のJavascript、jQueryを使ってDOM要素を削除しているので以前に保存したデータをクリーンアップする機会はありませんでした。DOM要素自体はガベージコレクトされますが、以前に保存した値 redはjQueryのストレージに孤立しており、決してクリアされない可能性があるため、本質的に「リーク」です。一方、あなたがこれを行う場合:

$(elem).data("someKey", "someValue"); 
$(elem).remove(); 

を次に、jQueryのは、あなたがDOM要素を削除していることがわかりますし、また、あなたが.data()で保存されたデータをクリアします。

jQueryの最小化されていないバージョンのカップルラインスクリプトを作成してから、デバッガの$(elem).data("key", "whatever")を呼び出して動作させるだけです。

+0

5章の説明を参考にしてください。 –

+0

@ techloris_109 - 例が追加されました。 – jfriend00