モジュールパターン - JavaScriptの個人的なメモ (その6)

二つのモジュールパターン

調べていくと、モジュールパターンの書き方に二通りありましたので、ここにメモとして、残しておきます。

即時関数を使ったモジュールパターン

ネットでよく見かけるデザインパターンが、即時関数を使ったモジュールパターンです。以下のとおり (注1)、即時関数を使います。

var myObject = (function ( ) {
    var value = 0;
    return {
        increment: function (inc) {
            value += typeof inc === 'number' ? inc : 1;
        },
        getValue: function ( ) {
            return value;
        }
    };
}( ));

通常の関数としてのモジュールパターン

「JavaScript: The Good Parts」で紹介されています(注2)。普通に関数で定義しているパターンです。

var jMod = function ( ) {
    var value = 0;
    return {
        increment: function (inc) {
            value += typeof inc === 'number' ? inc : 1;
        },
        getValue: function ( ) {
            return value;
        }
    };
};

二つの方式の違い

使い方については、関数を呼び出すかどうかの違いです。

  /* 即時関数方式 */
  myObject.increment(12);
  myObject.getValue(); /* 12 */

  /* 通常方式 */
  var s = jMod();
  s.increment(12);
  s.getValue(); /* 12 */

ただし、前者の即時関数を使った方式は、グローバル変数を使った名前空間と同じなので、他の誰かに書き換えられるかもしれません。

  myObject.increment = function(inc) {
    this._value = inc + 100;
  };
  myObject.getValue = function() {
    return this._value;
  };

  myObject.increment(12);
  myObject.getValue(); /* 112 */

結論

• モジュールパターンには二つの方式があります
• 即時関数を使う方式よりも通常の関数の方式のほうが安全です

参考資料

注1

Douglas Crockford 著 水野貴明 訳「JavaScript: The Good Parts」第6刷 p.43
コードは以下の正誤表から引用
http://www.oreilly.co.jp/books/9784873113913/#errata3

注2

Douglas Crockford 著 水野貴明 訳「JavaScript: The Good Parts」第6刷 p.48