Utilizzare l'Element.Storage e i metodi della classe Element

Le due lezioni precedenti dedicate alla classe Element ci hanno fornito gli strumenti di base fondamentali per compiere operazioni con gli elementi tramite MooTools. Ma i metodi offerti da Element sono davvero molti e permettono di effettuare qualsiasi operazione di editing del DOM di una pagina. Vediamo ora come mettere in pratica alcuni di essi:

// otteniamo il riferimento al nostro elemento
var el = $('myElement');

// inseriamo l'elemento 'el' in un elemento parente, in modo che risulti il primo elemento figlio
el.inject(myParentElement, 'top');

// ora otteniamo tutti i suoi elementi figli
var children = el.getChildren();

// cloniamo l'elemento in una nuova variabile
var clone = el.clone();

// infine rimuoviamolo dal DOM
el.dispose();

E' inoltre importante ricordare che ogni metodo della classe Element restituisce l'istanza che rappresenta il nostro elemento, permettendoci dunque di "incatenare" le varie chiamate:

el.setStyle('color', 'blue').inject(myParentElement).dispose();

Element.Storage

Dalla versione 1.2, MooTools ci offre un nuovo e potente strumento per effettuare le nostre elaborazioni con gli elementi: l'oggetto Element.Storage. Immaginate che ogni elemento della nostra pagina abbia a disposizione un deposito (uno storage appunto) nel quale possiamo immagazzinare qualsiasi variabile, oggetto o valore e recuperarlo all'occorrenza. I metodi che abbiamo a disposizione per lavorare con lo storage degli elementi sono store e retrieve: il primo permette di salvare una variabile nello storage, il secondo di recuperarne il valore o il riferimento. Vediamo subito un esempio pratico:

// salviamo un semplice valore con la keyword 'initWidth' che rappresenta il valore della larghezza del nostro elemento
el.store('initWidth', el.getStyle('width').toInt());

// successivamente recuperiamo questo valore ed effattuiamone l'alert
alert(el.retrieve('initWidth'));

Ovviamente è possibile salvare all'interno dello storage qualsiasi cosa vogliamo: array,oggetti, stringhe, numeri, riferimenti a funzioni, istanze, Hash e cosi via. Nel successivo esempio viene salvata un'istanza della classe Fx.Tween per creare un'animazione e successivamente azionata:

// salviamo l'istanza
el.store('myEffect', new Fx.Tween(el, {duration: 4000}));

// recuperiamola
var fx = el.retrieve('myEffect');

// successivamente azioniamola...
fx.start('width', [20, 200]);

Utilizzando l'Element.Storage siamo sicuri che i fastidiosi Memory Leak prodotti dai browser (specialmente da Internet Explorer) siano azzerati o ridotti al minimo. Questo permette di risparmiare l'occupazione della memoria e di aumentare la produttività della nostra applicazione. L'Element.Storage è dunque uno strumento molto utile, il cui utilizzo è fortemente consigliato nella gran parte delle applicazioni in cui abbiamo la necessità di lavorare con gli elementi ed i valori che siano in qualche modo ad essi collegati: una volta provato non si abbandonerà più.