Observerパターン

observer.js

/*-------------------------------------
* Observerパターン
* -------------------------------------
* Observerクラスに監視者を登録
* 通知者がイベントを通知
* 監視者はイベントを受け取り、目的を実行する
*
*
* ### 以下はとても単純なObserverパターンの例 ###
* Observerクラスは関数を配列に格納し、triggerで格納している関数を実行する

* */
function Observer() {
  this.listeners = [];
}


// listenerを登録するメソッド
Observer.prototype.on = function (func) {
  this.listeners.push(func)
};


// listenerを削除するメソッド
Observer.prototype.off = function (func) {
  var len = this.listeners.length;

  for (var i = 0; i < len; i++) {
    var listener = this.listeners[i];
    if (listener === func) {
      this.listeners.splice(i, 1)
    }
  }
};

// listenerに登録されている関数を実行する
Observer.prototype.trigger = function () {
  var len = this.listeners.length;

  for (var i = 0; i < len; i++) {
    var listener = this.listeners[i];
    listener();
  }
};


var observer = new Observer();

// 適当な関数を作成
var greet = function() {
  console.log("Good morning!")
};

var hello = function () {
  console.log("Hello world!")
};

// 適当な関数をlistenerとして登録
observer.on(greet);
observer.on(hello);

// 登録してあるlistener(関数)を実行
observer.trigger();
//→ "Good morning!"
//→ "Hello world!"

observer_with_object.js

/*-------------------------------------
* Observerパターン(複数のイベント対応)
* -------------------------------------
* listenerを配列ではなく、オブジェクトとして管理する
* オブジェクトのkeyにイベント名、値に関数を受け取る
* triggerでイベント(key)を指定して登録されているイベントを発火する
* */


function Observer() {
  this.listeners = {};
}

// イベントが登録されたときのlistenerの構造
/*
listeners = {
  'event1': [func, func, ...]
  'event2': [func, func, ...]
}
* */


Observer.prototype.on = function (event, func) {
  if (!this.listeners[event]) {
    this.listeners[event] = [];
  }
  this.listeners[event].push(func);
};


Observer.prototype.off = function (event, func) {
  var ref = this.listeners[event],
    len = ref.length;
  for (var i = 0; i < len; i++) {
    var listener = ref[i];
    if (listener === func) {
      ref.splice(i, 1);
    }
  }
};

Observer.prototype.trigger = function (event) {
  var ref = this.listeners[event];
  for (var i = 0, len = ref.length; i < len; i++) {
    var listener = ref[i];
    if (typeof listener === "function") listener();
  }
};

var observer = new Observer();
var greet = function () {
  console.log("Good morning");
};

observer.on("morning", greet);
observer.trigger("morning"); //Good morning

var sayEvening = function () {
  console.log("Good evening");
};
observer.on("evening", sayEvening);
observer.trigger("evening"); // Good evening

ovserver_with_callback.js

/*-------------------------------------
* Observerパターン(複数のイベント対応 + triggerでcallback関数を実行)
* ------------------------------------- */
function Observer() {
  this.listeners = {};
}

Observer.prototype.on = function (event, func) {
  if (!this.listeners[event]) {
    this.listeners[event] = [];
  }
  this.listeners[event].push(func);
};


Observer.prototype.off = function (event, func) {
  var ref = this.listeners[event],
    len = ref.length;
  for (var i = 0; i < len; i++) {
    var listener = ref[i];
    if (listener === func) {
      ref.splice(i, 1);
    }
  }
};

Observer.prototype.trigger = function (event, callback) {
  var ref = this.listeners[event];
  for (var i = 0, len = ref.length; i < len; i++) {
    var listener = ref[i];
    if (typeof listener === "function") listener();
    if (typeof callback === "function") callback(); //callback
  }
};

var observer = new Observer();
var greet = function () {
  console.log("Good morning");
};

observer.on("morning", greet);
observer.trigger("morning", function () {
  console.log('called 1!')
});
// Good morning
// called 1!

var sayEvening = function () {
  console.log("Good evening");
};
observer.on("evening", sayEvening);
observer.trigger("evening", function () {
  console.log('called 2!');
});
// Good evening
// called 2!