He estado buscando una respuesta clara para esto (no puedo pensar en un montón de posibilidades, pero me gustaría saber la verdadera razón):¿Qué hay de malo en agregar propiedades a los objetos del elemento DOM?
jQuery proporciona un método .data() para asociar los datos con Objetos del elemento DOM. ¿Qué hace esto necesario? ¿Hay algún problema para agregar propiedades (o métodos) directamente a los objetos del elemento DOM? ¿Qué es?
¿Hay algún problema para agregar propiedades (o métodos) directamente a los objetos del elemento DOM?
Potencialmente.
No hay un estándar web que indique que puede agregar propiedades arbitrarias a los nodos DOM. Son 'objetos host' con implementaciones específicas del navegador, no 'objetos nativos de JavaScript' que de acuerdo con ECMA-262 puede hacer lo que quiera. Otros objetos host no le permitirán agregar propiedades arbitrarias.
En realidad desde los primeros navegadores sí permitió que lo hagas, es una normade facto que se puede de todos modos ... a menos que deliberadamente decir IE para no permitir que mediante el establecimiento de document.expando= false. Probablemente no lo harías tú mismo, pero si estás escribiendo un guión para implementarlo en otra parte, podría interesarte.
Hay un problema práctico con arbitrarias-propiedades en que no realmente saber que el nombre arbitrario que ha elegido no tiene un significado que existe en un navegador que no ha probado todavía, o en una versión futura de un navegador o estándar que aún no existe. Agregue una propiedad , y no puede estar seguro de que ningún navegador en cualquier lugar en el espacio y el tiempo lo utilizará como señal para activar la función emocionante de salchicha DOM Make The Browser Crash. Por lo tanto, si agrega una propiedad arbitraria, asegúrese de darle un nombre poco probable, por ejemplo element._mylibraryname_sausage= true. Esto también ayuda a evitar conflictos de espacio de nombres con otros componentes de script que podrían agregar propiedades arbitrarias.
Hay otro problema en IE en que las propiedades que agrega se tratan incorrectamente como atributos. Si serializa el elemento con innerHTML, obtendrá un atributo inesperado en la salida, por ej. <p _mylibraryname_sausage="true">. Si luego asigna esa cadena HTML a otro elemento, obtendrá una propiedad en el nuevo elemento, lo que podría confundir su secuencia de comandos.
(Tenga en cuenta que esto solo ocurre para las propiedades cuyos valores son tipos simples; Objetos, matrices y funciones no se muestran en HTML serializado).Ojalá jQuery lo supiera, porque la forma en que funciona para implementar el método data es absolutamente terrible, provoca errores y ralentiza muchas operaciones DOM simples.)
Creo que puede agregar todas las propiedades que desee, siempre y cuando solo tenga que usarlas usted mismo y la propiedad no es un método o algún objeto que contenga métodos. Lo que está mal con eso es que los métodos pueden crear pérdidas de memoria en los navegadores. Especialmente cuando usa closures en tales métodos, es posible que el navegador no pueda completar la limpieza de basura, lo que hace que las paces dispersas de la memoria permanezcan ocupadas.
This link lo explica muy bien.
here encontrará una descripción de varios patrones de pérdida de memoria común
Tiene que ver con el hecho de que en el IE DOM no está administrado por JScript, lo que hace que sea entorno completamente diferente de acceder. Esto lleva a las pérdidas de memoria http://www.crockford.com/javascript/memory/leak.html. Otra razón es que, cuando las personas usan innerHTML para copiar nodos, todas esas propiedades añadidas no se transfieren.
+1, aunque me gustaría haber mencionado HTML5 ' data- * 'storage (http://dev.w3.org/html5/spec/Overview.html#attr-data). WRT a jQuery, el almacenamiento de 'datos' se implementa como un atributo expando que almacena 1 valor numérico que se asigna a una clave en' jQuery.cache'. La teoría es que 'jQuery.cache' puede ser recuperado libremente por el navegador al descargar porque no está conectado a ningún elemento DOM, y por el contrario el elemento DOM puede ser recolectado libremente porque no almacena ningún objeto/función autorreferencial. etc. en sí mismo. No veo el problema allí? –
El problema es (1) jQuery tiene que eliminar el atributo 'jQuery (number)' del HTML en cualquier momento que realice una operación en el HTML (como 'html()' o 'clone()'). Hace esto por (uuuurrrrrgghhh) pegando la cuerda a través de una expresión regular. Entonces, si clonas un párrafo que contiene el texto 'jQuery0 =" foo "', el texto desaparecerá. (2) ahora tiene que hacer un seguimiento de los ID, las operaciones DOM que deberían ser rápidas y fáciles no lo son. Por ejemplo, intente 'eliminar()' un elemento y observe cómo jQuery recurre a cada nodo descendiente que busca los identificadores de datos para descartar. Oh querido. – bobince
+1. Gran respuesta como de costumbre. –