Si te gusta este artículo, te sugiero que le eches un vistazo a mis otros en mi blog . Hola, soy yo, , uno de los mantenedores de , un motor de plantillas rápido e integrable. En este tutorial, mostraré cómo crear un motor de plantilla de JavaScript isomorfo (navegador/nodo). @shadowtime2000 Eta El diseño El diseño inicial del motor de plantillas será bastante simple. Simplemente interpolará valores de un objeto. usará para interpolar valores. data {{valueName}} Representación sencilla Primero, creemos una función de representación simple que toma la plantilla y los datos y representará el valor. render = { template.replace( , (match) => { data[match.split( ).filter( )[ ]] }) } var ( ) => template, data return /{{(.*?)}}/g return /{{|}}/ Boolean 0 Básicamente, todo lo que hace es buscar cualquier cosa que esté entre corchetes y lo reemplaza con el nombre dentro . Puede escribir sus plantillas de esta manera y las tomará del objeto de datos. data Hi, my name is {{name}} ! render( , { : }); "Hi, my name is {{name}}!" name "shadowtime2000" Pero hay un problema, no puedes tener espacios en las interpolaciones. render( , { : }) "Hi, my name is {{ name }}!" name "shadowtime2000" /* Hi, my name is undefined! */ Esto requiere que tenga espacios dentro del objeto de datos, que no está tan limpio. Podemos hacer que permita espacios recortando los espacios en blanco iniciales y finales del nombre de los datos antes de la interpolación. render = { template.replace( , (match) => { data[match.split( ).filter( )[ ].trim()] }) } var ( ) => template, data return /{{(.*?)}}/g return /{{|}}/ Boolean 0 Esto es bastante bueno, pero para plantillas más grandes no sería tan rápido porque tiene que analizarlo todo el tiempo. Es por eso que muchos motores de plantillas admiten la compilación, donde la plantilla se compila en una función JS más rápida que puede tomar los datos e interpolarlos. Agreguemos compilación a nuestro motor de plantillas, pero antes de hacerlo, debemos agregar una función de análisis especial. análisis Dado que el análisis puede ser un poco aburrido, reutilicemos un poco de código de otro motor de plantilla JS. Habría usado el motor de análisis Eta, pero se ha optimizado extremadamente y puede ser bastante confuso para las personas. Por lo tanto, usemos otro código de análisis de motor de plantilla JS popular, . Recuerde atribuirlos al motor de análisis. mde/ejs parse = { result = .exec(template); arr = []; firstPos; (result) { firstPos = result.index; (firstPos !== ) { arr.push(template.substring( , firstPos)); template = template.slice(firstPos); } arr.push(result[ ]); template = template.slice(result[ ].length); result = .exec(template); } (template) arr.push(template); arr; } var ( ) => template let /{{(.*?)}}/g const let while if 0 0 0 0 /{{(.*?)}}/g if return Lo que esto hace básicamente es repetir la ejecución del patrón de expresiones regulares en la plantilla y agregar las cosas a una estructura de datos. Así es como se vería esa estructura de datos: [ , , ] "Hi my name is " "{{ name }}" "!" Ahora que hemos terminado el análisis, pasemos a la compilación. Compilacion Echemos un vistazo rápido a lo que generaría la compilación. Imagina que ingresas esta plantilla: Hi my name is {{ name }} ! Te dará esta función: { +data.name+ ; } ( ) function data return "Hi my name is " "!" Primero creemos una función para analizar y luego creemos una cadena que se pueda usar. Primero tenemos que analizar la plantilla. compileToString = { ast = template; } const ( ) => template const También tenemos que crear una cadena que se utilizará como función. compileToString = { ast = template; fnStr = ; } const ( ) => template const let `""` La razón por la que usamos comillas al principio es porque cuando se compilan las plantillas y demás, todas comenzarán con un . Ahora tenemos que iterar sobre el AST. + compileToString = { ast = template; fnStr = ; ast.map( { (t.startsWith( ) && t.endsWith( )) { fnStr += ; } { fnStr += ; } }); } const ( ) => template const let `""` => t // checking to see if it is an interpolation if "{{" "}}" // append it to fnStr `+data. ` ${t.split( ).filter( )[ ].trim()} /{{|}}/ Boolean 0 else // append the string to the fnStr `+" "` ${t} La parte final de esta función es devolver la cadena de función. compileToString = { ast = template; fnStr = ; ast.map( { (t.startsWith( ) && t.endsWith( )) { fnStr += ; } { fnStr += ; } }); fnStr; } const ( ) => template const let `""` => t // checking to see if it is an interpolation if "{{" "}}" // append it to fnStr `+data. ` ${t.split( ).filter( )[ ].trim()} /{{|}}/ Boolean 0 else // append the string to the fnStr `+" "` ${t} return Entonces, si toma esta plantilla: Hi my name is {{ name }} ! Devolverá esto: + +data.name+ "" "Hello my name is " "!" Ahora que esto está hecho, crear una función de compilación es relativamente simple. compile = { ( , + compileToString(template)) } const ( ) => template return new Function "data" "return " Ahora hemos completado la compilación de nuestro motor de plantillas. Terminando En este tutorial mostré cómo: Implementar una función de renderizado simple Comprender un motor de análisis adaptado de EJS Iterar sobre el AST para crear funciones de plantilla compiladas rápidamente

Check out my tutorial on creating a JS template engine!

Read My Stories

Este audio es producido en el idioma original de la historia!

Demasiado Largo; Para Leer

Making security fun one episode at a time

Cómo crear un motor de plantillas usando JavaScript

Demasiado Largo; Para Leer

shadowtime2000

About Author

ETIQUETAS

Languages

ESTE ARTÍCULO FUE PRESENTADO EN...

Cómo crear un motor de plantillas usando JavaScript

Demasiado Largo; Para Leer

shadowtime2000

About Author

ETIQUETAS

Languages

ESTE ARTÍCULO FUE PRESENTADO EN...

HISTORIAS RELACIONADAS