よく使うオブジェクトの定義パターン : JavaScript

Tweet

Pocket

最近よく使うオブジェクトの定義パターンのメモ。

追記 よく使うオブジェクトの定義パターン2 : JavaScriptへコンストラクタ使う方法を少し改善して記載(2014.04.25)

コンストラクタを使わないパターン

var hoge = {};
(function () { 
    // プライベート変数
    var foo = 'foo';
    
    // 内部関数・ヘルパー
    function _bar() {
        // 処理
    }
    
    // 公開関数(API)
    function _baz() {
        // 処理
    }
    hoge.baz = _baz;
}());

名前空間を使う。

// namespace
var findxfine = {};
findxfine.namespace = function() {
    var object = this;
    return function(name) {
        if (typeof object[name] == "undefined") {
            object[name] = {};
        }
        return object[name];
    };
}();

// オブジェクト作成
(function () {
    // オブジェクト取得    
    var hoge = findxfine.namespace('hoge');
    // プライベート変数
    var foo = 'foo';
    // 内部関数・ヘルパー
    function _bar() {
        // 処理
    }
    // 公開関数
    function _baz() {
        // 処理
    }
    hoge.baz = _baz;
}());

オブジェクトからオブジェクトを作成する関数や名前空間を導入。

// namespace
var findxfine = {};
findxfine.namespace = function() {
    var object = this;
    return function(name) {
        if (typeof object[name] == "undefined") {
            object[name] = {};
        }
        return object[name];
    };
}();

// Object.create
if (!Object.create) {
  (function () {
    function F() {}

    Object.create = function (object) {
      F.prototype = object;
      return new F();
    };
  }());
}

// オブジェクト作成
(function () {    
    var hoge = findxfine.namespace('hoge');
    // プライベート変数
    var foo = 'foo';
    // 内部関数・ヘルパー
    function _bar() {
        // 処理
    }
    // 公開関数
    function _baz() {
        // 処理
    }
    hoge.baz = _baz;
}());

// オブジェクトの利用
var obj1 = Object.create(findxfine.namespace('hoge'));
obj1.baz();
var obj2 = Object.create(findxfine.namespace('hoge'));
obj2.baz();

コンストラクタを使うパターン

// namespace
var findxfine = {};
// constructor
findxfine.Hoge = (function() {

    // コンストラクタ
    function Cstr(arg) {
        var foo = arg.toUpperCase();  // プライベートインスタンス変数        
        this.bar = arg.toLowerCase(); // パブリックインスタンス変数
        this.getFoo = function () {
            return foo;
        };
    }
            
    // プライベート静的変数
    var BAZ = 'BAZ';
   
    // 公開メソッド
    // prototypeメソッドgetBazをクロージャーで定義し
    // fooを静的変数にする
    Cstr.prototype.getBaz = function() {
        return BAZ;
    };
    
    // 公開メソッド
    Cstr.prototype.getBar = function() {
        return this.bar;
        // foorbarにはprototypeメソッドからはアクセスできない。
    };
    
    return Cstr;
}());

// オブジェクトの利用
var obj1 = new findxfine.Hoge('obj1');
console.log(obj1.getFoo()); // OBJ1
console.log(obj1.getBar()); // obj1
console.log(obj1.getBaz()); // BAZ