LoginSignup
160
161

More than 5 years have passed since last update.

JavaScriptのモジュールの書き方

Last updated at Posted 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>

関連情報

RequireJSなど用にモジュール化したものを非同期で読ませないで良い感じでパッケージ化するツール。

これで依存関係を管理しながら、開発環境ではモジュールローダーを利用しファイルを分けてデバッグしやすくし、本番環境では1つにビルドしてリリースということができそうです。

160
161
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
160
161