JavaScriptのimport、並列ロード

JavaScript

並列ロード（ブロック回避）を利用して、CSSの@importみたくできるかなと。


その前に、

document.writeを利用したやつ

これをひとつのimport.jsとかにまとめて、HTMLからそいつを読み込めばOKって。以前に誰かがやっていた。

document.write('<script type="text/javascript" src="a.js" ></script>\n');
document.write('<script type="text/javascript" src="b.js" ></script>\n');
document.write('<script type="text/javascript" src="c.js" ></script>\n');

DOM経由でscript要素を生成する

複数のjsを連続で並列読み込み(IE8、safariでは実装済み)が可能となる。
もっとうまい書き方はありそう。

(function(){
  var js=['a.js','b.js','c.js']; // jsファイルのパス、URL
  var head=document.getElementsByTagName('head')[0];
  function setJs(arr){
    var script=document.createElement('script');    
    script.type='text/javascript';
    script.src=arr;
    head.appendChild(script);
  }
 for(var i=0,len=js.length;i<len;i++){
  setJs(js[i]);
 }
})();

これをimport.jsとして外部化。
HTMLの読み込みは1行で済む。

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