Using Pub Sub with The Dojo Toolkit

By  on  

As I've stated many times, the Dojo Toolkit is probably the most complete JavaScript toolkit out there, especially when it comes to event management and application communication.  I've already done a very brief introduction to dojo.connect so I thought I'd also do a short introduction to Dojo's other event system:  pub/sub with dojo.publish and dojo.subscribe.

The publish/subscribe strategy has many advantage over basic event connectivity:

  • No reference to another object or element is required
  • It's not the concern of the publisher who subscribes
  • As a result of not needing reference to another object or element, your code is instantly more portable

So let's take a look at how pub/sub is used!

Publishing

The first part of pub/sub is publishing to a channel.  When publishing to a channel, you provide the channel name and arguments to be passed to any subscriber:

// dojo.publish("{channel}", [arg1, arg2, arg3]);
dojo.publish("/app/login", [username, userData]);

Arguments should be passed within an array and may be of any type.  Your channel can be any number of channels deep; the more specific the channel, the more specific your event can be.  While the slash is used as the standard channel specifier, you can use any string name you'd like.

Subscribing

dojo.publish broadcasts message but it's dojo.subscribe that that must listen for and react to the message.  You must match the exact channel name when subscribing:

// Subscribe to the same channel, accepting each argument individually
var handle = dojo.subscribe("/app/login", function(username, userData) {
	// Now do something!
	
	
	// Unsubscribe if you want
	dojo.unsubscribe(handle);
});

Note how a handle is returned from dojo.subscribe. The Dojo Toolkit does not support wildcard channel subscription, so the following will not work:

// Wildcards don't work!
var handle = dojo.subscribe("/app/*", fn);

So how is pub/sub used internally within Dojo?  One prime example is the dojo.hash method.  dojo.hash notifies you of when the window hash changes.  You can catch the hash change event by subscribing as follows:

// This is how you respond to hash changes!
dojo.subscribe("/dojo/hashchange", function(currentHash){ 
	// Do something!
});

Now you can modify AJAX-ified portions of your application when the hash changes!

What's great about pub/sub in any toolkit or platform is that it's easy to both use and code the API for.  The code and idea are both very simply yet also very powerful.  If you've got a large application that you'd like to be flexible and decoupled from individual objects, try using pub/sub -- it will relieve unnecessary complexity!

Recent Features

  • By
    9 Mind-Blowing Canvas Demos

    The <canvas> element has been a revelation for the visual experts among our ranks.  Canvas provides the means for incredible and efficient animations with the added bonus of no Flash; these developers can flash their awesome JavaScript skills instead.  Here are nine unbelievable canvas demos that...

  • By
    5 HTML5 APIs You Didn&#8217;t Know Existed

    When you say or read "HTML5", you half expect exotic dancers and unicorns to walk into the room to the tune of "I'm Sexy and I Know It."  Can you blame us though?  We watched the fundamental APIs stagnate for so long that a basic feature...

Incredible Demos

  • By
    Fade Images with MooTools LazyLoad

    I recently received an email from a MooTools developer asking a great question about my LazyLoad class: "I'm using your LazyLoad MooTools plugin (which is great, by the way). I have been trying to figure out how to modify it so that once an image scrolls into...

  • By
    Create a Context Menu with Dojo and Dijit

    Context menus, used in the right type of web application, can be invaluable.  They provide shortcut methods to different functionality within the application and, with just a right click, they are readily available.  Dojo's Dijit frameworks provides an easy way to create stylish, flexible context...

Discussion

    Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!