How well do you know Mootools?
November 9th, 2007 in tutorials | 18 Comments
After reading the Prototype checklist, I thought I’d take all those examples and apply them to Mootools. So here we go (sorry, mine won’t be styled as nicely):
One
The wrong way
document.getElementById('foo');
The right way
$('foo');
This is the standard way of getting elements, started by Prototype. This will probably be the same for all popular libraries.
Two
The wrong way
var woot = document.getElementById('bar').value; // or var woot = $('bar').value;
The right way
var woot = $('bar').getValue();
Mootools doesn’t have a shortcut for getting form values, but it does have a chainable method.
Three
The wrong way
$('footer').style.height = '100px'; $('footer').style.background = '#ffc';
The right way
$('footer').setStyles({ height: '100px', background: '#ffc' });
Almost the same as Prototype, but don’t forget the ’s’ on setStyles.
Four
The wrong way
$('coolestWidgetEver').innerHTML = 'some nifty content';
The right way
$('coolestWidgetEver').setHTML('some nifty content');
Same as Prototype, but ’setHTML’ instead of ‘update’ (’setHTML’ makes more sense imo).
Five
The wrong way
new Ajax('ninja.php?weapon1=foo&weapon2=bar');
The right way
new Ajax('ninja.php', { data: { weapon1: 'foo', weapon2: 'bar' } });
If the values are static, I’d prefer to use the first example, really. But kangax argues that the second example is “cleaner and better structured parameters definition.”
Six
The wrong way
new Ajax('blah.php', { method: 'post', async: true, encoding: 'UTF-8', headers: {'contentType': 'application/x-www-form-urlencoded'} });
The right way
new Ajax('blah.php');
These options are all defaults, no need to set them.
Seven
The wrong way
$('myContainer').onclick = doSomeMagic;
The right way
$('myContainer').addEvent('click', doSomeMagic);
I changed the wrong way example because Prototype has a non-object-oriented way of attaching events that doesn’t apply to Mootools. Anyway, Mootools implements its own cross-browser event methods, so you should use them instead.
Eight
The wrong way
$$('div.hidden').each(function(el){ el.removeClass('hidden'); })
The right way
$$('div.hidden').removeClass('hidden');
Slightly different examples, as Mootools doesn’t have the show() or invoke() methods. Anyway, Mootools can automatically apply Element methods to a collection of elements. No need to iterate through them.
Nine
The wrong way
$$('div.collapsed').each(function(el){ el.addEvent('click', expand); });
The right way
$$('div.collapsed').addEvent('click', expand);
Again, you don’t have to iterate over a collection of elements if you want to call an Element method on all of them.
Ten
The wrong way
$$('input.date').addEvent('focus', onFocus); $$('input.date').addEvent('blur', onBlur);
The right way
$$('input.date').addEvents({ 'focus': onFocus, 'blur': onBlur });
The point of this example for Prototype was supposed to be chaining, but Mootools provides a function to add multiple events, which looks a lot nicer.
Eleven
The wrong way
$('productTable').innerHTML = $('productTable').innerHTML + '<tr><td>' + productId + ' ' + productName + '</td></tr><tr><td>' + productId + ' ' + productPrice + '</td></tr>';
The right way
var template = '<tr><td>#{id} #{name}</td></tr><tr><td>#{id} #{price}</td></tr>'; $('productTable').injectHTML(template.interpolate({ id: productId, name: productName, price: productPrice }));
Note that this Mootools functionality doesn’t come out-of-the-box. You’ll need to grab this string interpolation plugin and injectHTML.
That’s It
Just so we’re on the same page, these examples are done with Mootools v1.11.
There is a part 2 of the original article but it seems pretty specific to Prototype. Maybe I’ll come up with more shortcuts in another article for Mootools.
Hi, I'm Chris, a passionate freelance web developer. My languages of choice are PHP and JavaScript, and that's what you'll mostly find in my blog. You'll also find updates about 