¿Cuál es la mejor manera de almacenar valores múltiples para $ .data() de jQuery?

Question

Si almacena varios valores (10+) en una gran cantidad de divs, ¿es más óptimo almacenarlos todos en un solo objeto o como valores separados?

solo objeto:

$("#div_id").data("data", {foo:1, bar:2}); 

Valores separados:

$("#div_id") 
    .data("foo", 1) 
    .data("bar", 2); 

¿Cuáles son las ventajas y desventajas de cada método? Se accederá con frecuencia a algunos de estos atributos (por ejemplo, durante la devolución de llamadas de eventos, como el arrastre).

Answer 1

Si ambos enfoques son tan fáciles de usar en su código, vaya a almacenar un solo objeto. Evita la carga adicional de llamar al método data() cada vez que necesita un valor. De esta forma, puede buscar el objeto de asignación con una llamada al data(), y luego recuperar los valores de este objeto las veces que quiera sin tener que llamar al data() nuevamente.

El método data() utiliza objetos para asignar elementos a claves/valores debajo del capó, por lo que no ofrece mejoras en el rendimiento sobre la gestión de un objeto de mapeo usted mismo.

Answer 2

probablemente haría algo como:

var data = $("#div_id").data(); 
data.foo=1; 
data.bar=2; 

Answer 3

En 1.4 se puede hacer esto:

$('#somediv').data({ one : 1, two : 2, three : 3 }); 

Esta es una gran manera de inicializar el objeto de datos. SIN EMBARGO, en 1.4.2, tenga en cuenta que el uso de este formulario REEMPLAZARÁ CUALQUIER dato existente en este elemento. Por lo tanto, si prueba esto:

$('#somediv').data('one', 1); 

$('#somediv').data({ two : 2, three : 3 }); 

Va a estar volando el valor de 'uno'.

(En lo personal, creo que es una pena ya jQuery ya hace un amplio uso de la fusión de objetos con su .extend $. No es claro por qué no se utilizó aquí.)

ACTUALIZACIÓN (sugerido por el usuario: @ricka, gracias):

1.4.3 y seguir, que combina los datos (http://api.jquery.com/data/#data-obj):

en jQuery 1.4.3 ajuste de los datos de un elemento de objeto con. datos (obj) extiende la d ata previamente almacenado con ese elemento. jQuery en sí usa el método .data() para guardar información bajo los nombres 'events' y 'handle', y también reserva cualquier nombre de datos que comience con un guión bajo ('_') para uso interno.

Antes de jQuery 1.4.3 (a partir de jQuery 1.4) el método .data() sustituido completamente todos los datos, en lugar de extender los datos objeto. Si está utilizando complementos de terceros, puede que no sea aconsejable reemplazar por completo el objeto de datos del elemento, ya que los complementos pueden también han establecido datos.