Search code examples
javascriptjquery-pluginspublish-subscribeevent-driven-designevent-bus

jQuery plugin for Event Driven Architecture?

Are there any Event Driven Architecture jQuery plugins?

Step 1: Subscribing

alt text
The subscribers subscribe to the event handler in the middle, and pass in a callback method, as well as the name of the event they are listening for...

i.e. The two green subscribers will be listening for p0 events. And the blue subscriber will be listening for p1 events.

Step 2: The p0 event is fired by another component to the Event Handler

alt text

  1. A p0 event is fired to the Event Handler
  2. The event handler notifies it's subscribers of the event, calling the callback methods they specified when they subscribed in Step 1: Subscribing.

Note that the blue subscriber is not notified because it was not listening for p0 events.

Step 3: The p1 event is fired a component to the Event Handler

alt text

The p1 event is fired by another component

Just as before except that now the blue subscriber receives the event through its callback and the other two green subscribers do not receive the event.

Images by leeand00, on Flickr

I can't seem to find one, but my guess is that they just call it something else in Javascript/jquery

Also is there a name for this pattern? Because it isn't just a basic publisher/subscriber, it has to be called something else I would think.

Solution

  • You probably don't need a plugin to do this. First of all, the DOM itself is entirely event driven. You can use event delegation to listen to all events on the root node (a technique that jQuery live uses). To handle custom events as well that may not be DOM related, you can use a plain old JavaScript object to do the job. I wrote a blog post about creating a central event dispatcher in MooTools with just one line of code.

    var EventBus = new Class({Implements: Events});

    It's just as easy to do in jQuery too. Use a regular JavaScript object that acts as a central broker for all events. Any client object can publish and subscribe to events on this object. See this related question.

    var EventManager = {
    subscribe: function(event, fn) {
        $(this).bind(event, fn);
    },
    unsubscribe: function(event, fn) {
        $(this).unbind(event, fn);
    },
    publish: function(event) {
        $(this).trigger(event);
    }
};

// Your code can publish and subscribe to events as:
EventManager.subscribe("tabClicked", function() {
    // do something
});

EventManager.publish("tabClicked");

EventManager.unsubscribe("tabClicked");

    Or if you don't care about exposing jQuery, then simply use an empty object and call bind and trigger directly on the jQuery wrapped object.

    var EventManager = {};

$(EventManager).bind("tabClicked", function() {
    // do something
});

$(EventManager).trigger("tabClicked");

$(EventManager).unbind("tabClicked");

    The wrappers are simply there to hide the underlying jQuery library so you can replace the implementation later on, if need be.

    This is basically the Publish/Subscribe or the Observer pattern, and some good examples would be Cocoa's NSNotificationCenter class, EventBus pattern popularized by Ray Ryan in the GWT community, and several others.