español ejemplos descargar definicion curso caracteristicas javascript

ejemplos - javascript html



¿Por qué document.write se considera una "mala práctica"? (15)

Algunos de los problemas más serios:

  • document.write (en adelante DW) no funciona en XHTML

  • DW no modifica directamente el DOM, evitando una mayor manipulación (tratando de encontrar evidencia de esto, pero es, en el mejor de los casos, una situación)

  • DW ejecutado después de que la página haya terminado de cargarse sobrescribirá la página, o escribirá una nueva página o no funcionará

  • DW se ejecuta donde se encuentra: no se puede inyectar en un punto de nodo determinado

  • DW está efectivamente escribiendo texto serializado que no es la forma en que el DOM funciona conceptualmente, y es una forma fácil de crear errores (.innerHTML tiene el mismo problema)

Mucho mejor utilizar los métodos de manipulación DOM seguros y amigables

Sé que document.write se considera una mala práctica; y espero compilar una lista de razones para enviar a un proveedor tercero por qué no deberían usar document.write en implementaciones de su código de análisis.

Incluya su razón para reclamar document.write como una mala práctica a continuación.

Aquí está mi valor de dos peniques, en general no deberías usar document.write para levantar objetos pesados, pero hay una instancia en la que es definitivamente útil:

http://www.quirksmode.org/blog/archives/2005/06/three_javascrip_1.html

Descubrí esto recientemente intentando crear una galería de control deslizante AJAX. Creé dos divs anidados, y apliqué width / height y overflow: hidden al <div> externo con JS. Esto fue así, en el caso de que el navegador tuviera JS deshabilitado, el div flotaría para acomodar las imágenes en la galería, una buena degradación elegante.

La cosa es que, como en el artículo anterior, este secuestro JS de CSS no se activó hasta que la página se cargó, lo que causó un destello momentáneo cuando se cargó el div. Así que necesitaba escribir una regla CSS, o incluir una hoja, como la página cargada.

Obviamente, esto no funcionará en XHTML, pero como XHTML parece ser algo así como un pato muerto (y se presenta como sopa de etiquetas en IE), podría valer la pena volver a evaluar su elección de DOCTYPE ...

Creo que el mayor problema es que cualquier elemento escrito a través de document.write se agrega al final de los elementos de la página. Ese es raramente el efecto deseado con diseños de página modernos y AJAX. (hay que tener en cuenta que los elementos en el DOM son temporales, y cuando la secuencia de comandos se ejecuta puede afectar su comportamiento).

Es mucho mejor establecer un elemento de marcador de posición en la página y luego manipularlo es innerHTML.

En realidad, no hay nada malo con document.write , per se. El problema es que es muy fácil usarlo mal. En general, incluso.

En términos de proveedores que suministran código analítico (como Google Analytics), en realidad es la forma más fácil para que distribuyan dichos fragmentos de código.

  1. Mantiene los guiones pequeños.
  2. No tienen que preocuparse por anular eventos onload ya establecidos o incluir la abstracción necesaria para agregar eventos onload de forma segura
  3. Es extremadamente compatible

Siempre y cuando no intentes usarlo después de que se haya cargado el document.write , document.write no es intrínsecamente malo, en mi humilde opinión.

La parte superior de mi cabeza:

  1. document.write debe usar document.write en la carga de la página o la carga del cuerpo. Por lo tanto, si desea usar el script en cualquier otro momento para actualizar el contenido de su página, document.write es bastante inútil.

  2. Técnicamente, document.write solo actualizará páginas HTML, no XHTML / XML. IE parece ser bastante indulgente con este hecho, pero otros navegadores no lo serán.

http://www.w3.org/MarkUp/2004/xhtml-faq#docwrite

Las desventajas de document.write dependen principalmente de estos 3 factores:

a) Implementación

El document.write () se utiliza principalmente para escribir contenido en la pantalla tan pronto como se necesita ese contenido. Esto significa que ocurre en cualquier lugar, ya sea en un archivo JavaScript o dentro de una etiqueta de script dentro de un archivo HTML. Dado que la etiqueta de secuencia de comandos se coloca en cualquier lugar dentro de un archivo HTML de este tipo, es una mala idea tener declaraciones document.write () dentro de los bloques de secuencia de comandos que se entrelazan con HTML dentro de una página web.

b) Rendering

