[JavaScript]動的ロード(遅延ロード)３

[javascript][ajax]
遅延ロードに関するまとめ。

外部 js をいくつかロードした後に実装したいコードを書く。
C でいう include、Java でいう import、Perl でいう use みたいなことがしたい。
んで、最速さんの wait 関数利用してこんな感じにした。

use.js

var USE;
(function() {

var LIB_PATH = './';

USE = {
/**
* synchronized import list
*/
use: function(importList, fn) {
var importInfo = importList.shift();
_import(importInfo[0], importInfo[1]);
wait(importInfo[0], function() {
if (importList.length == 0) {
// import compleated! (>_<
fn();
} else {
this.use(importList, fn);
}
});
}
}

/**
* checked import class
*/
function isDefined(className) {
try{
if (eval(className) == undefined) {
return false;
}
return true;
} catch(e) {
return false;
}
}

/**
* dynamic import
*/
function _import(className, libName) {
if (isDefined(className)) {
} else {
var fullpath = LIB_PATH + libName + '.js';
var s = document.createElement('script');
s.src = fullpath;
s.type = 'text/javascript';
s.charset = 'utf-8';
document.body.appendChild(s);
}
}

function wait(clazz, func, cnt) {
var check = 0;
var timerID;
cnt = (cnt || 100);
try {
eval("check = " + clazz);
} catch(e) {}
if (check) {
func();
} else {
cnt--;
var f = function(){ wait(clazz, func, cnt) };
if (cnt == 0) {
func();
} else {
timerID = setTimeout(f, 100);
}
}
}

})();

こんな感じの基本ライブラリ用意しといて、これだけHTML側にタグで読み込む。
使う側はこんな感じのコードを書く。

<script type="text/javascript" charset="utf-8">
// <![CDATA[
USE.use([['Builder', 'builder'],
['Effect', 'effects'],
['Droppables', 'dragdrop'],
['Autocompleter', 'controls'],
['Control.Slider', 'slider']],
function() {
alert('読み込み完了');
// do something...
})
// ]]>
</script>

bodyタグに append するから、window の onload() 処理してからじゃないとだめだから
その辺はイベントリスナしこんで適当にやればよい。

とりあえず use つかって リスト で import したい js ファイルを渡すと
上から順番に同期とって読み込み待ちしてくれる。

つーか、言語でサポートしてくれねぇかなｗ

* 関連記事
[JavaScript]動的ロード(遅延ロード)２