Browse By

JavaScriptのデザインパターン オブザーバについて

Pocket

JavaScriptのデザインパターン オブザーバについて

オブザーバとは?

オブザーバとはデザインパターンの一種で、JavaScriptではよく使用されるパターンの一つです。
オブザーバまたはリスナーと呼ばれる1つ以上のオブジェクトを、サブジェクトと呼ばれる対象オブジェクトが発生するイベントを観察するために登録します。
実装をサブジェクトとオブザーバに分けることでイベントの対象とイベントの発行が疎結合に出来ます。

オブザーバの定義

// コンストラクタの生成
function Observer(){
    this.listeners[]; // 監視者の格納場所
}

// this.listenersにイベントを通知したい関数を追加するメソッド
Observer.prototype.add = function(func){
    this.listeners.push(func)
}

// 指定されたオブザーバを削除するメソッド
Observer.prototype.delete = function(func){
    var l = this.listener.length;
    for (var i = 0; i < l ; i++){
        var listener = this.listeners[i];
        if(listener === func){
            this.listeners.splice(i, 1); 
        }        
    }
}

// オブザーバのリストを全て実行するメソッド
Observer.prototype.trigger = function(event){
    var l = this.listener.length;
    for (var i = 0; i < l ; i++){
        var listener = this.listeners[i];
        listener(); 
    }

}

実行する場合は下記の通りです。

var observer = new Observer();
var hello = function(){
    console.log("HELLO marooon!!");
}
observer.add(hello);
observer.trigger(); // HELLO marooon!!

入門 React.js その1
入門 React.js その2 JSXについて
入門 React.js その3 Hello world!してみよう


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>