Con el desarrollo de la web, las aplicaciones frontales se han vuelto cada vez más complejas, y JavaScript (Node.js) basado en back-end también ha comenzado a surgir. En este momento, JavaScript ha sido colocado con mayores expectativas. Al mismo tiempo, las ideas de JavaScript MVC también se han vuelto populares. Como la parte más importante de la separación de datos e interfaces, el motor de plantilla JavaScript ha atraído cada vez más atención de los desarrolladores. En el último año, ha florecido en la comunidad de código abierto. Se pueden ver en grandes sitios web como Twitter, Taobao, Sina Weibo, Tencent QQ Space y Tencent Weibo.
Este artículo utilizará el código de ejemplo más simple para describir los principios del motor de plantilla JavaScript existente, incluidos los principios de implementación de características de la nueva generación de JavaScript Template Engine ArtTemplate. Bienvenido a discutirlos juntos.
Introducción de Arttemplate
ArtTemplate es una nueva generación de motor de plantilla JavaScript. Utiliza la precompilación para dar un salto cualitativo en el rendimiento y hace uso completo de las características del motor JavaScript, lo que hace que su rendimiento sea extremadamente sobresaliente tanto en el front-end como en el fondo. En la prueba de eficiencia de representación bajo Chrome, es 25 y 32 veces mayor que los motores bien conocidos de bigote y micro TMPL.
Además de las ventajas de rendimiento, también vale la pena mencionar las funciones de depuración. El depurador de la plantilla puede ubicar con precisión la declaración de plantilla que desencadena errores de representación, resolver el dolor de la depuración inadvertida durante la redacción de plantillas, hacer que el desarrollo sea eficiente y evitar todo el bloqueo de la aplicación debido a errores en una sola plantilla.
¡ArtTemplate, todo esto se implementa en 1.7kb (GZIP)!
Conceptos básicos del motor de plantilla de JavaScript
Aunque cada motor tiene diferentes métodos de implementación de la sintaxis de plantilla, el análisis de sintaxis, la asignación de variables y el empalme de cadenas, el principio de representación clave aún es ejecutar dinámicamente las cadenas JavaScript.
Con respecto a la ejecución dinámica de las cadenas JavaScript, este artículo utiliza un código de plantilla como ejemplo:
Esta es una escritura de plantilla muy simple, donde "" es Closetag (etiqueta cerrada de instrucción lógica). Si OpenTag es seguido por "=", se emitirá el contenido de la variable.
Las declaraciones HTML y las declaraciones de salida variables se emiten directamente, y las cadenas analizadas son similares:
Después de completar el análisis de sintaxis, el método de representación generalmente se devolverá:
Prueba de representación:
En el método de renderizado anterior, la asignación de variables de plantilla utiliza la instrucción With, y el empalme de cadena utiliza el método push de matrices para mejorar el rendimiento en IE6 y 7. El motor de micro plantilla TMPL desarrollado por jQuery autor John es un representante típico de este método, ver: http://john.org/Blog/JavaScript-Micro-Tempplating/
Se puede ver desde la implementación principal que dos problemas a resolver se dejan en el motor de plantilla JavaScript tradicional:
1. Rendimiento: al representar el motor de plantilla, se basa en el constructor de funciones para implementarlo. Al igual que la función Eval, SetTimeout y SetInterval proporciona un método para acceder al motor de análisis de JavaScript usando texto, pero el rendimiento de ejecutar JavaScript de esta manera es muy bajo.
2. Depuración: dado que es una cadena de ejecución dinámica, si el depurador encuentra un error, el depurador no puede detectar la fuente de error, lo que hace que la depuración de errores de plantilla se vuelva extremadamente dolorosa. En un motor que no realiza tolerancia a fallas, si las plantillas locales pueden incluso hacer que toda la aplicación se bloquee debido a las excepciones de datos, el costo de mantenimiento aumentará drásticamente a medida que aumente el número de plantillas.
ArtTemplate el secreto de eficiente
1. Precompilado
En el principio de implementación del motor de plantilla mencionado anteriormente, dado que se asigna la variable de plantilla, cada representación requiere una compilación dinámica de las cadenas JavaScript para completar la asignación de variables. Sin embargo, el proceso de compilación y asignación de ArtTemplate se completa antes de la representación, que se llama "precompilación". El compilador de plantilla ArtTemplate extraerá todas las variables de plantilla de acuerdo con algunas reglas simples y las declarará a la cabeza de la función de representación. Esta función es similar a:
Esta función generada automáticamente es como una función JavaScript escrita a mano. Con el mismo número de ejecuciones, tanto el uso de CPU como de memoria se han reducido significativamente, y el rendimiento está casi al límite.
Vale la pena mencionar que muchas características de ArtTemplate se basan en implementaciones precompiladas, como las especificaciones de Sandbox y la sintaxis personalizada.
2. Método de adición de cadena más rápido
Muchas personas piensan erróneamente que el método de empuje de matriz empalmará cadenas más rápido que +=. Debes saber que esto solo está en el navegador IE6-8. Las mediciones reales muestran que los navegadores modernos usan += para usar el método de empuje de matriz, mientras que en el motor V8, usar el método += es 4.7 veces más rápido que el empalme de la matriz. Por lo tanto, ArtTemplate adopta dos métodos de empalme de cadenas diferentes de acuerdo con las características del motor JavaScript.
Principio de modo de depuración de Arttemplate
El motor de plantilla frontal no es como el motor de plantilla de fondo. Es un análisis dinámico, por lo que el depurador no puede localizar el número de línea incorrecto. ArtTemplate inteligentemente permite que el depurador de la plantilla localice con precisión la declaración de plantilla que arroja errores de representación, por ejemplo:
ArtTemplate admite dos tipos de captura de errores, uno es el error de representación (error de renderizado) y el error de compilación (error de sintaxis).
1. Error de representación
Los errores de representación generalmente son causados por errores de datos de plantilla o errores variables. Al renderizar, ingresarán al modo de depuración para recompilar la plantilla sin afectar la eficiencia de ejecución de la plantilla normal. El compilador de plantilla registra números de línea basados en la ruptura de la línea de plantilla, y la función compilada es similar:
Cuando ocurre un error durante el proceso de ejecución, el número de línea correspondiente a la plantilla de excepción se arroja inmediatamente, y el depurador de la plantilla luego verifica las declaraciones correspondientes correspondientes a la plantilla de acuerdo con el número de línea e imprime a la consola.
2. Errores de compilación
Los errores de compilación generalmente son errores de sintaxis de plantilla, como anidación no calificada, sintaxis desconocida, etc. Dado que ArtTemplate no realiza un análisis léxico completo, es imposible determinar la ubicación de la fuente de error y solo puede generar la información de error y el código fuente para el texto original para que los desarrolladores juzguen.