jQueryのajaxを使って動的にjsファイルを読み込む

読み込みファイルとか増えるとファイルが多くなって見づらくなるからなんか方法ないかなーと思って調べるとscriptタグを無理やり差し込んで読み込む奴がよくヒットする。そんな力技じゃなくて普通にjQuery使えばいいんじゃね?っと思って書いてみた。

// 渡されたPathに存在するScriptを全部読み込んでCallbackを実行する
var ajaxLoadScript = function(paths, callback) {

  var loadCount = 0;

  $.each(paths, function(index) {
    $.ajax({
      type: "GET",
      url: this,
      dataType: "script",
      success: function(msg){
        loadCount++;
        if(loadCount === paths.length) {
          callback(true);
        }
      },
      error: function(msg){
        callback(false);
      }
    });
  });
}

// 使用例
$(document).ready(function() {

  // ここで読み込むやつを記載しておく
  var scriptArray = [
    './js/a.js',
    './js/b.js',
    './js/c.js',
    './js/d.js',
    './js/e.js',
  ];

  // 動的読み込み。aStringとかはa.jsとかに定義してある
  ajaxLoadScript(scriptArray, function(result) {
    if(result) {
      console.log(aString);
      console.log(bString);
      console.log(cString);
      console.log(dString);
      console.log(eString);
    }
  });
});

外部のファイルだとクロスサイトスクリプティングで弾かれるからできないけど、同一ドメインだったらScriptタグに書いたりしないでこんな感じで書けばスマートに書けるんじゃないかと。まぁ、同一ドメインにあるファイルたちだったら圧縮するべきだろっていう話はあるんだけど、ファイル分けたほうが複数人で作業する場合は捗ることも多いし、テスト環境で試すときとかなら簡単にこんなのを書けばいいんじゃないかな。

他になにかいい案があれば教えてください。