Question

I’m trying to build an application in ExtJs/Javascript and noticed events are good way to keep component independent to each others. However, the way events are raised and captured makes them a bit more specific to caller and receiver.

Is there any better way to do this. I’m planning to write one center EventBus class using which any component can raise one event and another can register to listen to it.

Is there any library already available to achieve something like this. I saw backbone.js not sure it’s doing same thing what i’m looking.

Answer 1

Writing a Mediator is dead-simple, if you’ve already got a framework that does event-delegation, using a publisher/subscriber or observer model (whether they’re called events or actions or they call the system an emitter or whatever).

You just make the Mediator the only emitter/publisher/etc, and then give your modules/classes/services/etc access to that Mediator.

var myEvents = Mediator(),

Module1 = (function (events) {
    var private_data = {},
        private_method = function () {},
        public_interface = { init : init };

    function init () { // setup procedures
        events.listen("widget/process/request", function (data) {
            var result = doStuff(data);
            events.fire("widget/process/result", result);
        });
    }
}(myEvents)),

Module2 = (function (events) {
    var private_data = {},
        public_interface = { init : init };

    function init (data) { // setup procedures
        events.fire("widget/process/request", data);
        events.listen("widget/process/result", private_method);
    }

    return public_interface;
}(myEvents));


Module1.init();
Module2.init(data);

If you’d like, you could even do something inside of your classes, to wrap your mediator, so that you can have public methods for your “class” / module, which will look like their own events, but will be passing data through to the mediator:

var myClass = function () {
    var mediator = null,
        public_interface = {
        fire : function (evt, data) { if (!mediator) { return; } mediator.fire(evt, data); },
        listen : function (evt, handler) { if (!mediator) { return; } mediator.listen(evt, handler); },
        setMediator : function (newMediator) { mediator = newMediator; }
    }
};

var mediator = Mediator(),
    obj1 = myClass(),
    obj2 = myClass();

obj1.setMediator(mediator);
obj2.setMediator(mediator);

obj1.listen("event1", obj1.doStuff.bind(obj1));
obj2.fire("event1", obj2.data);

Your modules now all have access to one single mediator or however many mediators you choose… …you could give each widget its own mediator, which its individual components could share… …plus give each widget access to a system-wide mediator, so while components can’t access global-services like AJAX or the DOM, the widget itself can.

And by providing an interface in your components, you could program neatly (in a more classical way in your main process, rather than in the lambda/callback-heavy JS way), using public wrapper calls, so now:

var imageLoader = ImageLoader();
imageLoader.setMediator(mediator);
img = imageLoader.load("myimg037");
imageLoader.fire("imageloader/imageloaded/myimg037", img);

Or however something similar might look in your project — imageLoader knows nothing about any other modules, but when you call its .fire method, any modules sharing the same mediator, and listening for that event will be notified.