Javascriptファイルをモジュール化するには(CommonJS使わない)

ある程度スクリプトの規模が大きくなってきた場合、よく使う機能を集約して、モジュールとして切り離すことがある。 jsファイルを作りHTMLを介して複数読込することで実現する方法をここに記述する。

以下のようなファイル構成だとして

// Root直下にhtmlとjsが同階層に置かれている
/
└ index.html
  signpost.js
  main.js
  • 1 .htmlで.jsをモジュール→呼び出し側の順番でロードする
<!-- index.html -->
<head>
  <!-- ロードする -->
  <script src="./Signpost.js" charset="utf-8"></script>
  <script src="./call.js" charset="utf-8"></script>
  <!-- //ロードする -->
</head>

// signpost.js

// Objectを名前空間としてつかう
window.Signpost = window.Signpost || {};

// 必要な処理を記述する
window.Signpost = {
  // 何か処理を書く
  init: function() {
    console.log("aaa");
  }
}
  • 3 呼び出し側の.jsでモジュールを以下のように呼び出す
// main.js
(function() {

  var signpost = Signpost;
  signpost.init(); // => aaa

})();

参考
フロントエンドに秩序を取り戻す方法 // Speaker Deck

【脱初心者JavaScript】名前空間のイロハ - Qiita

中上級者になるためのJavaScript【知識編】 - Qiita

旧石器時代のJavaScriptを書いてる各位に告ぐ、現代的なJavaScript超入門 Section2 ～CommonJSモジュールと仲良くなろう～ - Qiita