Command-Tab

Thursday, December 4th, 2008 at 9:30 PM

Fling is a simple but powerful jQuery plugin for dealing with multiple events using a publisher/subscriber model. jQuery handles the browser-native events, Fling manages them, and you write the code that’s left.

Why Fling?
To understand the purpose of Fling, imagine a standard three-pane email client (to borrow an example from Seth Dillingham, whose work inspired Fling): When you click on a message you just received, several things happen:

• The mailbox unread count gets decremented
• The message’s unread indicator goes away
• The message row text goes from bold to plain
• The message content appears in the viewer pane

These actions happen with little, if any interaction between each other. All each needs to know is that you clicked on a given unread message. Using jQuery, it’s quite easy to put all four actions inside the same click handler function and be done in minutes. However, when your code base starts to grow, having all that code inside one event handler can make multiple triggers and cascading events cumbersome. There’s a better way to make things happen — Fling your events around.

A Basic Example
Start by including Fling on your page, along with jQuery:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.fling.js"></script>

Then, use jQuery’s handy document ready to set up new Fling subscribers, and finally, publish the event:

// jQuery Document Ready
$(function() {
	// Subscribe to some_event_name
	$.fling('subscribe', 'some_event_name', function() {
		alert('Hello from Fling 1');
	});

	// Subscribe to some_event_name
	$.fling('subscribe', 'some_event_name', function() {
		alert('Hello from Fling 2');
	});

	// Publish some_event_name
	$.fling('publish', 'some_event_name');
});

When run, you should see two alerts pop up in sequence. The only relationship the subscribers have is that they both care about “some_event_name” happening. When publish was called, both did their jobs.

In Depth
$.fling() has four main functions:

• Create sets up an event without publishing it or subscribing any events. This isn’t used too often, as Create happens automatically when Publish or Subscribe is called.

  $.fling('create', 'myEvent');

• Destroy frees the memory occupied by the event and it’s subscribers when you’re done with an event for good.

  $.fling('destroy', 'myEvent');

• Publish notifies all subscribers that a given event happened. It can also pass data to subscribers through a second parameter. Publish can be called at any time, with zero or more subscribers, meaning your event can happen even if no subscribers care about that event.

  $.fling('publish', 'myEvent');

  $.fling('publish', 'myEvent', {my: "data"});

• Subscribe gets called when an event is Published. You can Subscribe to events that have not been Created or Published yet, as the publisher can arrive later via another script, if needed.

  $.fling('subscribe', 'myEvent', function() {
  	/* ...your code... */
  });

  $.fling('subscribe', 'myEvent', someNamedFunction);

  $.fling('subscribe', 'myEvent', function(event, passedData) {
  	alert(passedData);
  });

Give Fling a Try!
So, that’s it to Fling. There’s not a whole lot to it — you might even be surprised to see just how short the code is. Give it a shot, and see how your jQuery code can be better organized, called from multiple places, and even cascade on down the line.

Release History

• jQuery Fling 1.0
  Released on Dec. 4, 2008
  Initial release.

Released under the MIT License. Fling is short, sweet, and yours to hack. Improvements are welcomed!

This entry was posted on Thursday, December 4th, 2008 at 9:30 pm and is filed under NerdLab, Programming. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, trackback from your own site, or Stumble it!.