jQuery plugin for Event Driven Architecture?

Question

Are there any Event Driven Architecture jQuery plugins?

Step 1: Subscribing

Answer 1

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.