2010-06-22 22 views
16

JavaScript le permite agregar propiedades y métodos arbitrarios a cualquier objeto, incluidos los nodos DOM. Suponiendo que la propiedad estaba bien espaciada (algo así como _myLib_propertyName) para que no fuera probable crear un conflicto, ¿hay alguna buena razón para no ocultar datos en los nodos DOM?¿Es una mala práctica agregar propiedades a los nodos DOM?

¿Hay buenos casos de uso para hacerlo?

Imagino que hacer esto con frecuencia podría contribuir a un estilo de codificación descuidado o un código que es confuso o contra-intuitivo, pero parece que también habría momentos en los que insertar propiedades "personalizadas" en los nodos DOM sería eficaz y conveniente técnica.

+4

Al menos Juriy Zaytsev [(kangax)] (http://stackoverflow.com/users/130652/kangax) cree que usted [no debería hacer esto] (http://perfectionkills.com/whats-wrong -with-extend-the-dom /). –

+0

Nota del futuro: ES 5.1 de junio de 2011 tiene ['Object.seal()'] (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/seal) que le impide agregar propiedades a un objeto. – Archimedix

Respuesta

7

Creo que más que nada, la mejor razón para no almacenar datos en el DOM es porque el DOM está destinado a representar la estructura de contenido y el estilo de una página HTML. Si bien seguramente podría agregar datos a los nodos con una buena relación de nombres para evitar conflictos, está introduciendo el estado de los datos en la representación visual.

Estoy tratando de encontrar un ejemplo a favor o en contra de almacenar datos en el DOM, y rascándome la cabeza para encontrar un caso convincente. En el pasado, descubrí que la separación del estado de los datos del estado visual ha ahorrado dolores de cabeza durante los rediseños de los sitios en los que he trabajado.

+3

Hay una publicación aquí en la extensión del DOM: http://perfectionkills.com/whats-wrong-with-extending-the-dom/ – huntaub

+0

¡Gracias por recordarme lo que ya debería haber sabido! ¡Estilo, estructura y comportamiento separados! – jasongetsdown

+0

@huntaub excelente enlace, incluso si la gramática del escritor es un poco extraño. Creo que la sección que mejor responde a mi pregunta sería "Wrappers to the Rescue". No extienda objetos DOM, envuélvalos y agregue sus propiedades personalizadas al contenedor. La extensión de objetos DOM es un clúster de explorador cruzado más grande -f *** de lo que me di cuenta. – jasongetsdown

2

Si observa HTML 5, hay un atributo de datos para campos que le permitirá almacenar información para el campo.

+3

Si bien, esto no incluye todos los tipos de datos de JavaScript. Al agregar un atributo al dom (en lugar de una propiedad), los datos almacenados son una cadena. Cuando se recupera, se convierte en una cadena o un número entero en función de su valor. Este no es un método confiable para iniciar Objetos o Arrays en un elemento DOM. – Swivel

0

No se sorprenda de tener problemas con IE 6 & 7. Son muy inconsistentes con setAttribute vs set como una propiedad.

Y si no tiene cuidado puede establecer referencias circulares y darse una fuga de memoria.

http://www.ibm.com/developerworks/web/library/wa-memleak/

siempre me puse propiedades del nodo, como último recurso, y cuando lo hago soy muy cuidadoso con mi código y probar en mayor medida de lo habitual.

15

No, generalmente es una mala idea para almacenar sus propias propiedades en los nodos DOM.

  • Los nodos DOM son objetos host y los objetos host pueden hacer lo que quieran. Específicamente, no existe un requisito en la especificación de ECMAScript para que los objetos host permitan este tipo de extensión, por lo que los navegadores no están obligados a permitirlo. En particular, los nuevos navegadores pueden elegir no hacerlo, y el código existente que depende de él se romperá.
  • No todos los objetos host en los navegadores existentes lo permiten. Por ejemplo, los nodos de texto y todos los objetos ActiveX (como los objetos XMLHttpRequest y XMLDOM, utilizados para analizar XML) en IE no lo hacen, y el comportamiento de falla varía desde arrojar errores hasta fallas silenciosas.
  • En IE, la capacidad de agregar propiedades se puede desactivar para un documento completo, incluidos todos los nodos dentro del documento, con la línea document.expando = false;. Por lo tanto, si alguno de los códigos de su página incluye esta línea, fallará todo el código que depende de agregar propiedades a los nodos DOM.
Cuestiones relacionadas