Supertrue walfo

Modular JavaScript , CommonJs, AMD, UMD について

JavaScript でのモジュールの定義について。
CommonJS, AMD, UMD 各フォーマットの覚書き。

CommonJs

CommonJSでは、サーバ上などのブラウザ外で利用する際のモジュール定義について、簡潔なAPIが規定されてます。AMDとは異なり、IO、ファイルシステム、promiseなど、より広範な概念を扱います。

CommonJSのモジュールとは、利用可能な特定のオブジェクトをそれに依存する任意のコードにエクスポートする再利用可能なJavaScriptコードです。AMDとは異なり、通常そのようなモジュールには関数ラッパーはありません。(そのため 例えば define はありません)

// js/foo.js
exports = function() {
  // モジュールの定義
  return {
    add: function(a, b) {
      return a + b;
    }
  }
}

// main.js
// モジュールの読み込み
var foo = require('js/foo.js');
var $ = require('jquery');
var _ = require('underscore');

AMD(Asynchronous Module Definition)

AMDでは、モジュールとそのモジュールに依存する他のモジュールの両方を非同期に読み込めるなモジュール定義されています。サーバーサイドに依存せず、スクリプトの遅延読み込みなどブラウザでの利用に適したものとなっている。

// js/foo.js
define(function(foo, bar) {
  // モジュールの定義
  return {
    add: function(a, b) {
      return a + b;
    }
  };
});

// main.js
// モジュールの読み込み / 依存関係の解決
define(['js/foo.js','jquery', 'underscore'], function(foo, $, _) {
  console.log(foo.js);
  console.log($);
  console.log(_);
});

CommonJS と AMD

AMDは非同期に動作するブラウザ優先の手法を採用し、簡単に後方互換性が得られますが、ファイルI/Oに関する概念はありません。AMDはオブジェクト、関数、コンストラクタ、文字列、JSONなど、多くのタイプのモジュールをサポートし、ブラウザ内でネイティブに実行されます。

CommonJSは同期した動作を想定したサーバ優先の手法を採用し、グローバルを汚染するお荷物がなく, (サーバ上での)将来の要求に答えようとします。CommonJSはごちゃごちゃしたモジュールをサポートしているので、AMDで強制される define() ラッパーから解放されて、ES.next/Harmony の仕様に近く 感じられるでしょう。しかし、CommonJSモジュールはオブジェクトをモジュールとしてだけしかサポートしていません。

UMD(Universal Module Definition)

CommonJSとAMDの両方を含めたモジュール定義で、このフォーマットによりクライアントとサーバの両方の環境で動作するモジュールを定義できる。

// CommonJSとAMDを含めたモジュールの定義
(function(root, factory) {
  if (typeof exports === 'object') {
    // CommonJS
    factory(exports, require('b'));
  } else if (typeof define === 'function' && define.amd) {
    // AMD.
    define(['exports', 'b'], factory);
  } else {
    // ブラウザグローバル
    factory((root.commonJsStrict = {}), root.b);
  }
}(this, function(exports, b) {

  exports.action = function() {
    // モジュールの定義
  };

}));

リンク

2015年7月8日 18:41
2015年7月8日 19:30 編集済み