| Home |

2008.05.28 javascriptでもimport!

こんにちは。Googleに足を向けて眠れない20代のサーバーサイドエンジニアaodagです。
でも今日はクライアントサイドのお話です。
cssだと、@importを使えば、複数のcssファイルをまとめてインポートできますよね。
これをJavascriptでもできないかとふと思ったわけです。
Blogランキング参加しています

ということで、以前も試したのですが、onloadイベント後にスクリプトのロードが終了するため、各種の初期化処理を呼ぶタイミングがとれず断念していました。

最近、そのタイミングは、最後にコールバック関数を呼ぶscriptタグ作れば、スクリプトロード終了時に初期化処理を呼び出せることに気づいたので、作りました。
あと、階層が違ってもいいように、呼び出し元のsrc属性からjsのベースURLを取得するというおまけつき(この部分はMochikit.jsを参考にしました。)

と、方針が決まったので、とりあえずFirebugをお供にFirefoxで確認。
よしOK!
と思ったら、IE7でエラーが...
IEだと、scriptエレメント内に書き込みができないんですね...
しょうがないので、コールバックを別ファイルにして、そのファイルを最後に読み込むことにします。
ファイル名に依存しているので、汎用性はちょっと低め。
IEで素直に動いてくれればねぇ。

//import.js


var vish = {};
vish.onimport = function(src) {};
vish.init = function() {
    var scripts = document.getElementsByTagName('script');
    for (var i=0; i < scripts.length; i++) {
        var s = scripts[i];
        var src = s.getAttribute('src');
        if(src.match(/import.js$/)){
            vish.base=src.substring(0,src.lastIndexOf("import.js"));
        }
    }
};
vish.imports = function(name, srcArry) {
    prefix = vish.base;
    var old = window.onload;
    window.onload = function() {
        for (var i=0; i < srcArry.length; i++) {
            var src = srcArry[i];
            var s = document.createElement('script');
            s.setAttribute('src', prefix + src);
            s.setAttribute('type', 'text/javascript');
            document.body.appendChild(s);
        }
        var c = document.createElement('script')
        c.setAttribute('type', 'text/javascript')
        c.setAttribute('src', prefix + 'importcallback.js');
        document.body.appendChild(c);
        if (old) {
            old();
        }
    }
};

//importcallback.js


vish.onimport();

使うときは以下のようにします。



vish.init();
vish.onimport = function(src) {$.ready()};
vish.imports('baseimports',
             ['a.js',
             'b.js',
             'c.js',
             ]);

ただし、IEでは、jQueryなど一部のライブラリでうまく動きません。
onload後にスクリプトをロードするのが良くないのでしょうか。