JQueryで複数のhtmlをincludeする。includeしたhtmlの要素に対してJSも使えるようにする。

いまさらJQuery再び

前回の記事では一つのhtmlファイルを読み込んでたんですが、複数のhtmlファイルを読み込もうと思います。さらに各htmlが読み込み終わってから、展開された要素に対してJS使ったりしたい。

作った関数の使い方

第一引数にはJSONの配列、第二引数には読み込んだ外部JSから使いたい関数を渡します。
第一引数の配列の各要素のJSONのキーにはfilepath,selectorがあり、それぞれ読み込むHTMLファイルのパスと展開先のセレクタを値として設定します。
第二引数は特に使いたいJSがなければなくても大丈夫です。

// includeHTML(JSONの配列,function(){読み込んだ外部JSから使いたい関数たち})
includeHTML(
  [
    { filepath: "/include/footer.html", selector: "div.footer_inc"},
    { filepath: "/include/header.html", selector: "div.header_inc" }
  ],
  function() {
    // ここから使いたい関数
    $(function() {
      hoge.ready();
      huga.ready();
    });
  }
);

作った関数

includeHTML

function includeHTML(requestArrayOfJson, usingFuncFromMainjs = function(){;}) {
  var jqXHRList = [];
  // ajaxの処理のリスト作成
  for (var i = 0; i < requestArrayOfJson.length; i++) {
    jqXHRList.push(
      $.ajax({
        url: requestArrayOfJson[i].filepath,
        cash: false,
        dataType: "html"
      })
    );
  }
  // jqXHRList内のajaxの処理が全て終了したらthen内の処理に移る
  $.when
    .apply($, jqXHRList)
    .then(
      function() {
        var htmlList = [];
        // ajaxで取得したhtmlのリスト作成
        for (var i = 0; i < arguments.length; i++) {
          var result = arguments[i];
          htmlList.push(result[0]);
        }
        return htmlList;
      },
      function(){
        console.log("Fail to GET HTML by ajax");
      }
    )
    .then(
      function(htmlList) {
        // 各htmlのinclude処理
        for (var i = 0; i < requestArrayOfJson.length; i++) {
          $(requestArrayOfJson[i].selector).html(htmlList[i]);
        }
      },
      function(){
          console.log("Fail to write HTML");
      }
    )
    .then(
      function() {
        // JSのファイルを読み込んだ後、コールバックでこの関数の第二引数として渡した関数実行。
        $.getScript("読み込みたい外部JSのパス", usingFuncFromMainjs);
      },
      function(){
        console.log("Fail to get 読み込みたい外部JS");
      }
    );
}

感想

できたけど、なんかやってることの方向性がおかしい気もする。

参考