jQuery plugin for Event Driven Architecture?

Question

Are there any Event Driven Architecture jQuery plugins?

Step 1: Subscribing

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

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

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.

Topotype

Please let me know if it is not clear what I am talking about. – Topotype

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.

Enliven

The solution gist.github.com/786386 is similar, but supports unsubscription via tokens. The solution https://mcmap.net/q/469037/-jquery-plugin-for-event-driven-architecture is even more advanced and also supports unsubscribe (by passend the reference to the function) – Orissa

@koppor: Your second link points to this answer. Surely you were referring to something else? – Admit

I do not remember, what other URL I might have wanted to refer to. Maybe, I wanted to point to github.com/cujojs/msgs or github.com/sissbruecker/js-event-bus? – Orissa

@Orissa - jQuery now officially supports wrapping a plain JavaScript object. I think it has been doing that for a while, but my answer is a little old. I remember when I added the answer, this was not the case, and although bind worked with plain JavaScript objects, unbind did not. But now it does, so I've updated my answer. – Enliven

Answer 2

Though not a jQuery plugin, Twitter released a JavaScript framework called Flight which allows you to create component-based architectures, which communicate via events.

Flight is a lightweight, component-based JavaScript framework from Twitter. Unlike other JavaScript frameworks which are based around the MVC pattern, Flight maps behavior directly to DOM nodes.

Flight is agnostic to how requests are routed or which templating library you decide to use. Flight enforces strict separation of concerns. Components in Flight do not engage each other directly.

They broadcast their actions as events and those components subscribed to those events can take actions based on them. To make use of Flight, you will need the ES5-shim and jQuery along with an AMD loader.

Flight - A Lightweight, Component-Based JavaScript Framework From Twitter

Debonair

Answer 3

Could this serve as a ligthweight message passing framework?

function MyConstructor() {
    this.MessageQueues = {};

    this.PostMessage = function (Subject) {
        var Queue = this.MessageQueues[Subject];
        if (Queue) return function() {
                                        var i = Queue.length - 1;
                                        do Queue[i]();
                                        while (i--);
                                    }
        }

    this.Listen = function (Subject, Listener) {
        var Queue = this.MessageQueues[Subject] || [];
        (this.MessageQueues[Subject] = Queue).push(Listener);
    }
}

then you could do:

var myInstance = new MyConstructor();
myInstance.Listen("some message", callback());
myInstance.Listen("some other message", anotherCallback());
myInstance.Listen("some message", yesAnotherCallback());

and later:

myInstance.PostMessage("some message");

would dispatch the queues

Hyksos

Answer 4

There are actually two of them:

• Listen (faster): http://plugins.jquery.com/project/Listen
• Intercept (more advanced): http://plugins.jquery.com/project/Intercept

Bret

Nice! Thanks chief! I've been looking for this sort of functionality in JS for a long time. – Topotype

actually it surprised me that JQuery needs plugins for that. Normally I use Prototype and there it's the default way to do it. – Bret

Wait maybe I was a bit too hasty in accepting this as the answer. I looked them over, and neither of those libraries seem to have a central component to which events are fired and subscribers are notified. – Topotype

The document object is the "central component". – Bret

Answer 5

This can easily be accomplished using a dummy jQuery node as a dispatcher:

var someModule = (function ($) {

    var dispatcher = $("<div>");

    function init () {
        _doSomething();
    }

    /**
        @private
    */
    function _doSomething () {
        dispatcher.triggerHandler("SOME_CUSTOM_EVENT", [{someEventProperty: 1337}]);
    }

    return {
        dispatcher: dispatcher,
        init: init
    }

}(jQuery));



var someOtherModule = (function ($) {

    function init () {
        someModule.dispatcher.bind("SOME_CUSTOM_EVENT", _handleSomeEvent)
    }

    /**
        @private
    */
    function _handleSomeEvent (e, extra) {
        console.log(extra.someEventProperty) //1337
    }

    return {
        init: init
    }

}(jQuery));

$(function () {
    someOtherModule.init();
    someModule.init();
})

Politick

+1 I like the idea of relying on known dom techniques without altering the dom – Triform

Answer 6

A recent development is msgs.js "Message oriented programming for JavaScript. Inspired by Spring Integration". It also supports communication via WebSockets.

msgs.js applies the vocabulary and patterns defined in the 'Enterprise Integration Patterns' book to JavaScript extending messaging oriented programming into the browser and/or server side JavaScript. Messaging patterns originally developed to integrate loosely coupled disparate systems, apply just as well to loosely coupled modules within a single application process.

[...]

Tested environments:

• Node.js (0.6, 0.8)
• Chrome (stable)
• Firefox (stable, ESR, should work in earlier versions)
• IE (6-10)
• Safari (5, 6, iOS 4-6, should work in earlier versions)
• Opera (11, 12, should work in earlier versions)

Orissa

Answer 7

I have used the OpenAjax Hub for its publish/subscribe services. It's not a jQuery plugin, but a standalone JavaScript module. You can download and use the reference implementation from SourceForge. I like the hierarchical topic naming and the support for subscribing to multiple topics using wildcard notation.

Assignation