cuando es aceptable dar salida al código HTML de Javascript?

leí un fragmento de código Javascript, donde el programador añadió algo similar a esto:cuando es aceptable dar salida al código HTML de Javascript?

html = " 
     <div class='hidden-context-menu'> 
      <ul><li><a class='select-all'>All</a></li> 
       <li><a class='select-none'>None</a></li> 
       ... 
       ... 
       ... 
      </ul> 
     </div> 
"

y luego, en algunas otras partes de la aplicación web, esta pieza de código se utiliza y se hace en la página.

output_html(html);

Asumo, teniendo en cuenta este ejemplo específico de un menú de contexto oculto, que tal vez el desarrollador did't quiere repetir el mismo ..

¿Este tipo de práctica alentado o tiene que ser considerada como una enfoque equivocado?

Fuente

2012-03-07 Rdpi

su ejemplo no es MUY diferente que crear instancias y agregar/anteponer elementos a través de objetos js. Supongo que el factor determinante es el volumen de html que contiene la cadena y si esa estructura puede definirse más fácilmente mediante objetos js y algún proceso de bucle o no./2cents editar: mi principal preocupación serían las implicaciones de SEO –

Siempre es aceptable, pero no siempre es la MEJOR manera. –

Diría que es mejor mantener el HTML separado del javascript tanto como sea posible (a veces es difícil cumplir con esta regla). –

Yo diría que confiar en Javascript para generar su HTML es probablemente una mala idea. ¿Qué sucede si el usuario tiene Javascript desactivado en su navegador?

Creo que es más común encontrar HTML generado por una secuencia de comandos del lado del servidor, como PHP. La página resultante que el cliente recibe es la misma que si PHP no se usara, y el desarrollador acaba de escribir el código HTML varias veces.

Fuente

2012-03-07 17:57:31 Travesty3

Para webapps dinámicas, la salida de html está bien. Sin embargo, poner todo en una cadena parece muy contrario a la intuición cuando existen funciones para la creación de elementos. –

Los marcos de generación más reciente, como EXT.JS, representan todo el lado del cliente de la interfaz de usuario mediante JavaScript. –

@JeffreySweeney: Creo que usar la creación de elementos cuando sea necesario está bien, pero no creo que sea una buena idea usarlo cuando se puede obtener exactamente la misma funcionalidad simplemente escribiendo el código HTML. Nuevamente, pregunto ... ¿Qué pasa si el usuario tiene Javascript desactivado en su navegador? Entonces el elemento no se generará, mientras que si lo escribieran, lo hubiera sido. Y la funcionalidad para el cliente sería exactamente la misma. – Travesty3

Dar salida HTML de esta manera puede conducir a muchos dolores de cabeza en el futuro, por la misma razón CSS debe ser externa: más difícil de encontrar, se mezcla con código no relacionado, ya menudo resulta en repeticiones innecesarias.

Si el marco que le piden usar lo requiere, o si un desarrollador anterior acribilló el código con él, realmente no hay mucho que se pueda hacer.

Editar: el siguiente código realizan la misma función, y es más fácil de manipular en el futuro:

var div = document.createElement("div"); 
div.className = "hidden-context-menu"; 

var ul = document.createElement("ul"); 

var li = document.createElement("li"); 
var a = document.createElement("a"); 
a.className = "select-all"; 
li.appendChild(a); 
ul.appendChild(li); 

var li = document.createElement("li"); 
var a = document.createElement("a"); 
a.className = "select-none"; 
li.appendChild(a); 
ul.appendChild(li); 

div.appendChild(ul);

Y, por cierto, como dice el cartel anterior, Javascript no debe ser el único mecanismo para generar HTML; ¡la página HTML debería ser la responsable de eso! Sin embargo, está bien en aplicaciones 'webappy'.

Fuente

2012-03-07 17:58:18

Otro beneficio de este método es que los elementos creados estarán accesibles si necesita atravesar el DOM, y no estarán en el código del OP. – Evert

Qué código absolutamente horrible ... deberían haber usado un mejor nombre de variable que 'html'.

En cuanto a ser el enfoque equivocado, hay problemas en algunos navegadores con modificación directa si se trata de una página XHTML. Si no se genera dinámicamente, a menudo es mejor insertarlo con el resto del HTML y usar CSS para ocultarlo/mostrarlo cuando sea necesario.

Para la funcionalidad de tipo menú desplegable, normalmente lo dejo mostrando con el CSS inicial, pero luego tengo JavaScript hide it en la carga de página - de esta manera, si JS está desactivado, solo tienen menús completamente expandidos, en lugar de ningún acceso al nivel inferior cosas. Si lo haces para que se expanda la sección manu relacionada con la página actual, no tienes que hacer esto, solo significa más clics a medida que van a cada página para llegar al contenido que están buscando.

En su caso, como no hay 'href' para las anclas, supongo que esos elementos solo son funcionales cuando JavaScript está activado, así que realmente no veo ningún problema con que se inserte a través de JS. (y en cuanto a insertar HTML vs. hacerlo por elemento ... si es HTML, y no XHTML, no tengo ningún problema con insertar una cadena, ya que me resulta más fácil de mantener ...y si realmente va a ser en el archivo HTML, digo que hay más razones para mantenerlo como una cadena de HTML)

Fuente

2012-03-07 21:03:16 Joe

cuando es aceptable dar salida al código HTML de Javascript?

Respuesta

Cuestiones relacionadas