Uno dei componenti più utili ed interessanti di MooTools è sicuramente il file Hash.js (http://docs.mootools.net/Plugins/Hash.js). Purtroppo spesso le sue funzionalità vengono sottovalutate o prese sotto gamba. Per sottolineare questo fatto, nella prossima release di MooTools la classe Hash verrà convertita da semplice plug-in in una classe nativa, proprio come Array, String, Element e cosi via.
Per questi importanti motivi ho deciso di dedicare un articolo al funzionamento e all'utilizzo di questa potente classe. Per rendere la panoramica ancora più completa, consiglio la lettura dell'articolo The Hash sul blog ufficiale di MooTools: espone alcune nuove caratteristiche che compariranno con la nuova versione.
Utilizzo di base
Gli hash vengono utilizzati principalmente per "mappare" un oggetto, ovvero per creare una sorta di wrapper attorno ad esso che servirà per compiere operazioni molto interessanti.
Iniziamo con la descrizione del costruttore Hash: esso accetta un solo parametro, che è l'oggetto descritto sopra. I metodi che questo costruttore supporta sono i seguenti:
- get - restituisce il valore della proprietà specificata;
- set - aggiunge una nuova proprietà al nostro hash che assumerà il valore specificato oppure sovrascriverà quella precedentemente impostata;
- hasKey - controlla la presenza di una proprietà all'interno dell'hash. Restituisce
truese è presente, altrimentifalse; - remove - rimuove la proprietà specificata dal nostro hash;
- each - richiama una funzione per ogni proprietà del nostro hash (simile al metodo each applicabile sugli Array e sulle collezioni di elementi);
- extend - estende l'hash con nuove proprietà/valori ricavate dall'oggetto che viene passato come parametro. Se sono già presenti nell'hash originale vengono sovrascritte (simile alla funzione
$extend, di cui usa le funzionalità); - merge - fonde l'hash con molteplici oggetti (simile alla funzione
$merge, di cui usa le funzionalità); - empty - rimuove, o meglio, svuota l'hash da tutte le sue proprietà;
- keys - restituisce un array che contiene tutte le chiavi (le proprietà) dell'hash;
- values - restituisce un array che contiene tutte i valori (ricavati dalle proprietà) dell'hash.
Vediamo ora un semplice utilizzo di Hash per effettuare il mapping di un oggetto:
var hash = new Hash({
'a': 'value of a',
'b': 'value of b',
'c': 'value of c',
'd': 'value of d'
});
// otteniamo il valore della chiave 'b': 'value of b'
hash.get('b');
// impostiamo una nuova proprietà
hash.set('e', 'value of e');
// impostiamo un nuovo valore per una vecchia proprietà
hash.set('b', 'new value of b');
// controlliamo se ha la chiave c: true
hash.hasKey('c');
Alcuni potrebbero obiettare che si tratta solamente di una normale dichiarazione di un oggetto solo più elegante, ma non è cosi.
Una volta che abbiamo dichiarato il nostro Hash, possiamo usufruire del potente metodo each, che permette di iterare attraverso tutte le sue proprietà, diversamente da un normale oggetto:
hash.each(function(value, key) {
alert('Il valore della proprietà ' + key + ' è ' + value);
});
// o ancora, preleviamo un valore e inseriamolo in un elemento
hash.each(function(value, key) {
if(key == 'b') $('myElement').setHTML("<b>" + value + "<b>");
})
Possiamo inoltre estenderlo con nuove proprietà, utilizzando l'elegante metodo di estensione OOP che caratterizza il framework MooTools:
// l'Hash hash guadagna le proprietà 'f', 'g', 'h', 'i'
hash.extend({
'f': 'value of f',
'g': 'value of g',
'h': 'value of h',
'i': 'valueo of i'
});
Oppure fonderlo con altri oggetti, ottenere tutte le chiavi o tutti i valori e così via. A questo proposito ho creato un esempio che utilizzando i metodi values e keys permette di creare una tabella che contiene tutte lo coppie chiave/valore dell'Hash che abbiamo creato.
In questo modo abbiamo un controllo completo e flessibile sia sulle chiavi che sui valori di un hash.
Hash.Cookie: salvare un hash in un cookie
Un'altra importante funzionalità della classe Hash è la sua estensione Hash.Cookie (hash.cookie.js) che permette di salvare il valore di un hash all'interno di un cookie.
Il costruttore Hash.Cookie accetta due parametri: il nome del cookie e le sue opzioni, identiche a quelle disponibili per il costruttore Cookie (http://docs.mootools.net/Remote/Cookie.js) con l'aggiunta di autoSave, che se impostata a true, permette di salvare il cookie ad ogni operazione che si compie.
I metodi disponibili per questa classe, oltre a quelli ereditati da Hash sono:
- save - salva in modo manuale il nostro hash all'interno di un cookie (se ad esempio abbiamo impostato autoSave a
false); - load - carica il cookie e lo assegna all'hash.
Vediamo un semplice esempio:
var user = new Hash.Cookie('User');
// aggiungiamo nuove proprietà
user.extend({
'name': 'A Guest',
'type': 'guest'
});
// Abbiamo salvato il cookie (autoSave:true). In un'altra pagina viene caricato automaticamente:
var user = new Hash.Cookie('User');
// 'guest'
user.get('type');
// ora cancelliamo il cookie
user.erase();
Questa applicazione mostra come salvare un intero hash all'interno di un cookie e compiere operazioni con esso, utilizzando i metodi ereditati dalla class Hash come extend e get.
Conclusione
In questo articolo abbiamo visto tutta la flessibilità che ricaviamo dall'avvolgere un normale oggetto all'interno di un Hash. I vantaggi sono molteplici: sotto l'aspetto del codice questo risulterà più elegante e accessibile, mentre per quanto riguarda le funzionalità un Hash può usufruire dei potenti metodi each, extend e merge. Abbiamo visto inoltre come utilizzare la classe Hash.Cookie per salvare le informazioni che vogliamo, create con un Hash, all'interno di un cookie per poi usufruirne nel corso della nostra applicazione.
Un'altra nota importante sugli Hash: nella successiva versione di MooTools questa classe verrà potenziata ulteriormente con altri metodi del costruttore Array, come some, filter, every e map, permettendo un ulteriore grado di iterazione tra le chiavi del nostro hash.
