prototype.jsによるAjaxな動的なスクリプトのローディング

javascriptを書いているとjavaみたいにimport文が書けなくて不便、と常々思ってました。で、主に最速インタフェース研究会さんの
ここを参考に、動的にjsファイルを読むクラスを作ってみました。

http://joey.sourceforge.jp/brownie-2.0/js/core/brownie-script.js

scriptタグでロードするのは、prototype.jsとbrownie-script.jsだけでそれ以外はrequire関数でロードします。
この引数には相対パスでも絶対パスでも指定可能です。

例えば、
http://joey.sourceforge.jp/brownie-2.0/sample/brownie-sample-script-a.html
のHTMLでは、
http://joey.sourceforge.jp/brownie-2.0/sample/brownie-sample-script-a-1.js
をscriptタグではなく、require関数を使ってロードしてます。

function loadDynamically() {
    require( $('scriptField').value);
    return false;
}

require関数の中身では、prototype.jsのAjax.Requestクラスを使ってjsファイルをロードしてevalしてます。eval内部で、ロード中のjsファイルでrequire関数が使われた場合は、そのjsファイルからロード対象となるjsファイルへの相対パスを解釈してjsファイルをロードします。

で、これを使って自分のライブラリを直してるんですが、細かくjsファイルを分けてもHTMLファイルにたくさんscriptタグを書かずに済むのが実感できました。いい感じです。

しかしデメリットもありました。FirefoxのVenkmanでデバッグするときに、requireでロードされたjsファイルに問題がある場合、その箇所がトレースの対象にならずデバッグが面倒くさいっす。