Vaig començar a treballar amb mootools farà poc més d’un mes, i mirant tot d’exemples de com programar-ho vaig veure en exemples quelcom que ja havia sentit però del que mai havia prestat atenció: el JavaScript no intrusiu.

Bàsicament el JavaScript no intrusiu és el que permet realitzar accions al DOM i manipular els esdeveniments o events però sense haver d’escriure el codi JavaScript dins de les etiquetes html. Fins ara ho veiem així:

<div onclick="executa_funcio()">text qualsevol</div>

Això no està pas malament, però xoca una mica amb la filosofia de separar la web les tres capes de lògica, disseny i estructura perquè estàs barrejant lògica (JavaScript) i estructura (HTML).

Mootools dòna un pas endevant i permet introduïr en el codi el JS no intrusiu d’una forma semblant a la següent:

$A($$('.delete')).each(function(el) {
el.onclick = this.click.pass(el, this);
}, this);

Com es veu en l’exemple el JavaScript crea un Array ($A) amb tots els elements que tenen la classe delete, i inicia un bucle per aquest array on assigna l’event onclick per cadascun d’aquests elements. Com es pot veure no hi ha cap etiqueta html afectada directament. Aquest mètode ajuda a tenir el codi més net i endreçat en les tres capes.

I com passem es paràmetres? Doncs si vols recollir informació ho faries a través dels atributs de l’element afectat. Si tenim a l’html quelcom així:

<div title="Un valor qualsevol" alt="Un altre valor">Text qualsevol</div>

A l’arxiu JS ho recolliriem així (el fa referència al element html):

var param_tit = el.title; // Recull Un valor qualsevol
var param_alt = el.alt // Recull Un altre valor


En definitiva, una passada i que dòna moltes possibilitats!

No sé si Prototype, jquery o el JavaScript tradicional permet fer-ho, però probablement sí.

Artículos relacionados:

1. Carregar swfobject per AJAX amb mootools
2. Web 2.0: Li deus al JavaScript

Tags: javascript, mootools