O LayTPL é um mecanismo de modelo JavaScript disruptivo. Ele usa métodos inteligentes de implementação para tornar seu próprio tamanho pequeno e requintado. Não apenas tem o desempenho final, mas também tem quase todas as funções de um motor de front-end tradicional. Toda a magia de transformação é criada por menos de 1 KB de código, o que parece uma revolução, ou não, mas não há dúvida de que o LayTPL está realmente apresentando -o ao mundo da maneira mais leve. Se você nunca foi exposto a este aplicativo, isso não importa. A história a seguir fará com que você não possa esperar para escolher o LayTPL e, a partir de então, poderá entender melhor a renderização dos dados da página e atingir o pico da sua vida!
vantagem do LayTPL
• Excelente desempenho, quase 1 vezes mais rápido que o ArtTemplate e o DOT, que são conhecidos como rei do desempenho e 20-40 vezes mais rápido que o Baidutemplate, KissyTemplate, etc. Quanto maior a escala de dados e a frequência de renderização, mais óbvio é.
• O volume é simplesmente pequeno ao extremo, menor que 1 KB, e ficará menor no futuro.
• Possui mecanismos de segurança como Escape e possui funções relativamente científicas de relatórios de erros.
• JavaScript nativo pode ser escrito arbitrariamente no modelo para garantir totalmente a flexibilidade do modelo
• Suporte a aplicativo na plataforma Node.js
• Apoiar todos os navegadores convencionais antigos ou modernos
Como usar
A cópia do código é a seguinte:
// Etapa 1: escreva o modelo. Você pode usar uma tag de script para armazenar modelos, como:
<script id = "Demo" type = "text/html">
<H1> {{d.title}} </h1>
<ul>
{{# for (var i = 0, len = d.List.Length; i <len; i ++) {}}
<li>
<pan> Nome: {{D.List [i] .Name}} </span>
<pan> cidade: {{d.list [i] .city}} </span>
</li>
{{#}}}
</ul>
</script>
// Etapa 2: crie uma visualização. Usado para renderizar resultados de renderização.
<div id = "View"> </div>
// Etapa 3: Renderizando o modelo
var dados = {
Título: 'Cerco de Front-End',
Lista: [{nome: 'xianxin', cidade: 'hangzhou'}, {name: 'xie liang', cidade: 'beijing'}, {name: 'qianqian', cidade: 'hangzhou'}, {name: 'Dem', cidade: 'beijing'}]
};
var getTPL = document.getElementById ('Demo'). Innerhtml;
LayTPL (getTPL) .render (dados, função (html) {
document.getElementById ('View'). Innerhtml = html;
});
Descrição da documentação
1. Sintaxe do modelo
Saia um campo normal sem escapar html: {{d.field}}
Saia um campo normal e escapar html: {{= d.field}}
Script JavaScript: {{# javascript declaration}}
2. Método interno
1): LayTPL (modelo); // Função do núcleo, retorne um objeto
var tpl = LayTPL (modelo);
tpl.render (dados, retorno de chamada); // Método de renderização, Retornos Resultados de renderização, suporta dois modos: assíncrono e síncrono
a): assíncrono
tpl.render (dados, função (resultado) {
console.log (resultado);
});
b): Síncrono
var resultado = tpl.render (dados);
console.log (resultado);
2): Laytpl.config (Opções); // Inicialize a configuração
Opções é um objeto
{aberto: 'Iniciar tag', fechar: 'fechar tag'}
3): Laytpl.v // obtenha o número da versão
Coisas a serem observadas
1. Basta introduzir diretamente o LayTPL.js e você também pode usar diretamente o SeaJS e outras cargas modulares.
2. O LayTPL pode ser usado à vontade, tanto nos negócios quanto nas plataformas pessoais.
3. Certifique -se de manter a fonte em qualquer ocasião e não remova os comentários do cabeçalho do layoutpl.js.
Site oficial: http://sentsin.com/layui/laytpl/
Download: //www.vevb.com/codes/207072.html