いつもならばJSファイルの読み込み方って、
<html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type="text/javascript" src="./xxxxxxx.js"></script> <script type="text/javascript" src="./yyyyyyy.js"></script> <script type="text/javascript" src="./zzzzzzz.js"></script> </head> <body> <h1>hello test</h1> </body> </html>
みたいな感じで、headタグ内に読み込むJSファイルを直接書くけど、最近流行ってるのか、それとも廃れたのかわからないが、こんな感じのソースを見た。
<script type="text/javascript" src="./import.js"></script>
1つのJSファイルだけを読み込んで、その import.js にグローバルで読み込みたいJSファイルを document.write() で読み込むようだ。
そのソースには、
document.write( '<script type="text/javascript" src="./xxxxxxxx.js"></script>' ); document.write( '<script type="text/javascript" src="./yyyyyyyy.js"></script>' ); document.write( '<script type="text/javascript" src="./zzzzzzzz.js"></script>' );
というように書かれていた。
コレはなかなか面白いし、まとまって良いなと思ったので、自分も簡単にまとめてつくってみた。
/**
*
* import.js
* JSファイルをまとめて読み込む
*/
(function(){
var importSrc = function(e){
return '<script type="text/javascript" src="'+ e +'"></script>' + "\n";
}
var path = './static/common/js/';
//jQueryフレームワーク
document.write( importSrc( path + 'jquery-1.3.2.min.js' ) );
//サイト全体で使用するJS
document.write( importSrc( path + 'global.js' ) );
})();
scriptタグを毎回書くのもめんどくさかったので、importSrc() というショートカット関数をつくってまとめてみた。
import.js を使ってみんなまとめちゃえば良いと思うよ！
そのページ独自で使うJSはまとめちゃダメだと思うけどねｗ