2012-11-08 16 views
6

Sto tentando di associare alcuni dati "privati" con elementi DOM. Piuttosto che aggiungere tali dati all'elemento DOM stesso (vorrei evitare di cambiare l'elemento DOM), ho un oggetto dati separato che voglio usare come mappa.Utilizzo di elementi DOM come chiavi per la mappa javascript

Piuttosto che:

document.GetElementById('someElementId').privateData = {}; 

voglio fare

internalPrivateDataMap[document.GetElementById('someElementId')].privateData = {}; 

Non tutti gli elementi hanno un campo id, e alcuni vengono creati dinamicamente, quindi non posso usare l'id come chiave.

Questo funziona bene per la maggior parte degli elementi, ma per gli elementi "a", la chiave utilizzata sembra essere l'href dell'elemento, penso perché il DOM definisce una funzione toString() per un elemento.

Il risultato è che se ho due elementi "a" con lo stesso href, condividono privateData, che non desidero.

La mia soluzione attuale è quella di generare un ID univoco interno che posso usare come chiave, ma che richiede di modificare l'elemento DOM, che sto cercando di evitare.

+0

Qual è la tua domanda? – Madbreaks

+1

* "Funziona bene per la maggior parte degli elementi" * Funziona? Penserei che otterresti una chiave generica '[oggetto HTMLDivElement]' in questo modo. ... ma sì, un'ancora darà il suo 'href' come valore' .toString() '. –

+2

È necessario attendere * ES.Next *. * WeakMaps * lo permetterà. – jAndy

risposta

7

Come notato, questo non funziona in modo affidabile e non conosco alcun modo per farlo funzionare senza assegnare a ogni elemento un ID (generato) o almeno assegnare un ID univoco a un nuovo campo di elementi personalizzato; I nodi DOM semplicemente non hanno le proprietà necessarie per funzionare come chiavi in ​​una mappa.

Così realmente hanno lasciato queste soluzioni:

  • Assegnare ad ogni elemento di un ID generato meno che non abbia già uno
  • Assegnare un ID univoco a un nuovo campo privato. In questo modo, puoi mantenere l'impatto della memoria per nodo DOM piccolo e mantenere i tuoi dati personali in un altro posto. Non dimenticare che è necessario pulire i dati privati ​​in qualche modo quando gli elementi DOM vengono cancellati.
  • Usa qualcosa come jQuery che ha element.data() per leggere e inserire i dati privati ​​in un elemento DOM
  • Utilizzare la propria element.privateData = {}; Nota che hai ancora bisogno di pulizia per i gestori di eventi che mantengono riferimenti all'elemento o avrete perdite di memoria inaspettati.
+0

+1. Ovviamente, # 3 (jQuery) in realtà fa # 2 (un ID privato) dietro le quinte ... – lonesomeday

+0

Supponendo che ogni elemento non possa avere un ID, utilizzerei solo l'ultimo. Di gran lunga il più semplice. –

+1

@ user1689607: ciò può causare problemi come perdite di memoria. Inoltre, non puoi avere due valori per la stessa chiave, cioè se hai due framework che cercano di salvare valori privati, potrebbero interferire tra loro. –

Problemi correlati