7日目 => デザインパターン（オブザーバパターン）（1）

はじめに

オブザーバパターン、ページ数多い...!

説明

オブザーバパターン

状態変化が起こった時にオブザーバに自動的に通知。

//////////////////////////////////////////////////////////////////////////////
// オブザーバーリスト
//////////////////////////////////////////////////////////////////////////////
// オブザーバーリストの作成
function ObserverList(){
  this.observerList = [];
}

// オブザーバーの追加
ObserverList.prototype.Add = function(obj){
  return this.observerList.push(obj);
}
// オブザーバーリストを初期化
ObserverList.prototype.Empty = function(){
  this.observerList = [];
}
// オブザーバーリストの件数
ObserverList.prototype.Count = function(){
  return this.observerList.length;
}
// 指定したオブザーバーの取得
ObserverList.prototype.Get = function(index){
  if(index > -1 && index < this.observerList.length){
    return this.observerList[index];
  }
}
// オブザーバーを最初または最後に追加
ObserverList.prototype.Insert = function(obj, index){
  var pointer = -1;

  if(index === 0){
    // 配列の最初に追加
    this.observerList.unshift(obj);
    pointer = index;
  }else if(index === this.observerList.length){
    this.observerList.push(obj);
    pointer = index;
  }

  return pointer;
}
// 指定オブザーバーの位置を返却
ObserverList.prototype.IndexOf = function(obj, startIndex){
  var i = startIndex,
      pointer = -1;

  while (i < this.observerList.length) {
    if(this.observerList[i] === obj){
      pointer = i;
    }
    i++;
  }

  return pointer;
}
// オブザーバーの最初または最後を除去
ObserverList.prototype.RemoveIndexAt = function(index){
  if(index === 0){
    // 配列から最初の要素を取り除く
    this.observerList.shift();
  }else if(index === this.observerList.length - 1){
    // 配列から最後の要素を取り除く
    this.observerList.pop();
  }
}

// オブジェクトの拡張
function extend(obj, extension){
  for(var key in obj){
    extension[key] = obj[key];
  }
}

//////////////////////////////////////////////////////////////////////////////
// サブジェクト
//////////////////////////////////////////////////////////////////////////////
// サブジェクト作成
function Subject(){
  this.observers = new ObserverList();
}

// オブザーバーの追加
Subject.prototype.AddObserver = function(observer){
  this.observers.Add(observer);
}
// オブザーバーの除去
Subject.prototype.RemoveObserver = function(observer){
  this.observers.RemoveIndexAt(this.observers.IndexOf(observer, 0));
}
// 通知
Subject.prototype.Notify = function(context){
  var observerCount = this.observers.Count();
  for(var i = 0; i < observerCount; i++){
    this.observers.Get(i).Update(context);
  }
}

//////////////////////////////////////////////////////////////////////////////
// オブザーバー
//////////////////////////////////////////////////////////////////////////////
function Observer(){
  this.Update = function(context){
    console.log("更新通知: " + context);
  }
}


// 動作テスト
var subject = new Subject();
var obs1 = new Observer();
var obs2 = new Observer();
var obs3 = new Observer();

subject.AddObserver(obs1);
subject.AddObserver(obs2);
subject.AddObserver(obs3);

subject.Notify("何かしらのメッセージ");
// 更新通知: 何かしらのメッセージ
// 更新通知: 何かしらのメッセージ
// 更新通知: 何かしらのメッセージ

おわりに

なんだかこの単元長くて、頭がこんがらがってきた。
どうにか頑張ろう。

参考

• JavaScriptデザインパターン