JavaScriptやCSSファイルの読み込みを簡単にする
HTML5ではimportScript()というメソッドが追加され、スクリプトをその場で読み込めるらしいですが、私が常々思うのは、JavaScriptライブラリやプラグインをたくさん使っているとscriptタグやlinkタグだらけになって、headタグ内が見づらくなるということ。
そこで、ソースコード上だけでもすっきりさせるために、ローダースクリプトを書いてみました。単独で動きます。
とりあえず、ソース。
ひとまず、JavaScriptとCSSをデフォルトで読み込んでみます。というか、それも上記スクリプトにすでに実装されているのですがカスタマイズできないと辛いですよね。なので、そのスクリプトを参考にしてみます。
まずはJavaScript
/**
* Write script tag
*
* @param path
* @param charset
*/
function loadScript(path) {
var sl = ScriptLoaderManager.getInstance('script', './assets/', 'UTF-8');
var path = sl.createImportPath(path);
if (path != null) {
document.write('<script type="text/javascript" src="' + path + '" charset="' + sl.getCharset() + '"></script>');
}
}
単純ですけど、ScriptLoaderManager.getInstance('ローディングID', 'ベースパス', '文字コードセット')を指定してください。
- ローディングID： 単純にScriptLoaderインスタンスを管理するために必要です。
- ベースパス： 共通のベースパス。デフォルトは「./assets/」。
- 文字コードセット： このインスタンスのデフォルト文字コードセット。
どうってことないですね。で、CSS用は以下の通りです。
/**
* Write style tag
*
* @param path
* @param charset
*/
function loadStyle(path) {
var sl = ScriptLoaderManager.getInstance('style', './assets/', 'UTF-8');
var path = sl.createImportPath(path);
document.write('<link rel="stylesheet" type="text/css" href="' + path + '" charset="' + sl.getCharset() + '" />');
}
説明は、、、上のやつと同じ！JavaScriptでFactoryみたいなことやってみたりしてます。結構無理があるかもです。
で使い方は以下のとおり。
// SqueezeBox
loadScript('scripts/SqueezeBox/SqueezeBox.js');
loadStyle('scripts/SqueezeBox/SqueezeBox.css');
すると./assets/scripts/SqueezeBox/SqueezeBox.jsと./assets/scripts/SqueezeBox/SqueezeBox.css用のタグが出力され、ブラウザに読み込まれます。（上の例は結局同じ設定でしてるから、あまり違いがわかりませんね。失礼・・・）
でもまぁ、使ってみろ！
コメント