自作のObserverパターン

JavaScriptパターンp181を参考にして自作のObserverパターンを作成 observer( 観察者)/subject( 観察対象者) または 購読者(subscriber)/発行者(publisher)

by s_hiroshi

HTML

<button id="foo">Click</button>

JavaScript

// 観察者(observer)
var observer1 = {
    name: 'obr1',
    setName: function(name) {
        this.name = name;
    },
    showName: function() {
        console.log(this.name);
    },
    showGreet: function() {
        console.log('hi, ' + this.name);
    }
};
var observer2 = {
    name: 'obr2',
    setName: function(name) {
        this.name = name;
    },
    showName: function() {
        console.log(this.name);
    },
    greet: function() {
        console.log('hi, ' + this.name);
    }
};


// 観察対象者(Subject)
var subject = {
    observers: [],
    addObserver: function(obj, type) {
        // type is 'showName' or 'greet'
        var i;
        if (typeof obj !== 'object' || typeof type !== 'string') {
            return false;
        }
        this.observers.push({
            "obj": obj,
            "type": type
        });
    },
    bind: function(selector) {
        var self = this;
        $(selector).bind('click', function() {
            var obj, type, i;
            for (i = 0; i < self.observers.length; i++) {
                obj = self.observers[i].obj;
                type = self.observers[i].type;
                obj[type].apply(obj);
            }
        });
    }
}


// 観察対象者の処理
subject.bind('#foo');

// 観察者を観察対象者へ追加
subject.addObserver(observer1, 'showName');
subject.addObserver(observer2, 'greet');