An introduction to PubSub & jQuery Implementation

PubSub is probably one of the easiest JavaScript patterns to make with vanilla js.

    function PubSub(){
        this.listeners = {};
    };
    
    PubSub.prototype.subscribe = function(name, fn){
        if(!this.listeners[name]){
            this.listenders[name] = [];
        }
        
        this.listeners.name.push(fn);
        
        return this;
    };
    
    PubSub.prototype.publish = function(name, args, binding_object){
        if(this.listeners[name]){
            var i, l;
            
            for(i = 0, l = this.listeners[name].length; i < l; i++){
                this.listeners[name][i].apply(binding_object || this, args);
            }
        }
        
        return this;
    };
    
    PubSub.prototype.unsubscribe = function(name, fn){
        //loop through and remove fn from this.listners
    };

    //usage
    var = ps_controller = new PubSub();
    //somewhere subscribe to an event
    ps_controller.subscribe('test', function(one, two three){ //do stuff });

    //publish the test event later
    ps_controller.publish('test', [1, 2 3]);

A slight variation on the implementation which makes it great for single-page apps that need local events.

Instead of attaching it to the body (global events), you can also attach to the current 'page' element. Now all your events can subscribe to the local event handler. There's an added bonus that when the page is removed, the event handlers are automatically destroyed, too.

Lately I've been toying with a jQuery pub/sub that publishes based on changeData events: https://gist.github.com/2136216

I can also recommend:

https://github.com/mroderick/PubSubJS