Bookmarklet 用 Dynamic Script Loader

これの続きと言えば続き。Bookmarklet で、任意のページに script 要素を挿入する時、複数ファイルを挿入するとして、それらのファイル同士に依存関係があった場合、読み込みタイミングのせいで、うまく行かないことがあります。

例えば prototype.js と scriptaculous をある bookmarklet で使いたくて、両方読み込むようにするとしても、普通に var s = document.createElement("script");... というのを３個連続させると、何々が定義されてないとか出るわけです。やってみましょう。

試しに振ってみる

まずは prototype.js を読み込んで、変形版 scriptaculous を読み込み、それでそれら両方を使った javascript を実行させています。おそらく一回目にクリックしたときは、コンソールにエラーが出ます。２回目にクリックすると、エントリ全体が揺れる、はず。

しかしネットワーク状況もあるだろうし、動作は一定ではないみたいですね。でも作る側としてはエラーはイヤじゃないですか。と言うわけで作ったのがこの逐次順列読み込みscript。

DySL.js

この object を使えば、読み込む script の順番を完全に制御できます。使い方はこんな感じ。

var dysl = new DySL();
dysl.load(
	"http://tksh.local/beta/alert2.js", 
	{src:"http://tksh.local/beta/alert3.js", id:"abcdedf"}, 
	"http://tksh.local/beta/alert4.js"
);

load メソッドは、src attribute に当たる文字列か、src というラベルを持つ Object を受け付けます。script が持ちうる attribute なら何でもラベルにくっつけてやれば（language とか charset とか）、そのまま反映されます。

欠点としては、読み込まれる側の script に、必ず手を加えなければいけないことでしょうか。ま、是は bookmarklet での使用があるので、多少の手入れは容認しました。ツールを作ればいいのかな。。

以下 DySL.js のコード

function DySL() {};
DySL.prototype = {
	queue: new Array(),
	status: new String(),
	done: function() {
		alert("done");
	},
	finish: function() {
		if (this.queue.length != 0) {
			this.inject();
		} else {
			if (this.status == "LOADING") {
				this.status = "DONE";
				this.done();
			} else {
				alert("no file path is passed yet.");
			}
		}
	},
	inject: function(){
		var crntSrc = this.queue.shift();
		var z = document.createElement("script");
		z.type = "text/javascript";
		for (var i in crntSrc) {
			z.setAttribute(i, crntSrc[i]);
		}
		document.body.appendChild(z);
	},
	load: function() {
		var len = arguments.length;
		if (len != 0) {
			this.status = "LOADING";
			for (var i = 0; i < len; i++) {
				switch( typeof(arguments[i]) ) {
					case "string" :
						this.queue.push({src:arguments[i]});
						break;
					case "object" :
						this.queue.push(arguments[i]);
						break;
				};
			};
		};
		this.inject();
	}
}