jquery - attribute - title html css

¿Mejores prácticas para almacenar plantillas HTML en una página?

Question

Estoy desarrollando una interfaz de JavaScript bastante pesada para un sitio que estoy construyendo, y he decidido usar el complemento de plantillas jQuery (recientemente creado oficialmente) para generar mis elementos de mis consultas a una API JSON. Ahora, el problema que estoy teniendo actualmente es:

Soy propenso a tener un montón de estas plantillas alrededor. Uno para cada tipo de objeto, algunos para listas, algunos para secciones de la página, etc. ¿Hay alguna forma preferida de almacenar estas plantillas? He leído acerca de cómo definir una etiqueta <script> con un id usando el nombre de la plantilla y luego recuperar el texto desde allí (como describe John Resig en " Micro-Templating de JavaScript "), pero con un montón de esas etiquetas <script> en cada página se ve un poco hackish.

Entonces, la pregunta es: ¿hay alguna "mejor práctica" para este tipo de escenario?

Answer 1

¿Por qué no cargar las plantillas en un elemento oculto y luego usar $(template).clone() ? Eso ahorra muchos dolores de cabeza que escapan. No puedo hablar del rendimiento en .clone() frente al enfoque <script> , pero puedo decirle que las etiquetas de script adicionales son una penalización de rendimiento y, en general, hacen que el código sea confuso.

¿Por qué?

• A pesar de que tiene una utilidad de escape elegante, se seguirán cometiendo errores, y serán mucho más difíciles de leer. Además, si tiene que trabajar en una situación de equipo, especialmente si la gente se da la vuelta o sale del proyecto, puede que no sea fácil de entender.

• podría crear un objeto puntero, digamos, templates = {} , y cargarlo con punteros de objetos jQuery a sus elementos clonables así:

   templates = {};
   templates.message = $("#templates .message");
   templates.dialog = $("#templates .dialog");

Ahora todo lo que tienes que hacer para crear una nueva plantilla es:

var newDialog = templates.dialog.clone();

Podría hacer una función de envoltorio para aceptar parámetros, y luego agregarlos con newDialog.find("title").html(title), newDialog.find("message").html(message), etc.

Nuevamente, desde una perspectiva de rendimiento, no sé cuál es más rápido, ya que no tengo tiempo para probar en este momento. Pero sé que el uso de métodos autorizados es generalmente mejor cuando se trabaja en una base de código lo suficientemente grande como para requerir plantillas ... es inevitable que otras personas se involucren con el tiempo, y cuanto más tenga que estar presente para explicar las cosas, menos tiempo tendrá. para hacer su propia codificación badass.

Otro aspecto importante del rendimiento es el tiempo ... si experimenta retrasos en el rendimiento, debe asegurarse de dividir sus trozos de código ejecutable largo utilizando setTimeout. Crea una nueva pila y le permite al navegador pintar lo que ya se procesó hasta el momento justo antes de crear la nueva pila. Esto ayuda enormemente cuando se trata de retrasos visuales como parte de un problema de rendimiento (normalmente el problema de rendimiento más común observado, especialmente por los no codificadores). Si desea más información al respecto, envíeme un mensaje y reuniré algunos recursos. Tiempo limitado en este momento, apagando incendios en el trabajo. :)

Answer 2

En asp.net mvc a menudo empaco mis plantillas comunes en una vista parcial que puedo incluir donde las necesito. De esa manera no necesito repetir mis plantillas por todas partes.

Otro enfoque es tener sus plantillas en archivos separados. Como newslist.tmpl.html que le permite cargar la plantilla con ajax. Teniendo en cuenta que esto se puede hacer en paralelo con la carga de datos, no debería ralentizar su aplicación, ya que lo más probable es que sea más rápido que la llamada de datos de todos modos.

Answer 3

He probado muchas técnicas diferentes para esto durante el año pasado, y estoy de acuerdo en que el truco del script parece un poco mal, pero creo que es lo mejor que tenemos.

