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.

This entry was posted on Friday, November 9th, 2007 at 2:06 pm and is filed under tutorials and tagged with examples, mootools, v1.11. You can follow any responses to this entry through the RSS 2.0 feed.