Com o desenvolvimento da Web, os aplicativos front-end se tornaram cada vez mais complexos, e o JavaScript baseado em back-end (Node.JS) também começou a surgir. Neste momento, o JavaScript foi colocado com maiores expectativas. Ao mesmo tempo, as idéias de JavaScript MVC também se tornaram populares. Como a parte mais importante da separação de dados e interfaces, o mecanismo de modelo JavaScript atraiu cada vez mais atenção dos desenvolvedores. No ano passado, floresceu na comunidade de código aberto. Eles podem ser vistos em sites grandes, como Twitter, Taobao, Sina Weibo, Tencent QQ Space e Tencent Weibo.
Este artigo usará o código de exemplo mais simples para descrever os princípios do mecanismo de modelo JavaScript existente, incluindo os princípios de implementação das características da nova geração do modelo Javascript Model Engine ArtTemplate. Bem -vindo para discuti -los juntos.
Introdução ArtTemplate
O ArtTemplate é uma nova geração de mecanismo de modelo JavaScript. Ele usa a pré-compilação para dar um salto qualitativo no desempenho e faz uso total dos recursos do mecanismo JavaScript, tornando seu desempenho extremamente excepcional no front-end e no back-end. No teste de eficiência de renderização no Chrome, são 25 e 32 vezes o de bigode de motores conhecidos e micro TMPL.
Além das vantagens de desempenho, também vale a pena mencionar as funções de depuração. O depurador do modelo pode localizar com precisão a declaração de modelo que desencadeia erros de renderização, resolver a dor da depuração inadvertida durante a redação de modelos, tornar o desenvolvimento eficiente e evitar toda a falha do aplicativo devido a erros em um único modelo.
ArtTemplate Tudo isso é implementado em 1,7kb (GZIP)!
JavaScript Model Engine Basics
Embora cada mecanismo tenha diferentes métodos de implementação da sintaxe do modelo, análise de sintaxe, atribuição de variáveis e splicing de string, o princípio de renderização principal ainda é executar dinamicamente as seqüências de caracteres JavaScript.
Em relação à execução dinâmica de strings de javascript, este artigo usa um código de modelo como exemplo:
Esta é uma redação de modelo muito simples, onde "" é o ClosTag (tag de instrução lógica fechada). Se o OpenTAG for seguido por "=", o conteúdo da variável será emitido.
As declarações HTML e as declarações de saída variáveis são emitidas diretamente, e as seqüências analisadas são semelhantes:
Após a conclusão da análise de sintaxe, o método de renderização geralmente será retornado:
Teste de renderização:
No método de renderização acima, a atribuição de variável de modelo usa a instrução com a instrução, e a splicing de cordas usa o método de push de matrizes para melhorar o desempenho em IE6 e 7. O Micro Model Engine TMPL desenvolvido pelo autor JQuery John é um representante típico deste método, consulte: http://ejohn.org/blog/javasccriptscriptsicmicmicro-TeMemeMemeMating/EMememeMememplating/ejohn.org/blog/javroScriptscriptscricro-TeMemem-TeMemem-Temem-Tememem
Pode ser visto a partir da implementação principal de que dois problemas a serem resolvidos são deixados no mecanismo de modelo tradicional JavaScript:
1. Desempenho: Ao renderizar o mecanismo de modelo, ele se baseia no construtor de funções para implementá -lo. Como avaliar, Settimeout e SetInterval, a função fornece um método para acessar o mecanismo de análise JavaScript usando o texto, mas o desempenho da execução do JavaScript dessa maneira é muito baixo.
2. Depuração: Como é uma string de execução dinâmica, se o depurador encontrar um erro, o depurador não poderá pegar a fonte de erro, fazendo com que a depuração de bugs do modelo se torne extremamente dolorosa. Em um mecanismo que não executa a tolerância a falhas, se os modelos locais podem até fazer com que todo o aplicativo falhe devido a exceções de dados, o custo de manutenção aumentará drasticamente à medida que o número de modelos aumenta.
ArtTemplate O segredo de eficiência
1. Pré-compilado
No princípio de implementação do mecanismo de modelo acima mencionado, como a variável de modelo é atribuída, cada renderização requer compilação dinâmica de strings JavaScript para concluir a atribuição variável. No entanto, o processo de compilação e atribuição do ArtTemplate é concluído antes da renderização, que é chamada de "pré -compilação". O compilador de modelo ArtTemplate extrairá todas as variáveis de modelo de acordo com algumas regras simples e as declarará na cabeça da função de renderização. Esta função é semelhante a:
Esta função gerada automaticamente é como uma função JavaScript escrita à mão. Com o mesmo número de execuções, a CPU e o uso da memória foram significativamente reduzidas e o desempenho está quase no limite.
Vale ressaltar que muitos recursos do ArtTemplate são baseados em implementações pré -compiladas, como especificações de sandbox e sintaxe personalizada.
2. Método de adição de string mais rápido
Muitas pessoas pensam erroneamente que o método de push da matriz cederá as cordas mais rápido que +=. Você deve saber que isso é apenas no navegador IE6-8. As medições reais mostram que os navegadores modernos usam += para usar o método de push da matriz, enquanto no motor V8, o uso do método += é 4,7 vezes mais rápido que o splicing de matriz. Portanto, o ArtTemplate adota dois métodos diferentes de splicing de cordas de acordo com as características do mecanismo JavaScript.
Princípio do modo de depuração da ArtTemplate
O motor do modelo front-end não é como o motor de modelo de back-end. É uma análise dinâmica, para que o depurador não possa localizar o número da linha errada. O ArtTemplate de maneira inteligente permite que o depurador do modelo localize com precisão a instrução Modelo que lança erros de renderização, por exemplo:
O ArtTemplate suporta dois tipos de captura de erro, um é o erro de renderização (erro de renderização) e o erro de compilação (erro de sintaxe).
1. Erro de renderização
Os erros de renderização geralmente são causados por erros de dados do modelo ou erros variáveis. Ao renderizar, eles entrarão no modo de depuração para recompilar o modelo sem afetar a eficiência normal da execução do modelo. Os números de linha de registros do compilador de modelos com base na quebra da linha de modelo, e a função compilada é semelhante:
Quando ocorre um erro durante o processo de execução, o número da linha correspondente ao modelo de exceção é lançado imediatamente e o depurador do modelo verifica as instruções correspondentes correspondentes ao modelo de acordo com o número da linha e o imprime no console.
2. Erros de compilação
Os erros de compilação geralmente são erros de sintaxe do modelo, como ninho não qualificado, sintaxe desconhecida etc. Como o ArtTemplate não conduz uma análise lexical completa, é impossível determinar a localização da fonte de erro e só pode gerar a informação de erro e o código -fonte do texto original para os desenvolvedores para julgar.