More than 5 years have passed since last update.

JavaScriptのモジュールの書き方

Last updated at 2014-07-08Posted at 2014-07-08

モジュールの汎用的な書き方を整理したかったのでPromiseライブラリであるQをお手本に定義の基本的な処理だけを抜粋してみました。

お手本

定義の書き方だけを抜粋

1.基本

まずは基本構造として、モジュールを定義する関数とエクスポートする関数を分けている。
この時点でかなりわかりやすくてクリーンな感じがします。

MyModule.js

(function(definition){// 定義する関数を引数にとり、エクスポート処理を行う関数

	// モジュールのエクスポート
	MyModule = definition();
})(function(){// 実際の定義を行う関数
	'use strict';
	
	var MyModule = function MyModule(){};

	MyModule.prototype = {
		//...
	}

	// 定義したモジュールを返却する
	return MyModule;
});

2.各モジュールローダーにあわせたエクスポート処理

環境がNode.jsだったりブラウザだったり、モジュールローダーがCommonJSやRequireJSだったりscript要素だったりしても大丈夫。
Qではbootstrapなどにも対応していますが省略しています。

MyModule.js

(function(definition){// 定義する関数を引数にとる
	// ロードされた文脈に応じてエクスポート方法を変える

    // CommonJS
    if (typeof exports === "object") {
        module.exports = definition();

    // RequireJS
    } else if (typeof define === "function" && define.amd) {
        define(definition);

    // <script>
    } else {
        MyModule = definition();
    }

})(function(){// 実際の定義を行う関数
	'use strict';
	
	var MyModule = function MyModule(){};

	MyModule.prototype = {
		//...
	}

	// モジュールのエクスポート
	return MyModule;
});

プロジェクトでの利用

CommonJS

var MyModule = require('MyModule.js');
// use MyModule

RequireJS

require(['MyModule'], function(MyModule) {
// use MyModule
});

script要素での利用

<script src="MyModule.js"></script>
<script>
// use MyModule
</script>