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

はじめに

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

Javasctiptデザインパターン一覧

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

1. コンストラクタ

• モジュール
• リビーリングモジュール
• シングルトン
• オブザーバ
• メディエータ
• プロトタイプ
• コマンド
• ファサード
• ファクトリ
• ミックスイン
• デコレータ
• フライウェイト

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

１．コンストラクタ

オブジェクト指向言語で常用されているコンストラクタですが、
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();
}

２．モジュール

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

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

javascript

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

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

３． シングルトン

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

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

４． メディエータ

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

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

５． ファサード

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

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

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});

参考リンク

• JavaScriptデザインパターン
• 【まとめ】JavaScriptでデザインパターン