Wie nutzt man MooTools?!

Inspiriert von einem Artikel von “chromasynthetic” möchte ich ein paar Best Practices für den Umgang mit MooTools vorstellen und diese kurz erläutern.

Elemente ansprechen

^?View Code JAVASCRIPT

   //javascript methode
   document.getElementById("someID");
   //mit Mootools
   $('someID');

Mit Mootools weit kürzer und vor allem problemlos zwecks CamalCases.

“Value” bearbeiten

^?View Code JAVASCRIPT

   //javascript methode
   var val= document.getElementById('input').value;
   //mit Mootools
   var val = $('input').getValue();

Mootools bietet diverse Methoden um Objekteigenschaften zu verändern oder auszulesen.

Verketten von Methoden

^?View Code JAVASCRIPT

   //javascript methode
   $('div').style.height = '100px';
   $('div').style.background = '#ffc';
   //mit Mootools
   $('footer').setStyles({
   height: '100px',
   background: '#ffc'
});

Einfaches Beispiel für eine Verkettung von Funktionen.

Absetzen eines AJAX-Requests

^?View Code JAVASCRIPT

   //falsche Methode
   new Ajax('eine.php?var1=test&var2=request');
 
   //besser mit  
   new Ajax('eine.php', {
       data: {
       var1: 'test',
       var2: 'request'
  }
});

Beide Möglichkeiten führen zum selben Ergebnis. Allerdings ist die Überschaubarkeit für letzteres deutlich größer. Für nicht statische Variabeln wie z.B. der ‘test’-String lassen sich an dieser Stelle natürlich auch Selektoren benutzen.

Event-Handling

^?View Code JAVASCRIPT

   //Falsche Methode
   $('Container').onclick = doSomething;
 
   //besser mit  
   $('Container').addEvent('click', doSomething);

Die zweite Variante ist weitaus sicherer, da sich damit der Mootools Core um die Umsetzung auf den jeweiligen Browser kümmert.

Einfache Iteration über Elementgruppen

^?View Code JAVASCRIPT

   //Falsche Methode
   $$('div.collapsed').each(function(el){
      el.addEvent('click', expand);
      });
 
   //besser mit  
   $$('div.collapsed').addEvent('click', expand);

Beide Versionen selektieren in diesem Fall jedes div mit der Klasse “collapsed” und legen darauf ein Click-Event. Das “$$” gibt Elemente in Form eines Arrays zurück, so dass eine Iteration mit der each-Funktion nicht mehr nötig ist.
Gleiches gilt für:

^?View Code JAVASCRIPT

   //Falsche Methode
   $$('div.hidden').each(function(el){
      el.removeClass('hidden');
   })
 
   //besser mit  
   $$('div.hidden').removeClass('hidden');

Ich hoffe dem ein oder anderen Einsteiger wird damit klar, inwiefern sich Standard Javascript von dem Einsatz von MooTools unterscheidet und wie man diese Zusatzfunkionalitäten nutzen kann.