Компоненти за многократна употреба във вашето 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>
И това е всичко, което трябва да направите, за да подредите уебсайта си в чисти компоненти за многократна употреба! Забавлявайте се с кодирането.