Treehouse

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!

Treehouse Learning

Recent Features

  • Creating Scrolling Parallax Effects with CSS

    Introduction For quite a long time now websites with the so called "parallax" effect have been really popular. In case you have not heard of this effect, it basically includes different layers of images that are moving in different directions or with different speed. This leads to a...

  • Convert XML to JSON with JavaScript

    If you follow me on Twitter, you know that I've been working on a super top secret mobile application using Appcelerator Titanium.  The experience has been great:  using JavaScript to create easy to write, easy to test, native mobile apps has been fun.  My...

Incredible Demos

  • CSS calc

    CSS is a complete conundrum; we all appreciate CSS because of its simplicity but always yearn for the language to do just a bit more. CSS has evolved to accommodate placeholders, animations, and even click events. One problem we always thought...

  • Create a Sexy Persistent Header with Opacity Using MooTools or jQuery

    I've been working with the Magento eCommerce solution a lot lately and I've taken a liking to a technique they use with the top bar within their administrative control panel. When the user scrolls below a specified threshold, the top bar becomes attached to the...

Discussion

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