Ad un certo punto, tutti noi dobbiamo memorizzare qualche set di dati sul client. Possiamo memorizzare lo spazio dei nomi di variabili sempre in maggiore quantità evitando collisioni; possiamo memorizzare le variabili in qualche oggetto locale che stiamo usando per la normale esecuzione del nostro script; possiamo associare attributi personalizzati ai nodi dell’HTML, violando la sacrosanta purezza dello XHTML.
Oppure possiamo allegare le variabili con delle specifiche, nello script (in modo da mantenere i validatori automatici felici) del documento stesso. Questo approccio abbastanza intuitivo non è stato dato l’importanza che merita.
- Possono essere assegnati nomi arbitrari per i valori e si possono assegnare, come queste, praticamente quanti ne vogliamo.
- Possono essere applicate direttamente a jQuery che può accedere, il che significa che siamo in grado di assegnare dei valori rapidamente a interi set di nodi DOM, senza dover aggiungere classi CSS o memorizzarlo nel markup.
- Possono essere dinamicamente aggiunti, accessibili, modificati e rimossi a piacimento, senza trasferimenti di rete.
L’unico svantaggio è che non sono persistenti attraverso il caricamento della pagina, ma abbiamo vissuto con questo problema per un lungo, lungo tempo, non è vero?
Quindi, come possiamo utilizzare questo metodo a portata di mano? La documentazione è abbastanza chiara, ma risolvo con un esempio un po’ più a terra:
<body> <div> <span id="conto"></span> <button id="aggiungi">Aggiungi punto</button> <button id="resetta">Resetta punti</button> </div> <div id="dati"></div> </body>
punteggi = { aggiungiPunto: function() { var dat = this.prendiDati(); dat[dat.length] = Math.floor(Math.random()*101); $('#dati').data('punti', dat); }, resettaDati: function() { $('#dati').removeData('punti'); }, dimensioneDati: function() { var dat = this.prendiDati(); return dat.length; }, prendiDati: function() { var dat = $('#dati').data('punti'); if (undefined == dat) return []; if (Array != dat.constructor) return [dat]; return dat; }, aggiornaSchermo: function() { $('#conto').text('Click: ' + (lim = this.dimensioneDati())); var tmp = ''; var dat = this.prendiDati(); for (var i = 0; i < lim; i++) { tmp += dat[i]; if (i < lim - 1) tmp += ','; } $('#dati').text('[' + tmp + ']'); } } $(document).ready( function() { punteggi.aggiornaSchermo(); $('#aggiungi').bind('click', function(e) { punteggi.aggiungiPunto(); punteggi.aggiornaSchermo(); }); $('#resetta').bind('click', function(e) { punteggi.resettaDati(); punteggi.aggiornaSchermo(); }); });
Da notare che possiamo identificare gli oggetti dove manca l’attributo scelto in modo dinamico come undefined.
Ancora nessun commento