Recientemente, mi contenido de trabajo se acerca gradualmente a mi idealización (front-end), ¡así que presto más atención al rendimiento del front-end! ¡Un colega en el fondo introdujo el uso del motor de plantilla Ajax para mejorar la velocidad de renderizado!
Aquí hay algunos motores de plantilla JavaScript
1. Bigote
Un motor de plantilla basado en JavaScript, similar al complemento de plantilla JQuery de Microsoft, ¡pero es más simple y más fácil de usar!
2. Dot.js
Dot.js contiene un motor de plantilla JavaScript para navegadores y nodos.js.
3. JSMART
JSMART es una versión portada de JavaScript de la famosa plantilla PHP Smarty.
4. Dom.js
DOM.JS es un motor de plantilla JavaScript que se puede usar tanto en el cliente como en el lado del servidor.
5. Jade
Jade es un motor de plantilla de alto rendimiento para nodos influenciados por HAML en JavaScript.
6. Hogan.js
JavaScript Plantplate Engine de Twitter.
7. Manillar
Handlebars es una biblioteca de plantilla de página de JavaScript
8. Arttemplate
ArtTemplate es una nueva generación de motor de plantilla JavaScript. Su eficiencia de representación en V8 puede estar cerca del límite de rendimiento de JavaScript. En la prueba de eficiencia de representación bajo Chrome, es 25 y 32 veces que los motores bien conocidos de bigote y micro TMPL respectivamente. El motor admite la depuración. Si se encuentra un error durante la representación, el depurador puede ubicar con precisión la declaración de plantilla que produce una excepción, resolviendo el problema de que las plantillas frontales son difíciles de depurar.
La herramienta única de compilación de plantillas puede compilar plantillas frontales en archivos JS que no se basan en el motor de plantilla para ejecutar, permitiendo que las plantillas frontales rompan las restricciones del navegador y realicen la organización de archivos y directorios de la misma manera que las plantillas de fondo, la carga de la demanda, incluya anidado, etc. ¡Todo esto está hecho en 2KB (GZIP)!
Tal vez pienses que el nombre de este complemento parece familiar, ¡es correcto! Este es también el autor de ArtDialog.
Dirección del blog: http://www.planeart.cn/
Citar motor
La copia del código es la siguiente:
<script src = "js/template.js"> </script>
Escribe una plantilla
La copia del código es la siguiente:
<script id = "test" type = "text/html">
// Use una etiqueta de script con type = "text/html" para almacenar la plantilla:
<h1> <%= título%> </h1>
<ul>
<%
para (i = 0; i <list.length; i ++) {%>
<li> iteml <%= i+1%>: <%= list [i]%> </li>
<%}%>
</ul>
// Los símbolos de definición para el comienzo y el final de la sintaxis lógica de la plantilla son < % y %>. Si <% es seguido por el signo =, el contenido variable se emitirá.
</script>
Plantilla de representación
La copia del código es la siguiente:
var data = {
Título: 'Etiqueta',
Lista: ['Literario', 'Blog', 'Fotografía', 'Película', 'Folk', 'Viajes', 'Guitarra']
};
var html = Template.render ("prueba", datos);
document.getElementById ('contenido'). innerhtml = html;