Javasctiptデザインパターンで使えそうなものをまとめる
はじめに
Javascriptのソースを綺麗に書くために、デザインパターンを学習しました。
その中で、使えそうなものをまとめました。
参考程度にしてください。
Javasctiptデザインパターン一覧
Javascriptのデザインパターンを紹介します。
13種類あります。
- コンストラクタ
- モジュール
- リビーリングモジュール
- シングルトン
- オブザーバ
- メディエータ
- プロトタイプ
- コマンド
- ファサード
- ファクトリ
- ミックスイン
- デコレータ
- フライウェイト
Javasctiptデザインパターンで使えそうなもの
１．コンストラクタ
オブジェクト指向言語で常用されているコンストラクタですが、
Javascriptはすべてがオブジェクトであるため、大いに使えるパターンです。
- 一般的なコンストラクタ
例：表に1行追加する処理
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の関数にはプロトタイプというプロパティがあります。
コンストラクタで作成されたインスタンスは、コンストラクタのプロトタイプを利用可能になります。
そしてインスタンスすべてに共有されます。
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行追加する処理
var tableModule = {
addRow : function(){
//処理
};
}
function clickAddRowButton(){
tableModule.addRow();
}
３． シングルトン
シングルトンは、作成されるクラスのインスタンスが１つのみという考え方です。
Javascriptでの実用案を考えてみましたが、まったく浮かびませんでした。
シングルトンでサーバサイドの原子性を保つためのデザインパターンなので
フロントサイドはそこまで必要ないのかもしれません。
４． メディエータ
メディエータは仲介役です。
オブジェクト同士のやり取りを仲介することで、オブジェク同士を疎結合にします。
これにより保守性の高いソースを作ることができます。
詳しくはこちらを参照してください。
【JSでデザインパターン】メディエーター編
５． ファサード
大きく複雑なオブジェクト群を１まとまりにし、利用者にそれを意識させないデザインパターンです。
つまり、複数メソッドを１つにまとめたメソッドです。
例：表の行を追加・削除する処理
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});
参考リンク
Author And Source
この問題について(Javasctiptデザインパターンで使えそうなものをまとめる), 我々は、より多くの情報をここで見つけました https://qiita.com/chokuzin/items/954eb6ab76ec8570c21e著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .