Publish/Subscribe Pattern

Publish/Subscribe Pattern Demo

by 兵兵 王

HTML

<button id='pub_1'>
    publisher1 publish
</button>
<button id='pub_2'>
    publisher2 publish
</button>
<ul id='messages'></ul>

Babel + JSX

(function() {
    var Publisher = function(name) {
    	this.name = name;
        this.subscribers = [];
    };
    
    Publisher.prototype.register = function(subscriber) {
    	this.subscribers.push(subscriber);
    };

    Publisher.prototype.unregister = function(subscriber) {
    	this.subscribers.splice(this.subscribers.indexOf(subscriber), 1);
    };
    
    Publisher.prototype.emit = function(message) {
    	var self = this;
    	this.subscribers.forEach(function(subscriber) {
        	subscriber.onEmit({
            	name: self.name,
                message: message
            });
        });
    };

    var Subscriber = function(name) {
		this.name = name;
    };

    Subscriber.prototype.onEmit = function(action) {
    	var message = document.createElement("p");
        message.innerText = `${this.name} receive a message: ${action.message} from ${action.name}`;
        messagesWrapper.appendChild(message);
    };
    
    var publisher1 = new Publisher('publisher1');
    var publisher2 = new Publisher('publisher2');
    var subscriber1 = new Subscriber('subscriber1')
    var subscriber2 = new Subscriber('subscriber2')
    var subscriber3 = new Subscriber('subscriber3')
    var subscriber4 = new Subscriber('subscriber4')

    var messagesWrapper = document.getElementById("messages"),
    publish_btn_1 = document.getElementById("pub_1"),
    publish_btn_2 = document.getElementById("pub_2");
    
    publisher1.register(subscriber1);
    publisher1.register(subscriber2);
    publisher1.register(subscriber3);
    publisher2.register(subscriber2);
    publisher2.register(subscriber3);
    publisher2.register(subscriber4);
    
    publish_btn_1.onclick = function() {
    	publisher1.emit('click');
    };
	publish_btn_2.onclick = function() {
    	publisher2.emit('click');
    };

})();