Компоненти за многократна употреба във вашето NodeJS уеб приложение

Докато кодираме уебсайт, бързо става очевидно, че някои компоненти могат да бъдат използвани повторно на страници или секции — напр. лентата за навигация, екраните за зареждане, изскачащите прозорци и т.н. Когато това се случи, можем да конвертираме тези компоненти за многократна употреба в шаблони.

Има няколко начина да направите това при разработването на уебсайтове, но в тази статия ще пиша само за използването на EJS (Embedded JavaScript), който намирам за един от най-простите методи.

Предполагам, че вече знаете как да създадете скелетно NodeJS уеб приложение, в противен случай имам някои статии за „настройка“ и „създаване на първата уеб страница“, които може да са полезни.

Инсталирайте ejs

От командния ред (Windows) или терминал (Mac) отворете папката на вашия проект и въведете следната команда, за да инсталирате пакета ejs:

npm install ejs

Конфигурирайте своето приложение Express

След това конфигурирайте вашето Express приложение да използва ejs, като добавите този ред във вашия .js файл, някъде след Express() реда:

var express = require('express');
var app = express();

app.set('view engine', 'ejs'); //<---- add this line

Създайте нови папки във вашия проект

Създайте нова директория /views в основата.

Допълнително категоризирам файловете, като създавам поддиректориите /views/partialsза компонентите за многократна употреба и /views/site за страниците.

Например, сега имам този шаблон, наречен /views/partials/button.ejs (обърнете внимание, че типът файл е .ejs!):

<div>
  <span>This is some text</span>
  <button class="btn">Click Me!</button>
</div>

И имам страница (която използва този шаблон), запазена като /views/site/dashboard.ejs:

<html>
    <head></head>
    <body>
        <div> This is some body in our dashboard page</div>
        <%- include('../partials/button'); %>
    </body>
</html>

Ще забележите, че .ejs е пропуснат, когато включите шаблона. Ако срещнете грешки, моля, проверете дали пътят е правилен.

Рестартирайте приложението си, за да видите промените в браузъра. При последващи промени (на страниците) можете да видите актуализациите, като просто щракнете върху обновяване.

Предаване на данни към частичните

Разбира се, не е правдоподобно всичките ни бутони да бъдат „Щракнете върху мен“. Понякога трябва да имаме променливи за нашия шаблон. След това можем да променим кода малко по този начин:

<div>
  <span><%= description %></span>
  <button class="btn"><%= label %></button>
</div>

Това казва на шаблона, че чака 2 променливи, описание и етикет, за да се изобрази правилно.

След това страницата, която използва шаблона, ще трябва да предостави тези 2 променливи в json формат:

<html>
    <head></head>
    <body>
        <div> This is some body in our dashboard page</div>
        <%- include('../partials/button', 
          {'description':'Hello World', 'label':'Read More'}); %>
        <%- include('../partials/button', 
          {'description':'Another Button', 'label':'Visit Us'}); %>
    </body>
</html>

И това е всичко, което трябва да направите, за да подредите уебсайта си в чисти компоненти за многократна употреба! Забавлявайте се с кодирането.