Organized Selector Chaos with dojo.behavior

By  on  

One of the most underrated parts of writing good JavaScript code is writing *maintainable* code:  readable, modular, and clean.  Just because you use a JavaScript framework doesn't mean your code is maintainable.  Quick the contrary could be true -- some frameworks make JavaScript uglier.

Because of all the DOM node traversal that's involved with modern day JavaScript techniques, class usage and element event modification can quickly become spaghetti code.  Luckily dojo.behavior exists.  This Dojo class allows you to handle event querying and functionality assignment in a very uniform, clean manner.

Element Usage without Behavior:  query and forEach

The typical element collection and functionality assignment is done with dojo.query and dojo.forEach:

/* style updates */
dojo.query('a.someClass').forEach(function(item) {
	item.addClass('someOtherClass');
})

/* events */
dojo.query('a.someClass').forEach(function(item) {
	dojo.connect(item,'onclick',function() {
		console.log('clicked!');
	});
});

This code is by no means ugly, but it can quickly become a mess.  The other drawback to using this method is that there's no clean way to "enable" and disable these behaviors.  Once they're set, you need another code block to remove the behaviors.  Enter dojo.behavior.

Organization:  dojo.behavior!

dojo.behavior provides a solid, functional, and readable structure of handling selector-to-functionality assignments.  A quick format overview:

/* require the class */	
dojo.require('dojo.behavior');
	
/* super basic usage */
dojo.behavior.add({
	'a.someClass': function(node) { //assumes "found"
		console.log('Found a node:  ',node);
	}
});
dojo.behavior.apply();

/* multiple selectors */
dojo.behavior.add({
	'#someNode': {
		onclick: function(e) {
			e.preventDefault(); // stop the default event handler
			console.log('clicked! ', e.target);
		}
	},
	'div': {
		found: function(node) {
			console.log('Found a node:  ',node);
		},
		onclick: function(e) {
			console.log('this DIV was clicked! ', e.target);
		}
	}
});
dojo.behavior.apply();

dojo.behavior.apply...applies...the behaviors we've set.  Simple, effective, clean.

Widget Creation with dojo.behavior

Widget creation is an even better opportunity to use dojo.behavior:

dojo.behavior.add({
	'select': function(node) {
		//create this type of widget for all select elements
		new dijit.form.FilteringSelect({/* options */,node});
	},
	'input[type=text]': {
		found: function(node) {
			new dijit.form.TextBox({},node);
		},
		onfocus: function(e) {
			console.log('got focus!');
		}
	}
});
dojo.behavior.apply();

Event Assignement with dojo.behavior

Event assignment also works with dojo.behavior:

dojo.behavior.add({
	'a.disableClick': {
		onchange: function(e) {
			e.preventDefault();
		}
	}
});
dojo.behavior.apply();

As does topic subscribing:

dojo.behavior.add({
    '#someUL > li': '/found/li'
});
dojo.subscribe('/found/li', function(msg){
    console.log('message: ', msg);
});
dojo.behavior.apply();

Behave!

Though dojo.behavior doesn't save much code, it definitely makes code more readable and thus, more portable.

Recent Features

  • By
    LightFace:  Facebook Lightbox for MooTools

    One of the web components I've always loved has been Facebook's modal dialog.  This "lightbox" isn't like others:  no dark overlay, no obnoxious animating to size, and it doesn't try to do "too much."  With Facebook's dialog in mind, I've created LightFace:  a Facebook lightbox...

  • By
    Vibration API

    Many of the new APIs provided to us by browser vendors are more targeted toward the mobile user than the desktop user.  One of those simple APIs the Vibration API.  The Vibration API allows developers to direct the device, using JavaScript, to vibrate in...

Incredible Demos

  • By
    MooTools Accordion: Mouseover Style

    Everyone loves the MooTools Accordion plugin but I get a lot of requests from readers asking me how to make each accordion item open when the user hovers over the item instead of making the user click. You have two options: hack the original plugin...

  • By
    DWRequest: MooTools 1.2 AJAX Listener & Message Display

    Though MooTools 1.2 is in its second beta stage, its basic syntax and theory changes have been hashed out. The JavaScript library continues to improve and become more flexible. Fellow DZone Zone Leader Boyan Kostadinov wrote a very useful article detailing how you can add a...

Discussion

  1. This blog post made me take a closer look at dojo.behavior – http://whatsthepointeh.blogspot.com/2010/09/dojoconnect-vs-dojobehavior.html

  2. Is this basically a way to prevent using dojo.query() in a way that is executed immediately whilst also providing a level of control over the commands?

  3. Paul Lysak

    Hi.
    I wonder if dojo.behavior can work well with declaratively created dijits. Say, for connecting handlers to menu items if this menu was created using “parseOnLoad: true” option.
    Thanks.

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