Javascript no intrusiu
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í.
Tags: javascript, mootools
