¿Técnicas para evitar construir cadenas HTML en JavaScript?

Question

Es muy a menudo me encuentro con una situación en la que quiero modificar, o incluso insertar bloques enteros de HTML en una página usando JavaScript. Por lo general, también implica cambiar varias partes del HTML dinámicamente dependiendo de ciertos parámetros.

Sin embargo, puede generar código desordenado/ilegible, y simplemente no parece correcto tener estos pequeños fragmentos de HTML en mi código JavaScript, maldita sea.

¿Cuáles son algunas de sus técnicas para evitar mezclar HTML y JavaScript?

Answer 1

No estoy seguro si califica como una "técnica", pero generalmente tiendo a evitar la construcción de bloques de HTML en JavaScript simplemente cargando los bloques relevantes desde el back-end a través de AJAX y usando JavaScript para intercambiarlos y fuera/colocarlos según sea necesario. (es decir: ninguno de los cambios de texto de bajo nivel se realiza en JavaScript, solo la manipulación del DOM.)

Si bien, por supuesto, debe tenerlo en cuenta durante el diseño de la arquitectura back-end, no puedo ayudar pero creo que conduce a una configuración mucho más limpia.

Answer 2

Hay muchas técnicas posibles. Quizás el más obvio es tener todos los elementos en la página pero tenerlos hidden - entonces su JS simplemente puede mostrarlos/mostrarlos según sea necesario. Esto puede no ser posible aunque para ciertas situaciones. ¿Qué sucede si necesita agregar un número (no especificado) de elementos duplicados (o grupos de elementos)? Entonces quizás tenga los elementos en la pregunta hidden y usando algo así como la función jQuery's clone, insértelos según sea necesario en el DOM.

Alternativamente, si realmente tiene que compilar HTML sobre la marcha, entonces definitivamente haga su propia clase para manejarlo, para que no tenga fragmentos dispersos por su código. Puede emplear jQuery literal creators para ayudar a hacer esto.

Answer 3

Dojo toolkit tiene un sistema bastante útil para tratar con fragmentos/plantillas de HTML. Digamos que el fragmento de código HTML mycode/mysnippet.tpl.html es algo como lo siguiente

<div> 
    <span dojoAttachPoint="foo"></span> 
</div> 

Aviso el atributo dojoAttachPoint. A continuación, puede hacer que un widget mycode/mysnippet.js usando el fragmento de HTML como su plantilla:

dojo.declare("mycode.mysnippet", [dijit._Widget, dijit._Templated], { 
    templateString: dojo.cache("mycode", "mysnippet.tpl.html"), 

    construct: function(bar){ 
    this.bar = bar; 
    }, 
    buildRendering: function() { 
    this.inherited(arguments); 
    this.foo.innerHTML = this.bar; 
    } 
}); 

Los elementos HTML dados adjuntar atributos de punto se convertirán en miembros de la clase en el código del widget. A continuación, puede utilizar el widget de plantilla de este modo:

new mycode.mysnippet("A cup of tea would restore my normality.").placeAt(someOtherDomElement); 

Una característica interesante es que si se utiliza dojo.cache y sistema de construcción de Dojo, se insertará el texto de la plantilla HTML en el código Javascript, por lo que el cliente no lo hace tiene que hacer una solicitud por separado.

Esto, por supuesto, puede ser demasiado hinchado para su caso de uso, pero me parece bastante útil, y ya que pidió las técnicas, está la mía. Sitepoint tiene un nice article también.

Answer 4

Algunas veces utilizo un método personalizado para devolver una estructura de nodo basada en los argumentos de JSON proporcionados, y agrego ese valor de retorno al DOM según sea necesario. No es accesible una vez que JS no está disponible, como podrían ser algunas soluciones de back-end.

Answer 5

Después de leer algunas de las respuestas logré encontrar mi propia solución usando Python/Django y jQuery.

que tienen el fragmento de HTML como una plantilla de Django:

<div class="marker_info"> 
    <p> _info_ </p> 
    <a href="{% url index %}"> more info... </a> 
</div> 

En la vista, yo uso el método de Django render_to_string para cargar las plantillas como cadenas almacenadas en un diccionario:

snippets = { 'marker_info': render_to_string('templates/marker_info_snippet.html')} 

El Buena parte de esto es que todavía puedo usar las etiquetas de plantilla, por ejemplo, la función url. Yo uso simplejson para volcarlo como JSON y pasarlo a la plantilla completa. Todavía quería reemplazar dinámicamente cadenas en el código JavaScript, así que escribí una función para reemplazar palabras rodeadas por guiones con mis propias variables:

function render_snippet(snippet, dict) { 

    for (var key in dict) 
    { 
     var regex = new RegExp('_' + key + '_', 'gi'); 
     snippet = snippet.replace(regex, dict[key]); 
    } 

    return snippet; 
}