🥇 Uso de templates.

Que sucede cuando nuestra página html contiene diferentes partes de ella que cambian según diferentes condiciones, supongamos que tenemos una pagina de inicio de un diario que cambia de titulo, sus articulos y con ellos autores.

Para estos casos existe el concepto de template. Un template es un documento que tiene preparados ciertos elementos que son reemplazados por contenido dinámico.

  1. Vamos a guardar ahora nuestro hola_mundo.html como hola_mundo.tpl.

    La extensión .tpl es una convención que se usa muy frecuentemente para hacer referencia a un template.

  2. En lugar de un titulo y un parrafo estáticos vamos a agregar dos comodines, %titulo% y %parrafo%.

    <!-- hola_mundo.tpl -->
    <!doctype html>
    <html>
        <head>
            <title>%titulo%</title>
        </head>
        <body>
            <p>%parrafo%</p>
        </body>
    </html>
    
  3. Ahora definimos en variables diferentes el titulo y parrafo.

    var titulo = 'Este es el titulo de la pagina.';
    var parrafo = 'Este es el parrafo de la pagina.';
    
  4. Vamos a actualizar la referencia al archivo.

    var html = fs.readFileSync(__dirname + '/hola_mundo.tpl');
    
  5. Vamos a convertir el contenido de nuestro template a texto.

    html = html.toString();
    
  6. Y vamos a reemplazar los comodines por contenido dinámico.

    html = html.replace('%titulo%',titulo);     // reemplazar %titulo% por el valor de la variable titulo
    html = html.replace('%parrafo%',parrafo);   // reemplazar %parrafo% por el valor de la variable parrafo
    

    Como la funcion replace regresa un string, podemos utilizar la sintaxis encadenada para simplificar lo anterior en una sola línea.

    html = html.replace('%titulo%',titulo).replace('%parrafo%',parrafo);
    

    E incluso podemos simplificar aun mas si encademamos todo.

    var html = fs.readFileSync(__dirname + '/hola_mundo.tpl')
        .toString()
        .replace('%titulo%',titulo)
        .replace('%parrafo%',parrafo);
    
  7. Al final rendereamos la pagina con end.

    // llamamos a la libreria http
    var http = require('http');
    
    // llamamos a la libreria fs
    var fs = require('fs');
    
    // definimos los valores de nuestros comodines a reemplzar
    var titulo = 'Este es el titulo de la pagina.';
    var parrafo = 'Este es el parrafo de la pagina.';
    
    // creamos nuestro server
    var miServidor = http.createServer((peticion,respuesta) => {
        respuesta.writeHead(200,{'Content-Type' : 'text/html'});
        var html = fs.readFileSync(__dirname + '/hola_mundo.tpl')
            .toString()
            .replace('%titulo%',titulo)
            .replace('%parrafo%',parrafo);
        respuesta.end(html);
    });
    
    // inicializar el servidor
    miServidor.listen(1111,'127.0.0.1');
    
  8. Cierra y abre nuevamente el proceso de node, y podrás notar que ahora los comodines han sido reemplazados por texto dinámico.

En el ejemplo anterior realice una serie de operaciones de manera consecutiva utilizando la sintaxis encadenada. Esto si bien es aceptable tiene la limitante que requiere que se entienda todo el comportamiento implicito de la sintaxis. Por lo cual no es una buena idea utilizarla especialmente si se trabaja con programadores que estan teniendo su primer contacto con el lenguaje.

De texto plano a html. JSON.
comments powered by Disqus