PDA

View Full Version : ElementにHTMLをロードする度に、JSファイルが溜まってしまう


yossy_('-')
17 Mar 2009, 3:22 AM
はじめまして。

現在、特定の Element の中に別 HTML を load するサンプルを作っています。
ツールバーのメニューによって load する HTML を変更しています。

サンプルコード

<html>
<head>
<title>test</title>
<link href="lib/ext/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="lib/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="lib/ext/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
var menu1 = new Ext.Action({
text: 'Menu1',
handler: function() {
Ext.get('main').load({
url: 'test.html',
scripts: true,
nocache: true
});
}
});

var menu2 = new Ext.Action({
text: 'Menu2',
handler: function() {
Ext.get('main').load({
url: 'test2.html',
scripts: true,
nocache: true
});
}
});

var panel = new Ext.Panel({
title: 'TEST',
width:600,
height:300,
tbar:[ menu1, menu2 ],
html: '<div id="main"></div>',
renderTo: 'contents'
});
});
</script>
</head>
<body>
<div id="contents"></div>
</body>
</html>
load する HTML の中では、

<script type="text/javascript" src="js/sample.js"></script>のように Javascript ファイルを読み込んでいるのですが、メニューによって HTML を切り替える度に
この読み込んだ Javascript ファイルが <HEAD> に溜まっていってしまいます。

load する HTML が切り替わるタイミングなどで、読み込んでいる Javascript ファイルを消す方法や
溜めないためのアイデアなど無いでしょうか。

よろしくお願いします。
yuki
17 Mar 2009, 4:43 PM
のように Javascript ファイルを読み込んでいるのですが、メニューによって HTML を切り替える度に
この読み込んだ Javascript ファイルが <HEAD> に溜まっていってしまいます。

load する HTML が切り替わるタイミングなどで、読み込んでいる Javascript ファイルを消す方法や
溜めないためのアイデアなど無いでしょうか。


「読み込んでいるファイル（メモリー上から）消す」というのは実際できないと思いますが、、、


HEADタグ内のSCRIPTタグを消す
DOM操作で消すしかないですよね。読み込んだJSのファイル名が分かるのであれば、例えば、


Ext.select('script[src=ファイル名]').remove()

これだけでDOMからの削除はできます。

読み込んだJSファイルで定義していた変数を消す
実際にメモリーを解放するのはブラウザになりますが、変数の衝突を回避するためであれば、普通に


delete 変数名

でOKかと。


あと、上記の操作を行うタイミングですが、ElementにはgetUpdaterというメソッドがあるので（Element.loadは内部的にUpdaterのupdateメソッドを呼んでいるだけなので）、Ext.Updaterを取得しておいて、そのbeforeupdateとupdateイベントの際に不必要なタグや変数を削除する処理を行ってはどうでしょうか？:)
yossy_('-')
17 Mar 2009, 8:23 PM
なるほど。

非常に参考になりました。
その方法でやりたい事はできそうです。

HEADタグ内のSCRIPTタグを消す部分は属性名の前に@を付けて消せました。

Ext.select('script[@src=ファイル名]').remove();ありがとうございました。
yuki
17 Mar 2009, 11:09 PM
よかったです:)


HEADタグ内のSCRIPTタグを消す部分は属性名の前に@を付けて消せました。

@はオプションなので省略可能なんですけどね:-?