JavaScript  »  Guide  »  Guida jQuery 

Una parte interessante di jQuery riguarda gli Internals (funzioni interne) e il Data Storage (raccolta di dati).

Questi due argomenti sono strettamente legati poiché rappresentano un sistema interno a jQuery per aggiungere e ricavare dati da un elemento aumentandone le possibili proprietà oltre i semplici attributi. Prendiamo ad esempio l'elemento seguente:

//elemento di riferimento
<div class="miaClasse" id="mioId"></div>

dell'elemento div qui sopra possiamo ricavare classe e id sui quali lavorare:

var classe = $("div").attr("class");
var id = $("div").attr("id");

Se volessi aggiungere informazioni precise, per esempio il tipo di dato che può contenere, dovremmo aggiungerlo nella classe, oppure ricorrere ad un altro attributo fra quelli permessi:

<div class="miaClasse numeri" id="mioId"></div>
<div class="miaClasse" rel="numeri" id="mioId"></div>

In ambedue i casi saremmo ben presto limitati per numero di attributi disponibili e per le righe di codice necessario a ricavare i dati di configurazione.
Una strada per aggirare il problema è l'utilizzo del plugin metadata, che permette di inserire nella stringa dell'attributo class un oggetto JavaScript ricavabile poi con un metodo specifico:

<div class="miaClasse {type:'numeri'}" id="mioId"></div>

var data = $(".miaClasse").metadata();

  //data.type == 'numeri';

Il problema di questo approccio è che, oltre a caricare un nuovo file JavaScript nella pagina, sporca l'HTML con testo non direttamente correlato alla rappresentazione della pagina.

Data Storage

Anche se spesso non c'è alternativa al problema, una soluzione più corretta sarebbe utilizzare il metodo .data():

<div class="miaClasse" id="mioId"></div>
  
//imposto il dato
$(".miaClasse").data("type","numeri");
   
var tipo = $(".miaClasse").data("type");
//tipo == 'numeri';

Da notare che se il dato non è impostato, il metodo restituisce undefined. Inoltre per rimuovere un dato basta passarne il nome al metodo .removeData():

$(".miaClasse").removeData("type");
     
var tipo = $(".miaClasse").data("type");
//tipo == undefined;

Internals

Come alternativa al metodo .data() è possibile utilizzare le funzioni Internals, così chiamate perché utilizzate principalmente all'interno di .data() o più in generale del framework jQuery. Per questo motivo sono utlizzate raramente dagli sviluppatori, se non durante lo sviluppo di plugin ed estensioni del framework stesso.

Queste funzioni si comportano praticamente allo stesso modo dei metodi del Data Storage, ma naturalmente necessitano di un primo argomento che rappresenti un riferimento all'elemento DOM su cui lavorare:

$(".miaClasse").data("type","numeri");

//Equivale a 
$.data( $(".miaClasse").get(0), "type", "numeri");

Da notare che non è possibile passare alla funzione un oggetto jQuery, ma bisogna estrarre un elemento singolo dalla collezione. Questa regola vale anche per le altre funzioni Internals.

Rispetto al Data Storage, sono disponibili inoltre due funzionalità aggiuntive:

• $.data(elemento): restituisce un numero che rappresenta un'ID univoco dell'elemento
• $.removeData(elemento): elimina tutti i dati associati all'elemento (usare $.removeData(elemento,nomedato) per rimuoverne solo uno)

Altri articoli

Altre guide

Altre newsletter