Coloque las plantillas de JavaScript del lado del cliente en HTML o JavaScript?

Question

¿Deben las plantillas del lado del cliente como la siguiente (utilizando motor de plantillas de subrayado):

<p class="foo"><%= bar %></p> 

ser colocados en un archivo HTML independiente, o presentar una JavaScript separada? Sé que podría funcionar en ambos sentidos.

Por ejemplo, un archivo JavaScript simplemente podría contener una lista de variables de cadena, así:

var cute = '<p class="the"><%= unicorn %></p>'; 
var fb = '<p class="new-design"><%= sucks %></p>'; 

Pero también he visto lo siguiente:

<script type="text/template" id="omg-template"> 
    <span id="swag-name"><%= name %></span> 
</script> 

Sólo a partir de una separación de las preocupaciones punto de vista , ¿a dónde pertenece el almacenamiento de la plantilla?

Answer 1

Normalmente utilizaré un sistema de gestión de activos que concatenará y miniatizará javascripts y css, y traducirá los archivos de plantilla del lado del cliente en cadenas JS que cuelgan de una var global. Este tipo de cosas depende de su plataforma, pero en el mundo de rieles que desea ver en jammit o sprockets (que ahora es parte de rieles)

Si no tengo una buena gestión de activos, generalmente terminaré usando el método de etiqueta de script, con las plantillas divididas en parciales en el servidor, e incluidas en la parte inferior de la página. Es un poco doloroso trabajar con él, pero IMO algo más que tus simples ejemplos de plantillas de cadenas realmente no deberían existir en línea en tu archivo javascript.

Answer 2

prefiero la segunda opción en gran medida, por las siguientes razones:

• El uso de cuerdas significa tratar con escapan cotizaciones y similares.
• Las plantillas de varias líneas son un problema en Javascript, ya que no puede tener cadenas de varias líneas sin concatenación. Las plantillas de cualquier longitud serán más legibles en múltiples líneas.
• Sin resaltado de sintaxis en cadenas JS.

Pero usar la segunda opción requiere cargar su archivo de plantilla de alguna manera, o incluirlo en su HTML, o pegarlo en su HTML en tiempo de compilación. Además, hay más sobrecarga de datos debido a la etiqueta script, Y debe obtener la cadena del DOM usando el .html() de jQuery o un método similar. Por lo que respecta al rendimiento, la opción de cadena podría ser mejor, por lo que la sugerencia de @ Matt de ponerlo en cadenas en el momento de la compilación es probablemente la mejor.

Answer 3

Puede usar jQuery's templating engine y cargar todas sus plantillas en un archivo js externo.

Answer 4

Si está utilizando un motor de plantillas del lado del cliente sin lógica como Transparency, las plantillas se pueden incrustar en el HTML principal porque las propias plantillas son HTML válidas.

Ejemplo:

<!-- Template --> 
<div id="template"> 
    <span class="greeting"></span> 
    <span class="name"></span> 
</div> 


// Data 
var hello = { 
    greeting: 'Hello', 
    name:  'world!' 
}; 

<!-- Result --> 
<div id="template"> 
    <span class="greeting">Hello</span> 
    <span class="name">world!</span> 
</div> 

Para las plantillas a utilizar en widget de la misma manera un <div> contenedor oculto hace bien.

Poner HTML'ish code en Javascript codeblocks y Javascript strings es feo y debe evitarse si es posible. No es sintaxis resaltable y se pierden errores fácilmente.