(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'); }; })();
<button id='pub_1'> publisher1 publish </button> <button id='pub_2'> publisher2 publish </button> <ul id='messages'></ul>