[javascript][ajax]
JavaScriptの話。
動的ロードが公式サポートされてねぇから面倒くさい。
んで、このへんの話を参考にしたわけよ。
script.aculo.us のファイルサイズを軽減する
ファイルサイズ軽減ってのは、読み込むライブラリを動的に変更するから軽減できるわけで
参考になるかもと思った訳だ。
( script.aculo.us つーのは、prototype.js を利用した画面効果が主なライブラリ)
load: function() {
if((typeof Prototype=='undefined') ||
parseFloat(Prototype.Version.split(".")[0] + "." +
Prototype.Version.split(".")[1]) < 1.4)
throw("script.aculo.us requires the Prototype JavaScript framework >= 1.4.0");
$A(document.getElementsByTagName("script")).findAll( function(s) {
return (s.src && s.src.match(/scriptaculous\.js(\?.*)?$/));
}).each( function(s) {
var path = s.src.replace(/scriptaculous\.js(\?.*)?$/,'');
var includes = s.src.match(/\?.*load=([a-z,]*)/);
(includes ? includes[1] : 'builder,effects,dragdrop,controls,slider').split(',').each(
function(include) { Scriptaculous.require(path+include+'.js') });
});こりゃ何してんだっつーと、ドキュメント内から<script>タグ探し出して、
scriptaculous.js ってのがあって、かつその後ろに “load=” ってのがあったら
その後ろに続く文字をカンマ区切りで取得して動的にタグを付け加えるってワケなんだが。
例えば、
<script src="../lib/scriptaculous/scriptaculous.js?load=effect,slider" type="text/javascript"></script>
とやれば、efect.js と slider.js のみ読み込まれて、軽くてイイネ！って話になる。
指定されてなかったら全部読み込みがデフォルト。
んで、このスクリプトそのまま使えばいいじゃん！と思ってやってみたわけだが
<script src="../lib/prototype.js" type="text/javascript"></script> <script src="../lib/scriptaculous/scriptaculous.js" type="text/javascript"></script> <script src="hogehoge.js" type="text/javascript"></script>
ってやって、hogehoge.js の中で scriptaculous の方法で動的にライブラリ読もうとすると何故かエラーになるのね。
んで、何でかなと思って調べてみると hoge.js の中で、 hoge.js タグが見えてないようだった。
いや、正確に言うと IE では見えるんだが、 FireFox で見えない。
試しに小さい javascript ファイル2個作って、scriptaculous みたいに
document.write してライブラリロードしてみて実験したんだが、
小さいライブラリだとうまくいくみたいなんだな。
ようするに、document.write してもscriptはそのまま実行されてて
読み込み終わるまでは時間かかるんじゃねーの？って結論になった。
んでまぁ、その辺ちょっと調べてみようと思ったんだが
既に最速な人がその辺まとめてたから、リンクして終る。
っていうかもう眠いので解説は今度。
* 関連記事
[JavaScript]動的ロード(遅延ロード)２
