自作のスクリプトファイルをYUILoaderでロードする

YUILoaderを使うとYUIのモジュールは簡単にロードできます。YUIを読み込んだスクリプト内で使う分にはこれで問題ありませんが、別のスクリプトファイル中で利用している場合、注意が必要です。

YUI ←依存← 自作のスクリプト ←依存← index.html (ここでYUILoderを使用)

この場合、YUIのロード後に自作のスクリプトファイルをロードする必要があります。scriptタグで普通にロードすると、YUIのロードが後になってしまい、エラーになります。

どうするか?

自作のスクリプトファイルもYUILoaderでロードすればOKです。

自作のスクリプトファイルをYUILoderでロードする

YAHOO.util.YUILoader#addModule()を使用します。

YAHOO.util.YUILoaderのインスタンスを作成します。
YAHOO.util.YUILoader#addModule()で自作のスクリプトを登録します。
- nameオプションでモジュール名を指定します。YAHOO.util.YUILoader#require()ではこの値を指定します。
- typeオプションで種類(js or css)を指定します。
- fullpathオプションでモジュールのURLを指定します。スクリプトを実行するURLからの相対パスで指定できます。(pathオプションもありますが、こちらはhttp://yui.yahooapis.com/2.3.0/build/からの相対パスになるようです。)
- requiresオプションで依存モジュールを指定します。
- verifierオプションでモジュールのロード完了をチェックする関数を指定します。必須です。指定しない場合、insert()の引数で渡した関数が永遠に実行されないので注意。

// ローダーを作成
var loader = new YAHOO.util.YUILoader();

// 自作のスクリプトファイルを追加。
loader.addModule({
    name: "main", // モジュール名
    type: "js",      // モジュールの種別
    fullpath: "./main.js", // モジュールのURL
    requires: ["logger"], // モジュールの依存モジュール

    // べリファイア。モジュールのロードが完了したかチェックする。
    verifier: function( name, loaderCallback ){
        if (typeof main != "undefined") {
            loaderCallback(); // ロードが完了していれば、コールバック関数を実行する。
                                  // 関数を実行しないとinsert()の引数で渡した関数が永遠に実行されないので注意。
        } else {
            var f = arguments.callee;
            setTimeout(function() {
                 f(name, loaderCallback);
            }, 50);
        }
    }
});

loader.require("main"); // メインをロード。依存モジュールで指定したloggerもロードされる。
loader.insert(function() { 
     main(); // main.js内のmain関数を実行。
});

main.jsは次のとおりです。loggerを表示します。

var main = function() { 
    // ログリーダーを貼り付ける。
    new YAHOO.widget.LogReader();
    YAHOO.log("mii",   "warn");
    YAHOO.log("tora",  "error");
    YAHOO.log("shiro", "info");
    YAHOO.log("kuro",  "time");
}

確認はこちらから。

けっこうメンドイですネ。