Javascriptの読み込みをひとつのファイルにまとめる「import.js」

Javascript2011年1月9日

Javascriptファイルも読み込む数が多くなるとHTMLが煩雑になってきます。そんな時、JavascriptファイルもCSSファイルと同じようにひとつのファイルにまとめることでHTMLソースをきれいにする事ができます。また、サイトで使用しているJavascriptを管理しやすくなります。

HTML

<script type="text/javascript" src="/shared/js/import.js"></script>

Javascript

document.write('<script type="text/javascript" src="/shared/js/jquery.js"></script>');
document.write('<script type="text/javascript" src="/shared/js/fancybox.js"></script>');
document.write('<script type="text/javascript" src="/shared/js/shCore.js" charset="shift_jis"></script>');
document.write('<script type="text/javascript" src="/shared/js/shBrushXml.js"></script>');
document.write('<script type="text/javascript" src="/shared/js/shBrushJScript.js"></script>');
document.write('<script type="text/javascript" src="/shared/js/shBrushCss.js"></script>');
document.write('<script type="text/javascript" src="/shared/js/run.js"></script>');

また、ひとつの関数にまとめて記述する方法もあります。

function importJS() {
if (! new Array().push) return false;
var scripts = new Array(
'path/hoge.js',
'path/moge.js'
);
for (var i=0; i<scripts.length; i++) {
document.write('<script type="text/javascript" src="' +scripts[i] +'"><\/script>');
}
}
importJS();

ひとつの関数に書いてfor文でループをまわしたほうがJavascriptコード的には美しいですが、document.writeで逐一記述したほうがパフォーマンス的に良い可能性が高いので、独学Webデザイナーの覚書ではひとつひとつ記述しています。

この記事を読んでいる方にオススメの記事

「Javascript」の他の記事を読む

馬場　勝美さん

2012年10月31日

教えて頂きたい事があり、ご連絡させて頂きます。
ｊａｖａｓｃｒｉｐｔを利用して、テキストデータをクリップボードにコピー
したいのですが、参考サイトを見つけて試しているのですが、

で記述されているサイトが見つからず苦慮しています。
/javascript/83.html
のサイトで、
「クリップボードにコピー」の処理を行いたいです。
大変ご無礼なお願いで申し訳ありませんが、この部分の記述方法を教えて頂けませんでしょうか？

宜しくお願い致します。

admin さん

2012年12月17日

馬場様

コメントありがとうございます。
返信が遅くなってしまい大変申し訳ありませんでした。

すみません、自分の読解力が足らずご質問の意図がわからないのですが、
当サイトで使用しておりますコードシンタックスハイライト機能を実装したいという事でしょうか？
ご質問に対し質問を返してしまい恐縮なのですが、どうぞよろしくお願いいたします。

桜田さん

2013年6月26日

こんな方法もありますが….

//INIT
var js=document.createElement(“script”);
js.setAttribute(“src”,”js/init.js”);
document.head.appendChild(js);

//LIB
var js=document.createElement(“script”);
js.setAttribute(“src”,”js/lib.js”);
document.head.appendChild(js);
//
//CSS
document.createStyleSheet(“css/top.css”);
//

admin さん

2013年7月4日

桜田様

コメントありがとうございます。
DOMを生成・操作して読み込む方法ですね。
よりプログラムチックで、個人的にはその書き方もいいと思います！

なふさん

2013年7月5日

なるほど、この方法で書いておけば、
ページが複数あっても修正するのが楽ですね。

ちなみに、すべて普通にで呼び出すのと比べて、
何かレスポンスに違いが出たりしますか？？

admin さん

2013年7月7日

なふ様

コメントありがとうございます。
結局はサーバにはjsの数だけリクエストを投げることにはなるため、そこまでパフォーマンスに違いは出ないかと思います。
この辺は好みかとは思いますが、個人的にはfor分でループをまわすほうが「’path/moge.js’」の部分だけ増やせばよいので、メンテナンスの観点からもひとつの関数にまとめたほうがいいような気がします。

この記事にコメントする

※承認制のため、即時には反映されません。