HTML
JavaScript
jQuery
Web
デザインパターン

Javasctiptデザインパターンで使えそうなものをまとめる

More than 1 year has passed since last update.

はじめに

Javascriptのソースを綺麗に書くために、デザインパターンを学習しました。
その中で、使えそうなものをまとめました。
参考程度にしてください。

Javasctiptデザインパターン一覧

Javascriptのデザインパターンを紹介します。
13種類あります。

  1. コンストラクタ
  2. モジュール
  3. リビーリングモジュール
  4. シングルトン
  5. オブザーバ
  6. メディエータ
  7. プロトタイプ
  8. コマンド
  9. ファサード
  10. ファクトリ
  11. ミックスイン
  12. デコレータ
  13. フライウェイト

Javasctiptデザインパターンで使えそうなもの

1.コンストラクタ

オブジェクト指向言語で常用されているコンストラクタですが、
Javascriptはすべてがオブジェクトであるため、大いに使えるパターンです。

  • 一般的なコンストラクタ

例:表に1行追加する処理

javascript
function Table(table){
    this.table = table;

    this.addRow = function(){
        //処理
    };
}

function clickAddRowButton(){
    var table = document.getElementById('table');
    var tableInstance = new Table(table);
    tableInstance.addRow();
}
  • 問題点

addRowはTable型のインスタンスが作成されるたびに再定義されます。
Table型のすべてのインスタンスに共有されていることが理想です。

  • プロトタイプを使ったコンストラクタ

上記の問題点を解決する方法です。
Javascriptの関数にはプロトタイプというプロパティがあります。
コンストラクタで作成されたインスタンスは、コンストラクタのプロトタイプを利用可能になります。
そしてインスタンスすべてに共有されます。

javascript
function Table(table){
    this.table = table;
}

Table.prototype.addRow = function(){
    //処理
};

function clickAddRowButton(){
    var table = document.getElementById('table');
    var tableInstance = new Table(table);
    tableInstance.addRow();
}

2.モジュール

モジュールはコードを綺麗に分割し組織化するのに役立ちます。

例:表に1行追加する処理

javascript
var tableModule = {
    addRow : function(){
        //処理
    };
}

function clickAddRowButton(){
    tableModule.addRow();
}

3. シングルトン

シングルトンは、作成されるクラスのインスタンスが1つのみという考え方です。

Javascriptでの実用案を考えてみましたが、まったく浮かびませんでした。
シングルトンでサーバサイドの原子性を保つためのデザインパターンなので
フロントサイドはそこまで必要ないのかもしれません。

4. メディエータ

メディエータは仲介役です。
オブジェクト同士のやり取りを仲介することで、オブジェク同士を疎結合にします。
これにより保守性の高いソースを作ることができます。

詳しくはこちらを参照してください。
【JSでデザインパターン】メディエーター編

5. ファザード

大きく複雑なオブジェクト群を1まとまりにし、利用者にそれを意識させないデザインパターンです。
つまり、複数メソッドを1つにまとめたメソッドです。

例:表の行を追加・削除する処理

javascript
var facadeTableModule = (function(){
    var table;
    var _private = {
    set : function(table) {
        this.table = table;
    },
    add : function(elements) {
        //処理
    },
    remove :function(elements) {
        //処理
    }
  };

  return {
    facade : functoin(args){
        _private.set(args.table);
      if(args.add){
        _private.add(args.elements);
      }else if(args.remove){
        _private.remove(args.elements);
      }
    }
  };
}()};

var table = document.getElementById('table');
var elements = document.getElementById('elements');

facadeTableModule.facade({table : table. add : true elements : elements});
facadeTableModule.facade({table : table. remove : true elements : elements});

参考リンク