2012/06/12

[JavaScript] Mediatorパターンを使ってみる


FormなどのGUI部分で、このラジオボックすでこっちが選ばれている時はこのinputを効かなくさせて、ここの値が20以下だった場合はこっちのselectリストをコレにして…
というのを1つ1つ条件分岐して処理を分けてると、そもそも大変で、仮に後から要素が1つ増えたりしたら、もうコントロールできなくなる。
なので、デザインパターンの1つMediatorパターンを使って管理するのが良いらしいので、JavaScriptでやる方法を調べてみた

複数のオブジェクト間の調整をする「相談役」を作る。
個々のオブジェクトはその相談役とだけコンタクトして、各オブジェクト同士ではコンタクトしない。
表示のコントロールのロジックは相談役にだけ書く

仲裁オブジェクトと各要素オブジェクトを作る。
//仲裁オブジェクト
var chusai = {
 elems: [],
 add: function(elem){
  //要素を登録するメソッド
  this.elems.push(elem);
 },
 change: function(){
  var elems = this.elems;
  for(var i = 0, len = elems.length; i < len; i++){
   //要素のパラメータを取得したりとか色々やって処理する
  }
 }
};

var Elem = function(elem){
 this.elem = elem;
};
Elem.prototype = {
 add: function(){
  //chusai任せ
  chusai.add(this.elem);
 },
 change: function(){
  //chusai任せ
  //どういう処理するかは仲裁オブジェクト任せ
  chusai.change();
 }
};
var elem = new Elem(要素);

elem.add();
elem.change();
あってんのかな…?やや不安
参考:オライリーのサンプルコード(英語)

0 件のコメント:

コメントを投稿