LayTPL es un motor de plantilla JavaScript disruptivo. Utiliza métodos de implementación inteligentes para hacer que su propio tamaño sea pequeño y exquisito. No solo tiene el rendimiento final, sino que también tiene casi todas las funciones de un motor frontal tradicional. Toda la magia de transformación es creada por menos de 1 kb de código, lo que parece una revolución, o no, pero no hay duda de que Laytpl lo está presentando al mundo de la manera más ligera. Si nunca ha estado expuesto a esta aplicación, no importa. La siguiente historia te hará no poder esperar para elegir LayTPL, y a partir de entonces, ¡puedes comprender mejor la representación de datos de la página y alcanzar el pico de tu vida!
ventaja de laytpl
• Excelente rendimiento, casi 1 veces más rápido que Arttemplate y Dot, que se conocen como el Rey de la Performance, y 20-40 veces más rápido que Baidutemplate, Kissytemplate, etc. Cuanto mayor es la escala de datos y la frecuencia de representación, más obvio es.
• El volumen es simplemente pequeño hasta el extremo, menos de 1 kb, y se volverá más pequeño en el futuro.
• Tiene mecanismos de seguridad como el escape y tiene funciones de informes de errores relativamente científicos.
• JavaScript nativo se puede escribir arbitrariamente en la plantilla para garantizar completamente la flexibilidad de la plantilla
• Soporte de la aplicación en la plataforma Node.js
• Apoyar todos los navegadores convencionales antiguos o modernos
Cómo usar
La copia del código es la siguiente:
// Paso 1: Escribe la plantilla. Puede usar una etiqueta de script para almacenar plantillas, como:
<script id = "demo" type = "text/html">
<h1> {{d.title}} </h1>
<ul>
{{# for (var i = 0, len = d.list.length; i <len; i ++) {}}
<li>
<span> nombre: {{d.list [i] .name}} </span>
<span> City: {{d.list [i] .city}} </span>
</li>
{{#}}}
</ul>
</script>
// Paso 2: crea una vista. Se utiliza para representar resultados.
<div id = "ver"> </div>
// Paso 3: Renderizar la plantilla
var data = {
Título: 'Siege front-end',
Lista: [{nombre: 'xianxin', ciudad: 'hangzhou'}, {nombre: 'xie liang', ciudad: 'beijing'}, {nombre: 'qianqian', ciudad: 'hangzhou'}, {nombre: 'dem', ciudad: 'beijing'}]
};
var gettpl = document.getElementById ('demo'). innerhtml;
LayTPL (getTPL) .render (datos, función (html) {
document.getElementById ('ver'). innerhtml = html;
});
Descripción de la documentación
1. Sintaxis de plantilla
Emitir un campo normal sin escapar de html: {{d.field}}
Emitir un campo normal y escapar html: {{= d.field}}
Script JavaScript: {{# JavaScript Declaración}}
2. Método incorporado
1): Laytpl (plantilla); // función central, devuelve un objeto
var tpl = Laytpl (plantilla);
tpl.render (datos, devolución de llamada); // Método de representación, devuelve los resultados de renderizado, admite dos modos: asíncrono y sincrónico
a): asíncrono
tpl.render (datos, función (resultado) {
console.log (resultado);
});
b): sincrónico
resultado var = tpl.render (datos);
console.log (resultado);
2): Laytpl.Config (Opciones); // Inicializar la configuración
Opciones es un objeto
{Open: 'Start Tag', Close: 'Close Tag'}
3): Laytpl.v // Obtener el número de versión
Cosas a tener en cuenta
1. Simplemente introduzca directamente laytpl.js, y también puede usar SEAJS y otra carga modular directamente.
2. Laytpl se puede usar a voluntad, tanto en negocios como en plataformas personales.
3. Asegúrese de mantener la fuente en cualquier ocasión y no elimine los comentarios del encabezado Layoutpl.js.
Sitio web oficial: http://sentsin.com/layui/laytpl/
Descargar: //www.vevb.com/codes/207072.html