2012-03-14 11 views
19

jQueryの.remove()は、スクリプトタグを削除するときに読み込まれたjavascriptをクリアしますか?タイトルが言うように、私が使用してDOMからスクリプトタグを削除する場合は、

$('#scriptid').remove(); 

をジャバスクリプト自体がメモリに残っていたり、それが洗浄されますか?

または...私はブラウザがjavascriptを扱う方法を完全に誤解していますか?これはかなり可能です。

を私はPHPで動的に生成されたものに静的なスクリプトファイルからいくつかの一般的なJavaScriptの相互作用を動かしています:下記参照尋ねるための私の理由に興味のある人のための

。ユーザーが必要なときにオンデマンドでロードされます。

これを行う理由は、ロジックサーバーを移動してサーバーから返された小さなスクリプトを実行するためです。クライアント側。膨大な量のロジックを含んだ大きなスクリプトを用意するのではなく、クライアント側。私たちは、インスタンスのためのシンプルなダイアログを取る場合

これはFacebookが何をするか...

Facebook talks frontend javascript

と同様のアプローチです。 htmlをjavascriptで生成するのではなく、domに追加してjqueryUIのダイアログウィジェットを使ってロードします。次のようにします。

  • Ajaxリクエストは
  • Serverは、このダイアログはその後、JSON
  • JSONはクライアントに返されるようにそれらをコード化するために、特定のあるHTMLとJavaScriptを生成dialog.phpさせています。
  • <body>にHTMLが追加されると、これがレンダリングされると、javascriptもDOMに追加されます。

JavaScriptは挿入時に自動的に実行され、動的ダイアログボックスが開きます。

これを行うと、私のページ上のjavasriptの量が大幅に減少しましたが、挿入されたjavascriptのクリーンアップが心配です。ダイアログが閉じられた後

もちろん、それはjQueryのを使用してDOMから削除されます。

$('#dialog').remove();

javascriptのは、IDが付加されており、私も同じ方法を経由してDOMからこれを削除します。

しかし、前述のように、jQueryの.remove()を使用すると、実際にJavaScriptからメモリを消去するか、単純にDOMから<script>要素を削除しますか?

もしそうなら、これをクリーンアップする方法はありますか?

+0

EJSを見ることができます。これにより、JSからHTMLテンプレートを作成できます。 – westo

+0

私はwestoに感謝します。クライアント側のテンプレート作成にはJsRenderを使用します。しかし、私が上で述べたアプローチは、ダイアログだけでなく、テンプレートが適切でない他の多くのやりとりのためのものです。おそらくダイアログの例は良いものではありませんでした。 – gordyr

答えて

19

いいえスクリプトがロードされると、定義されたオブジェクトと関数はメモリに保持されます。スクリプト要素を削除しても、それが定義するオブジェクトは削除されません。これはCSSファイルとは対照的です。要素を削除すると、それが定義するスタイルが削除されます。これは、新しいスタイルを簡単にリフローできるためです。スクリプトタグの作成内容と削除方法を理解することがどれほど難しいか想像できますか?

編集:myFunctionを定義するファイルがある場合は、別のスクリプトにmyFunctionを再定義する別のスクリプトを追加すると、新しい値が保持されます。 DOMをきれいに保つために、古いscriptタグを削除することはできますが、削除するだけで済みます。

EDIT2私が考えることができる機能を「クリーンアップする」唯一の唯一の方法は、基本的にdelete window.myFunctionを呼び出すことができるJSファイルを作成することです。明らかな理由から、これは本当に悪い考えです。

+0

確かに、悲しいことに、私はこれが事実だろうと想像しました。これに対する解決策はありますか?上の例の場合は、ダイアログのIDを増やして動的なjavascriptでその要素IDをミラーリングするのが最善でしょうか?したがって、潜在的重複参照がないことを保証するか?あるいは、この全体のアプローチが再考する必要があると感じていますか? – gordyr

+0

ありがとうKolink - 私はちょうどあなたの編集を見た。だから、明確にするために、jQueryUIの$( '#dialog')。dialog()ウィジェットを新しく作成した#dialog要素にもう一度使って、明らかに異なるjavascriptを使っていたら...単に古いものを置き換えるのだろうか?もしそうなら、これは完璧です。 – gordyr

+0

deleteが悪い考えである理由は何ですか?また、ガベージコレクタは、何も参照していないオブジェクトを処理しないでしょうか?ガベージコレクタを悪用しようとするようだ。 –

4

あなたのスクリプトが既に実行されている場合、DOM要素を削除することでそれらを取り除くことはできません。 JavaScriptを使って任意のページに行き、好みのJavaScriptコンソールを開き、$( "script")とタイプしてください。すべてが走り続けます。

そして、これは@Kolink答えを示しています

http://jsfiddle.net/X2mk8/2/

HTML:

<div id="output"></div> 

<script id="yourDynamicGeneratedScript"> 
    function test(n) { 
    $output = $("#output") 
    $output.append("test " + n + "<br/>") 
    } 
    test(1); 
</script> 

Javascriptを:あなたは、ダイアログを作成するためのJSの量が心配な場合

$("script").remove(); 
// or $("#yourDynamicGeneratedScript").remove(); 

test(2); 
test(3); 
test(4); 

function test(n) { 
    $output = $("#output") 
    $output.append("REDEFINED! " + n + "<br/>") 
} 

test(5); 
test(6); 
test(7); 
+0

ありがとうtomasmuller。この例は非常に高く評価されています。 :) – gordyr

+0

場合によっては、たとえばBackbone.jsを使用してシステムをシングルページアプリケーションとして構築することも考えられます。 [この非常に良い投稿はTrelloのアーキテクチャを説明しています](http://blog.fogcreek.com/the-trello-tech-stack/)をチェックしてください。 – tomasmuller

関連する問題