El código bien diseñado en general tomará cualquier contenido generado dinámicamente, lo almacenará en la memoria, continuará manipulándolo mientras pasa a través del código antes de que finalmente salga a la pantalla. Por lo tanto, para reiterar el último punto de la sección anterior, la representación del contenido en el lugar puede ser más rápida que la de otro contenido en el que se puede confiar, pero puede que no esté disponible para el otro código que, a su vez, requiere que el contenido sea procesado. Para resolver este dilema, necesitamos deshacernos de document.write () e implementarlo de la manera correcta.

c) Manipulación imposible.

Una vez que está escrito se hace y se termina. No podemos volver a manipularlo sin tocar el DOM.

Otro uso legítimo de document.write proviene del ejemplo de HTML5 Boilerplate index.html .

<!-- Grab Google CDN''s jQuery, with a protocol relative URL; fall back to local if offline --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script> <script>window.jQuery || document.write(''<script src="js/libs/jquery-1.6.3.min.js"><//script>'')</script>

También he visto la misma técnica para usar el json2.js JSON parse / stringify polyfill ( requerido por IE7 y más abajo ).

<script>window.JSON || document.write(''<script src="json2.js"><//script>'')</script>

Rompe las páginas utilizando la representación XML (como las páginas XHTML).

Lo mejor : algunos navegadores vuelven a la representación HTML y todo funciona bien.

Probable : algunos navegadores deshabilitan la función document.write () en el modo de representación XML.

Lo peor : algunos navegadores emitirán un error XML cada vez que usen la función document.write ().

Sobrescribe el contenido de la página, que es la razón más obvia, pero no lo llamaría "malo".

Simplemente no tiene mucho uso a menos que esté creando un documento completo con JavaScript, en cuyo caso puede comenzar con document.write.

Aun así, no estás realmente aprovechando el DOM cuando usas document.write; simplemente estás volcando un blob de texto en el documento, así que diría que es de mala forma.

Uno puede pensar en document.write () (y .innerHTML) como evaluar una cadena de código fuente. Esto puede ser muy útil para muchas aplicaciones. Por ejemplo, si obtiene el código HTML como una cadena de alguna fuente, es útil simplemente "evaluarlo".

En el contexto de Lisp, la manipulación de DOM sería como manipular una estructura de lista, por ejemplo, crear la lista (naranja) haciendo:

(cons ''orange ''())

Y document.write () sería como evaluar una cadena, por ejemplo, crear una lista mediante la evaluación de una cadena de código fuente como esta:

(eval-string "(cons ''orange ''())")

Lisp también tiene la capacidad muy útil de crear código utilizando la manipulación de listas (como usar el "estilo DOM" para crear un árbol de análisis JS). Esto significa que puede crear una estructura de lista utilizando el "estilo DOM", en lugar del "estilo de cadena", y luego ejecutar ese código, por ejemplo, de esta forma:

(eval ''(cons ''orange ''()))

Si implementa herramientas de codificación, como simples editores en vivo, es muy útil tener la capacidad de evaluar rápidamente una cadena, por ejemplo, utilizando document.write () o .innerHTML. Lisp es ideal en este sentido, pero también puedes hacer cosas geniales en JS, y muchas personas lo hacen, como http://jsbin.com/

Pro:

  • Es la forma más fácil de incrustar contenido en línea desde un script externo (a su host / dominio).
  • Puede sobrescribir todo el contenido en un marco / iframe. Solía ​​usar mucho esta técnica para las piezas del menú / navegación antes de que las técnicas Ajax más modernas estuvieran ampliamente disponibles (1998-2002).

Estafa:

  • Se serializa el motor de renderización para pausar hasta que se cargue dicho script externo, lo que podría llevar mucho más tiempo que un script interno.
  • Generalmente se usa de tal manera que el script se coloca dentro del contenido, lo que se considera de mala forma.

Puede bloquear tu pagina

document.write solo funciona mientras se carga la página; Si lo llama después de que la página haya terminado de cargarse, se sobrescribirá toda la página.

Esto efectivamente significa que debe llamarlo desde un bloque de secuencia de comandos en línea, y eso evitará que el navegador procese partes de la página que sigue. Los scripts y las imágenes no se descargarán hasta que el bloque de escritura haya finalizado.

  • Una razón simple por la que document.write es una mala práctica es que no puede encontrar un escenario en el que no pueda encontrar una mejor alternativa.
  • Otra razón es que estás tratando con cadenas en lugar de objetos (es muy primitivo).
  • Sólo se adjunta a los documentos.
  • No tiene nada de la belleza de, por ejemplo, el patrón MVC (Modelo-Vista-Controlador) .
  • Es mucho más poderoso presentar contenido dinámico con ajax+jQuery o angularJS .