実験室: 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のソースも読んでみるとします。
コメント