Recentemente, meu conteúdo de trabalho está se aproximando gradualmente da minha idealização (front-end da Web), por isso presto mais atenção ao desempenho do front-end! Um colega em segundo plano introduziu o uso do mecanismo de modelo Ajax para melhorar a velocidade de renderização!
Aqui estão alguns motores de modelo JavaScript
1. Bigode
Um mecanismo de modelo baseado no JavaScript, semelhante ao plug -in JQuery Modelo da Microsoft, mas é mais simples e fácil de usar!
2. Dot.js
Dot.js contém um mecanismo de modelo JavaScript para navegadores e node.js.
3. JSmart
O JSMART é uma versão portada do JavaScript do famoso modelo PHP MOTEM Smarty.
4. Dom.js
Dom.js é um mecanismo de modelo JavaScript que pode ser usado no cliente e no lado do servidor.
5. Jade
Jade é um mecanismo de modelo de alto desempenho para nós influenciados pela HAML em JavaScript.
6. hogan.js
Javascript Model Engine do Twitter.
7. Guidão
Handlebars é uma biblioteca de modelo de página JavaScript
8. ArtTemplate
O ArtTemplate é uma nova geração de mecanismo de modelo JavaScript. Sua eficiência de renderização no V8 pode estar próxima do limite de desempenho do JavaScript. No teste de eficiência de renderização no Chrome, é 25 e 32 vezes o de motores conhecidos bigode e micro TMPL, respectivamente. O motor suporta a depuração. Se um erro for encontrado durante a renderização, o depurador poderá localizar com precisão a declaração de modelo que produz uma exceção, resolvendo o problema de que os modelos de front-end são difíceis de depurar.
A ferramenta de compilação de modelo exclusiva pode compilar modelos de front-end em arquivos JS que não dependem do mecanismo de modelo para executar, permitindo que os modelos de front-end rompem as restrições do navegador e realizem a organização de arquivos e diretórios da mesma maneira que modelos de back-end, carregamento sob demanda, incluem ninhos etc. Tudo isso é feito em 2KB (Gz)!
Talvez você pense que o nome deste plugin parece familiar, isso mesmo! Este também é o autor de Artdialog.
Endereço do blog: http://www.planeart.cn/
Mecanismo de cotação
A cópia do código é a seguinte:
<script src = "js/template.js"> </script>
Escreva um modelo
A cópia do código é a seguinte:
<script id = "test" type = "text/html">
// Use uma tag de script com tipo = "text/html" para armazenar o modelo:
<H1> <%= title%> </h1>
<ul>
<%
for (i = 0; i <list.length; i ++) {%>
<li> iteml <%= i+1%>: <%= list [i]%> </li>
<%}%>
</ul>
// Os símbolos de definição para o início e o final da sintaxe da lógica do modelo são < % e %>. Se <% for seguido pelo signo = o conteúdo variável será emitido.
</script>
Modelo de renderização
A cópia do código é a seguinte:
var dados = {
Título: 'Tag',
Lista: ['literário', 'blog', 'fotografia', 'filme', 'folk', 'viagem', 'guitarra']
};
var html = template.render ("teste", dados);
document.getElementById ('content'). innerhtml = html;