スクリプトローダ JohnnyDepp.js を書きました

JohnnyDepp.js という JavaScript のスクリプトローダを書いてみました。依存性 (DEPendency) を解決するところから JohnnyDEPp.js です。名前だけはとてもクールだと思います。

一点注意。世の中には、LABjs をはじめ、ControlJS、Head JS など JavaScript ローダは沢山ありますので、プロダクションコードではこれらのライブラリを使ってください。

また、スクリプトローダに関しては賛否が色々あると思います。私の経験上、スクリプトローダで複数の JavaScript ファイルを読み込むよりは、プロダクション環境にデプロイする際に minify して 1 つのファイルにチャンクするのが手堅いと思います。

…それでは、JohnnyDepp.js の説明に入ります。

JohnnyDepp.js

デモページの解説

上記のデモページでは、幾つかの JavaScript ファイルを使用していますが、HTML には、ライブラリを除くと app/Application.js のみ指定されています。lib/Application.js を起点として、JohnnyDepp.js が幾つかの JavaScript ファイルを読み込んだ後に、最終的に「地獄のミサワ」の、ジョニー・デップに激似な櫻井 (29) の画像がランダムで表示されます。

HTML

<script type="text/javascript" src="Processor.js"></script>
<script type="text/javascript" src="JohnnyDepp.js"></script>
<script type="text/javascript" src="app/Application.js"></script>

app/Application.js

//this is app/Application.js
//コンテキストの指定
JD.setContext("app/Application.js");
JD.require(
  "exlib/jquery-1.5.min.js",
  "lib/UI.js",
  "lib/config/Config.js",
  //コールバック関数
  function () {
    //"depps" 配列は lib/config/Config.js で定義されている
    //"getRandomInt" 関数は lib/util/MathUtil.js で定義されている
    //lib/util/MathUtil.js は lib/UI.js で require されている
    //本来は Application.js が require("lib/util/MathUtil.js") すべき
    var src = depps[getRandomInt(depps.length)];

    //"renderDepp" 関数は lib/UI.js で定義されている
    $(function() {
      renderDepp(src);
    });
  }
);

まず、JD.setContext の引数にそのファイル自身の、HTML からの相対パスを指定します。これで、読み込み時のパスのルートが決まります。ちょっとダサいです。

次に、JD.require で、そのコードに必要な JavaScript ファイルのパスを指定します。Application.js は jQuery、lib/config/Config.js、lib/UI.js を必要とします。JohnnyDepp.js は JavaScript ファイルを並列処理で読み込みます (並列処理は自身がないコードです)。引数の最後には、読み込み完了時の callback 関数を指定します。

依存性を解決する

サンプルコード lib/UI.js の中身は下記のようになっています。コンテキストは Application.js で指定したのでここでは必要ありません。つまり、require で指定するパスは Application.js からの相対パスとなっています。ちょっとダサいです。

//this is UI.js
JD.require(
  "exlib/jquery-1.5.min.js",
  "lib/config/Config.js",
  "lib/util/MathUtil.js",
  function () {
    //callback
  }
);

Application.js は lib/UI.js を必要としますが、lib/UI.js がさらに lib/util/MathUtil.js を必要とする場合、JohnnyDepp.js は、よしなに依存関係を解決します。サブモジュールの依存関係ツリーをすべて解決した後に Application.js の callback 関数が呼ばれます (なぜか上手く動いています)。

一度読み込んだスクリプトは読み込まない

また、一度読み込まれた JavaScript ファイルは読み込みません。lib/UI.js 内でも jQuery が指定されていますが、jQuery はすでに読み込み済みなので、スクリプトの読み込みは実行されません。

…と、こんな感じのライブラリです。名前だけはとてもクールだと思います。ジョニー・デップ主演のパイレーツ・オブ・カリビアンの続編も要チェック。