Cualquier plantilla que deba estar presente cuando la página se cargue debe formar parte del DOM, punto. Cualquier intento de almacenarlos en otro lugar y cargarlos crea un retraso notable.

He escrito algunos ayudantes de plantillas que me permiten insertar las plantillas necesarias en la página, y aún así es posible cargarlas a través de AJAX cuando sea necesario. Cargo todas las plantillas en la página en una variable en la carga de la página, lo que hace que sea un poco más fácil de referencia.

Ciertamente me gustaría escuchar cómo otros han abordado este problema.

Answer 4

Recientemente hice este ejercicio y, aunque el enfoque de la etiqueta <script> parece un poco pirateado, acepté esta solución como buena y opté por mi propia versión (la versión de John Resigs es obviamente muy buena, pero decidí utilizar mi propia versión fácilmente versión propia del cerebro)

Mi versión es una plantilla básica y se reemplaza usando valores reemplazables en el form ##VALUE##

PLANTILLA: (plantilla de elemento único o plantilla de fila)

<script type="text/html" id="ItemTemplate">
<table>
  <tr>
    <td>##LABEL1##</td>
    <td>##VALUE1##</td>
  <tr>
</table>
</script>

FUNCIÓN DE CONSTRUCCIÓN DE CONTENIDOS:

function constructFromTemplate(content, values, appendTo) {
    var modifiedHtml = content;
    modifiedHtml = modifiedHtml.replace(new RegExp(''__'', ''g''), ''##'');

    $.each(values, function (n, v) {
        modifiedHtml = modifiedHtml.replace(new RegExp(''##'' + n + ''##'', ''g''), v);
    });

    if (appendTo != null) 
    {
        $(appendTo).append(modifiedHtml);
        //initializePageElements();
    }

    return modifiedHtml;
}

USO

El contenido se devolverá desde la función y / o puede configurar el parámetro appendTo para que el ID de elementID append automáticamente el contenido. (establecer null para no append )

Los valores reemplazables se agregan simplemente como un objeto dinámico donde los nombres de los object son los elementos reemplazables.

var theContent = constructFromTemplate(ItemTemplate, { LABEL1: ''The Label 1 content'', LABEL2: ''The Label 2 content'' }, null);

nota: He comentado //initializePageElements(); , esto se usa para inicializar complementos de jQuery , estilos en la plantilla.

Solo los estilos en línea parecen funcionar cuando se inserta el contenido en el DOM

Answer 5

Utilicé script con éxito con mi framework jquery plantillas html puras

Con respecto a las mejores prácticas, eche un vistazo a la nueva interfaz de twitter, use una página para todo y enrutamiento interno solo a través de "#! / Paths".

Usar las costuras de sitios web de una sola página para ser el próximo gran paso para las aplicaciones web, personalmente me gusta llamarlo web 3.0 :) También eliminará el problema de tener todas las mismas plantillas en cada página; solo tendrá una página.

Answer 6

mira https://github.com/inspiraller/STQuery

STQuery usa todos los mismos nombres de métodos que jquery, pero en lugar de manipular elementos en el dom, funciona directamente en la cadena:

var strTemplate = ''<div id="splog"><h1>lorem ipsum</h1><div class="content">lorem ipsum</div></div>'';

var ST = STQuery(strTemplate);

ST.find(''h1'').html(''Hello'');
ST.find(''.content'').html(''World!'');

var strTemplateUpdated = ST.html();

Esto mantiene la lógica separada de la plantilla, es decir, las plantillas html discretas.

Las ventajas sobre jQuery es que STQuery no tiene que escribir primero al DOM, lo que significa que puede usar trabajadores web o hacer toda la manipulación de su plantilla en el servidor. Nota: a partir de este mensaje, stquery solo se ha escrito en javascript, por lo que tendría que convertirse al idioma del lado del servidor de su elección.