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
    Create a CSS Flipping Animation

    CSS animations are a lot of fun; the beauty of them is that through many simple properties, you can create anything from an elegant fade in to a WTF-Pixar-would-be-proud effect. One CSS effect somewhere in between is the CSS flip effect, whereby there's...

  • By
    5 HTML5 APIs You Didn’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
    CSS Tooltips

    We all know that you can make shapes with CSS and a single HTML element, as I've covered in my CSS Triangles and CSS Circles posts.  Triangles and circles are fairly simply though, so as CSS advances, we need to stretch the boundaries...

  • By
    MooTools, mediaboxAdvanced, and Mexico

    The lightbox is probably one of my favorite parts of the Web 2.0 revolution. No more having to open new windows (which can bog down your computer quite a bit) to see a larger image, video, etc. Instead, the item loads right into the...

Discussion

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