Mach3.laBlog

実験室: jsファイルを動的にロードするライブラリ

この記事は賞味期限切れです。(更新から1年が経過しています)

この記事の情報は古くなっています。
Require.js や head.js のコードを参考にしてください。

JavaScriptの動的ロードと言えば、「RequireJS」が公開されています。
cf) 外部jsを読み込む事ができるJavaScriptライブラリ「RequireJS」 | Web活メモ帳

たまたま自分が書いていたのと同じような内容で、オッと思いましたが
せっかく書いてしまったものなのでメモっておきます。

var jsLoader = {
    length:null,
    callback:null,
    init:function(list,callback){
        this.length = list.length;
        this.callback = callback;
        while(url=list.shift()){ this.load(url); }
    },
    load:function(url){
        if(!this.findobj(url)){
            var ele = document.createElement("script");
            var _this = this;
            ele.src = url;
            ele.onload = function(){
                _this.onloaded();
            };
            ele.onreadystatechange = function(){
                if(this.readyState=="loaded"||this.readyState=="complete"){
                    _this.onloaded();
                }
            };
            document.body.appendChild(ele);
        }
    },
    onloaded:function(){
        this.length --;
        if(!this.length) this.callback();
    },
    findobj:function(url){
        var eles = document.getElementsByTagName("script");
        for(i in eles){
            if(eles[i].src==url){
                this.onloaded();
                return true; 
            }
        }
        return false;
    }
};

RequireJSとかなーりボリュームが異なりますね…
必要最低限な感じで、色々不足している処理がありそうで怖い。
使い方は奇しくもRequireJSと同じ。

jsLoader.init([
    "jquery.js",
    "jquery-ui.js",
], function(){
    //do something
});

第一引数にはロードしたいjsファイルのURLを配列で、
第二引数にはコールバック関数を渡します。
コールバックはjsファイルのロードが全て完了した時に呼ばれます。

暇があったらRequireJSのソースも読んでみるとします。

コメント

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*