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>
- 2 モジュール側の.jsで名前空間を設定する
// 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