Vi siete mai trovati ad utilizzare un attributo class o rel per memorizzare metadati per il solo scopo di rendere il vostro JavaScript più semplice, e raggiungere porzioni di codice più velocemente?
Grazie ai data-attribute di HTML5, possiamo aggiungere attributi personalizzati su tutti elementi con una sintassi standard di tipo "nome=valore". Questi nuovi attributi personalizzati sono costituiti da due parti:
| Parte | Descrizione |
|---|---|
| Nome | Il nome dell'attributo: deve essere almeno lungo un carattere e deve essere preceduto da data-, inoltre non dovrebbe contenere lettere maiuscole, in ogni caso evitando di scrivere parole composte, o frasi, unendo tutte le parole tra loro |
| Valore | Qualunque valore desideriamo |
Vediamo subito un esempio in cui applichiamo alle voci di un punto elenco delle informazioni supplementari:
<ul id="periodo_anno">
<li data-costo="20" data-periodo="da Gennaio ad Aprile">Primo</li>
<li data-costo="30" data-periodo="da Maggio a Agosto">Secondo</li>
<li data-costo="50" data-periodo="da Settembre a Dicembre">Terzo</li>
</ul>La specifica W3C recita:
Gli attributi data- sono destinati a memorizzare dati personalizzati privatialla pagina o all'applicazione, per i quali non ci sono attributi o elementi più appropriati. Ogni elemento HTML può avere qualsiasi numero di attributi personalizzati specificati, con qualsiasi valore.
Saputo questo vediamo come utilizzare questi dati in JavaScript per creare una user experience più coinvolgente.
Immaginiamo di voler far apparire un tooltip quando un utente seleziona un periodo tra quelli indicati nell'esempio: il nuovo livello conterrà il costo dell'abbonamento, il periodo di riferimento e altre informazioni per quel periodo.
Grazie agli attributi 'data' che abbiamo aggiunto ai nostri <li>, abbiamo le informazioni pronte per essere visualizzate, senza ulteriori chiamate Ajax, query sul DB etc.
Naturalmente il browser ingorerà gli attributi personalizzati e non ne mostrerà autonomamente il contenuto.
Quando utilizzare i data-attributes
Come abbiamo visto i data-attributes offrono un grande vantaggio nella realizzazione di applicazioni Javascript, inoltre gli attributi data- sono HTML5 validi, possono quindi essere utilizzati in qualsiasi browser supporti un doctype HTML5.
Altra cosa interessante di questa specifica è che non c'è bisogno di aspettare che i browser implementino qualcosa per iniziare ad usarla. Iniziamo ad utilizzare i data- sui metadati HTML oggi sapendo che, quando il validatore HTML5 del W3C gestirà questo attributo, il nostro sito sarà già compatibile.
Ora che abbiamo una descrizione di cosa sono gli attributi data-, vediamo cosa possono aiutarci a memorizzare:
- l'altezza iniziale o l'opacità di un elemento che potrebbe essere richiesto nel calcolo di un'animazione JavaScript
- i parametri di un filmato Flash che viene caricato tramite JavaScript
- i dati di analisi di tagging web personalizzato, per esempio di Google Analytics
- i dati sullo stato di salute, munizioni, o la vita di un elemento in un gioco di JavaScript
- i capitoli di un
<video>o i sottotitoli, da sfruttare con Javascript
Un semplice esempio
Entriamo nel pratico. Attualmente per recuperare o aggiornare degli attributi data utilizzando JavaScript, possiamo utilizzare i metodi getAttribute e setAttribute:
<div id='mese-abbonamento' data-mese='12'></div>
<script>
// 'Leggo' il data- usando getAttribute
var abbonamento = document.getElementById('mese-abbonamento');
var mese = abbonamento.getAttribute('data-mese'); // = '12'
// 'Scrivo' il data- usando setAttribute
abbonamento.setAttribute('data-mese','7'); //
</script>Questo metodo funziona in tutti i browser, ma utilizza i data- in modo improprio.
Dataset
Il secondo listato mostra come ottenere la stessa cosa accedendo alle proprietà dataset di un elemento. Questa struttura dati, parte delle nuove API HTML5 JavaScript, restituisce un oggetto DOMStringMap contenente tutti gli elementi data-.
<div id='mese-abbonamento' data-costo='50' data-a-partire-da='giugno'></div>
<script>
// 'Leggo' il data- usando il dataset
var abbonamento = document.getElementById('mese-abbonamento');
var costo = abbonamento.dataset.costo; // = 50;
// 'Scrivo' il data- usando il dataset
var partenza = abbonamento.dataset.aPartireDa; // 'a-partire-da' -> 'aPartireDa'
abbonamento.dataset.aPartireDa = 'febbraio'; //
</script>Quando utilizziamo questo approccio, possiamo riferirci ai dati anche senza considerare il prefisso data-: utilizzando il nome assegnato, invece del nome completo dell'attributo. Se all'interno del nome dell'attributo sono presenti dei trattini, questi saranno converititi in CamelCase.
Se ad un certo punto nello script, uno specifico data- diventa ridondante e non è più necessario, possiamo rimuoverlo dall'elemento DOM assegnandogli un valore null.
abbonamento.dataset.costo = null;Consigli generali per l'uso
Più gli attributi data- saranno utilizzati, maggiore sarà il rischio di conflitti sui nomi: non è improbabile che un nome come data-height, possa essere presente anche in una libreria, o un plugin. Per evitare questo, è consigliabile aggiungere dei prefissi agli attributi, possibilmente rimanendo coerenti con uno standard (eg nome del sito o del plugin), ad esempio data-htmlit-height.
Sebbene non sia possibile utilizzare ancora la nuova API JavaScript, possiamo sfruttare la nuova sintassi con getAttribute e setAttribute sicuri che funzioneranno in tutti i principali browser.
