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

名前空間使ってモジュールをObjectにまとめるグローバルの変数の濫用を避ける"古の"ベストプラクティス

ここではLoggerを実装してみる。

window.Logger = window.Logger || {};
window.Logger = {
  LEVEL: {
    RUN   : 0,
    ERROR : 1,
    WARN  : 2,
    LOG   : 3,
    INFO  : 4,
    DEBUG : 5,
    FULL  : 5,
  },
  level: null,
  init: function(level) {
    console.log(this.LEVEL.FULL)
    this.level = level || this.LEVEL.FULL;
  },
  debug: function(msg) {
    (this.level >= this.LEVEL.DEBUG) && console.debug(msg);
  },
  info: function(msg) {
    (this.level >= this.LEVEL.INFO) && console.debug(msg);
  },
  log: function(msg) {
    (this.level >= this.LEVEL.LOG) && console.debug(msg);
  },
  warn: function(msg) {
    (this.level >= this.LEVEL.WARN) && console.debug(msg);
  },
  error: function(msg) {
    (this.level >= this.LEVEL.ERROR) && console.debug(msg);
  }
};

以下のコードは名前空間の競合を避けるための書き方

window.Logger = window.Logger || {};

参考