Publisher Subscriber Pattern

I've been experimenting with the publisher/subscriber pattern in JavaScript. Admittely, this blog post is not polished, but I wanted to get it up so that I wouldn't forget about it. Hopefully it won't remain neglected for long.

Note that this pattern is similar to the Observer pattern, but may be a little more flexible because the Observer pattern requires each listener to implement an update() method. With pub/sub you can pass in a callback that gets triggered when an event is published.

Here's the HTML:

<!doctype html>
<html lang="en-US">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Widget w/PubSub that can be subclassed</title>
<style type="text/css">
#widgetList li{list-style:none; background-color:#ccc; border:1px solid black; padding:6px 10px; cursor: pointer; }
#widgetList li:hover{background-color:#fff; }
<div id="widgetList"></div>


Here's the publisher base class:

// set up namespace
rem = {};

rem.Publisher = function(){

this.eventTypes = {};
// eventType's key is an event name and the value is an array of objects
// each object in the array has 'subsriber' property and a 'callback' property
// for ex: eventTypes['click'] = [{subscriber: someSubsrciber, callback: someFunction},...]

rem.Publisher.prototype.subscribe = function(type, subscriber, callback){

// get all subcribers who are already registered for this event type
var subscribers = this.eventTypes[type];

// check to see if the subscriber is already in the array
if(this.getSubscriberIndex(subscribers, subscriber) != -1){
// the subscriber is already registered for this message
// there are no subscribers for this event type so create an array
subscribers = [];
this.eventTypes[type] = subscribers;

// add the subscriber
subscribers.push({subscriber: subscriber, callback: callback});

rem.Publisher.prototype.unsubscribe = function(type, subscriber){
var subscribers = this.eventTypes[type];

var i = this.getSubscriberIndex(subscribers, subscriber);
if(i != -1){
delete this.eventTypes[type];

rem.Publisher.prototype.publish = function(type){
// get all the subscribers for this event type
var subscribers = this.eventTypes[type];

// loop through them and trigger the callback
for(var i=0; i < subscribers.length; i++){

//get the args for the callback (so they can be used in the .apply() call)
var args = [];
for(var j=0; j < arguments.length - 1; j++){

subscribers[i].callback.apply(subscribers[i].subscriber, args);

rem.Publisher.prototype.getSubscriberIndex = function(subscribers, subscriber){
for(var i=0; i < subscribers.length; i++){
if(subscribers[i].subscriber == subscriber){
return i;
return -1;


Here's a concrete object that sub classes Publisher:

//WidgetList class
rem.WidgetList = function(){
//call to super...; = null;
this.widgets = [];

// 'inherit' the Publisher prototype
rem.WidgetList.prototype = new rem.Publisher;

rem.WidgetList.prototype.init = function(options){

// verify that options are passed in...
alert("no param passed into Widget.init()");
// verify that target element and widgets array are passed in as part of the options object... = || alert("no 'target' passed in param for WidgetList.init()");
this.widgets = options.widgets || alert("no 'widget' passed in param for WidgetList.init()");

// create a UL and loop through widgets array, adding an LI for each widget...
var list = document.createElement("ul");
for(var x=0; x < widgets.length; x++){
var listItem = document.createElement("li");
listItem.innerHTML = widgets[x].name;
listItem.setAttribute("data-widget-id", widgets[x].id);
// append the UL to the target element...

// set up event handling on the UL...
var thisWidget = this;
function handleListItemClick(event){
var target = ( ? : event.srcElement);
var widgetID;
if(widgetID = target.getAttribute("data-widget-id")){
var widgetName = target.innerHTML;
// here's the kicker, note that this particular sub class of Publisher calls publish() with the widgetName, widgetId params after the event
// type. These two params will get passed into the callback that is used when the subscription is set up (see below)
thisWidget.publish("widget_selected", widgetName, widgetID);

list.attachEvent('x', handleListItemClick);



Put it all together:

var myWidgetList = new rem.WidgetList();
var target = document.getElementById("widgetList");
var widgets = [{name:"Widget 1",id:1}, {name:"Widget 2",id:2},{name:"Widget 3",id:3}];

myWidgetList.init({target:target, widgets:widgets});

// in this case the subscriber is just a plain old object, but in a real project it might be something like a controller
var subscriber = {
// note that when the publisher calls publish(), it will pass 'widgetName' and 'widg'
callback: function(widgetName, widgetID){
alert("widget was clicked: " + widgetName + " ID: " + widgetID);
myWidgetList.subscribe("widget_selected", subscriber, subscriber.callback);