Uso del almacén de datos de jQuery frente a las propiedades de expansión

Question

Estoy desarrollando código usando jQuery y necesito almacenar datos asociados con ciertos elementos DOM. Hay un montón de otras preguntas sobre cómo para almacenar datos arbitrarios con un elemento html, pero estoy más interesado en por qué elegiría una opción sobre la otra.

Digamos, para simplificar el argumento, que quiero almacenar una propiedad "lineNumber" con cada fila en una tabla que sea "interesante".

opción 1 sería simplemente establecer una propiedad expando en cada elemento DOM (espero que estoy usando el término 'Expansión' correctamente):

$('.interesting-line').each(function(i) { this.lineNumber = i; }); 

Opción 2 sería el uso de los datos de jQuery() la función de asociar una propiedad con el elemento:

$('.interesting-line').each(function(i) { $(this).data('lineNumber', i); }); 

Haciendo caso omiso de cualquier otro deficiencias de mi código de ejemplo, ¿existen fuertes razones por las que elegiría un medio de almacenamiento de propiedades sobre el otro?

Answer 1

Si está creando un complemento, debe usar $.data. Si necesita almacenar el atributo con frecuencia y rara vez necesita consultar el DOM para él, entonces use $.data.

Una vez dicho esto para todas mis aplicaciones de cliente que tienden a almacenar atributos personalizados DOM en el elemento DOM a sí mismos para que pueda consultar posteriormente utilizando el atributo [] selector:

var domElement = $('.interesting-line[lineNumber=' + lineNumber + ']').get(0); 

Esto es mucho más legible que iterar el conjunto envuelto llamando al .data() en cada artículo. A menudo estoy interactuando con otra biblioteca de terceros que opera en un elemento DOM, por lo que tener acceso rápido y fácil al elemento DOM a través de este mecanismo mantiene el código legible.

Es tan fácil como almacenar una tabla de búsqueda mapeando lineNumbers a elementos, sin embargo, la técnica de atributo expando corre menos riesgo de perder memoria en comparación, ya que no está almacenando referencias a elementos DOM que necesita limpiar más adelante.

Update 5 años después acaba de leer esto después de que recibió una [merecido] downvote: por favor, ignora el texto tachado anteriormente. jQuery hace no consulta el DOM en función del conjunto de propiedades de expando, y no lo ha hecho por un tiempo. Entonces use $.data. No hay ninguna razón para contaminar el DOM cuando no hay un uso pragmático para hacerlo.

Answer 2

El uso de $.data no modifica el DOM. Debe usar $.data. Si está creando un complemento, debe almacenar un objeto en $.data con propiedades en ese objeto en lugar de almacenar cada una de esas propiedades como pares clave/valor diferentes en la estructura $.data.

Answer 3

El uso de $.data lo protegerá de fugas de memoria.

En IE, cuando asigna un objeto javascript a una propiedad expando en un elemento DOM, los ciclos que cruzan ese enlace no son basura. Si su objeto javascript contiene una referencia al objeto dom, se perderá todo el ciclo. Es completamente posible terminar con referencias ocultas a objetos DOM, debido a cierres, por lo que puede filtrarse sin darse cuenta.

El almacén de datos jQuery está configurado para evitar la formación de estos ciclos. Si lo usa, no perderá memoria de esta manera. Su ejemplo no se filtrará porque está poniendo primitivas (cadenas) en el elemento DOM. Pero si coloca un objeto más complejo allí, corre el riesgo de tener una fuga.

Use $.data para que no tenga que preocuparse.