HTML стал более эффективным и увлекательным

Шаблонизаторы - уже великое изобретение - это то, что я снова заметил, когда недавно работал над личным проектом с handlebars.js и Express.

Особенно большие веб-сайты с динамическими функциями и большим количеством контента могут быть очень сложными в обслуживании, если вы просто начнете писать HTML-код примитивным способом.

Чтобы решить эту проблему, вам не нужно использовать интерфейсные фреймворки, чтобы разбивать все на повторно используемые компоненты.

Вот несколько практических функций handlebars.js, которые в сочетании с Express.js доставляют массу удовольствия и делают разработку веб-сайтов намного более удобной.

Что такое серверный шаблонизатор?

Если вы уже знаете, то можете пропустить это вступление и сразу перейти к нашей установке.

Движки шаблонов в основном известны из внешнего интерфейса. Например, Handlebars, который часто ассоциируется с Mustache.js, также можно использовать во внешнем интерфейсе. С современными серверными платформами, такими как Express.js, вы также можете войти в мир Node.js.

Такой движок предоставляет шаблон для сервера, который должен быть заполнен конкретными данными для готового приложения. Когда пользователь запрашивает сервер, сервер обрабатывает шаблон и заполняет его. Пользователь ничего не замечает; он получает только готовую веб-страницу.

Таким образом, механизмы создания шаблонов идеально подходят для создания динамических веб-сайтов, которым не нужно отправлять тонны JS-кода пользователю, так что интерфейсную часть можно использовать, например, для вызовов API.

Вычислительная нагрузка ложится на сервер. Кроме того, механизмы создания шаблонов делают разработку веб-приложений очень простой и эффективной. Вы можете разбить части на компоненты, как если бы вы использовали интерфейсную структуру, такую ​​как React или Angular.

Достаточная причина, чтобы посмотреть, как мы можем облегчить себе жизнь с помощью handlebars.js.

Давайте установим handlebars.js для Express.js

Сначала создайте новый каталог для нашего проекта. Затем установите то, что нужно:

npm install -y 
npm install express express-handlebars

Затем создайте каталог / views.
Это папка, в которой express-handlebars по умолчанию будет искать шаблоны.

В папке представлений мы создаем папку макета, которая также по умолчанию используется экспресс-манипуляторами. В этой папке мы создаем main.handlebars - он служит компонентом оболочки.

Все, что мы там пишем, будет отображаться под каждым маршрутом нашего окончательного веб-приложения - поэтому оно идеально подходит для встраивания тегов SEO и импорта файлов, таких как CSS и JS.

Оставьте main.handlebars следующим образом: {{{body}}}

Это означает, что мы хотим включить сюда весь код, который фактически предоставляет дескриптор.

Окончательная файловая структура:

├── app.js
├── package-lock.json
└── views
    ├── index.handlebars
    └── layouts
        └── main.handlebars

app.js:

const express = require(‘express’);
const exphbs = require(‘express-handlebars’);
const app = express();
app.engine(‘handlebars’, exphbs());
app.set(‘view engine’, ‘handlebars’);
app.get(‘/’, function (req, res) {
  res.render(“index”);
});
app.listen(8080);

Напишите что-нибудь в index.handlebars, запустите сервер, и вы должны увидеть рабочий проект.

Давайте взглянем на первую замечательную функцию, которая упрощает разработку.

Передача данных и их просмотр

Передать данные из Express на руль действительно просто.
Функция рендеринга express-handlebars получает объект в качестве второго параметра, содержащий все данные, которые мы хотим предоставить.

let names = ["Max", "Tom", "Anna"]
app.get(‘/’, function (req, res) {
  res.render(“index”, {
    students: names
  });
});

index.handlebars:

<h1>Students:</h1>
<ul>
  {{#each students}}
    <li>{{this}}</li>
  {{/each}}
</ul>

Результат:

Основные вещи. Но как насчет более сложных объектов?

Предлагаем еще несколько подробностей о наших учениках:

let people = [
  {name: “Max”, age: 21},
  {name: “Tom”, age: 19},
  {name: “Anna”, age: 25}
]

Измененные index.handlebars:

<ul>
  {{#each students}}
    <li>{{this.name}}, {{this.age}}</li>
  {{/each}}
</ul>

Результат:

Условия

В моем текущем побочном проекте, предназначенном для развлечения, у меня была проблема, заключающаяся в том, что я не только хотел отображать что-то при истинном условии, но также, если это условие ложно, что-то еще должно отображаться в другом месте.

Да, это звучит сложно, но на самом деле это не так - вот реальный пример:

Слева и справа, под кодом JavaScript, вы видите одно и то же информационное поле - конечно, оба поля имеют одинаковые стили CSS.

Но с левой стороны коробка по-прежнему закруглена по верхним углам. Благодаря условным операторам в handlebars мне не нужно создавать один компонент для обоих, но я могу решить это следующим образом:

  • Если какой-то исходный код передается для отображения, он автоматически отображается над информационным окном.
  • Если исходный код не передан, то информационное окно отображается отдельно.
  • Как решить проблему со скругленными углами? Также в самом компоненте информационного окна проверяется, предоставлен ли исходный код для отображения.
  • Если исходный код не передается, информационному блоку передается другой класс CSS, который округляет верхние углы.

Таким образом, я могу использовать один и тот же компонент информационного окна везде и, в особых случаях, автоматически управлять рулем с проверкой.
Конечно, вам нужно использовать условные выражения; вот как это сделать с рулем:

Проверить условие на истинность - если

Поэтому немного изменим app.js:

let person = {
  name: “Max”,
  adult: false
}
app.get(‘/’, function (req, res) {
  res.render(“index”, {
    person: person
  });
});

index.handlebars:

{{#if person.adult}}
  <p>person is an adult</p>
{{/if}}

А теперь вы ничего не должны видеть, поскольку взрослый - ложь. Проблема в том, что в руле другого настоящего нет. Вместо этого нам нужно использовать if, что является обратным условию if в этом языке шаблонов:

{{#unless person.adult}}
  <p>not an adult.</p>
{{/unless}}

Теперь вы должны увидеть «не взрослый». на вебсайте.

Разница между ‘{{}}’ и ‘{{{}}}’

Это частая ошибка, которую допускают многие новички в управлении рулем. Если мы хотим передать что-то с ручками в наш шаблон, мы можем сделать это двумя способами:

  • Предоставляем контент, который затем отображается между нашими HTML-тегами.
  • HTML-структуры, которые также отображаются правильно.

Вот пример, чтобы показать это:

let content = “<b>I am bold text</b>”
app.get(‘/’, function (req, res) {
  res.render(“index”, {
    content: content
  });
});

index.handlebars: {{content}}

Это приведет к отображению в виде текста:

3 фигурные скобки вместо 2 заставят ручки рассматривать содержимое как действительный HTML-код:

{{{content}}} :

В моем побочном проекте я использовал это, когда хотел выделить курсивом или жирным шрифтом слова для заголовков кодовых листов.

Спасибо за чтение!

Присоединяйтесь к моему списку рассылки, чтобы оставаться на связи со мной

JavaScript на простом английском языке

Понравилась эта статья? Если да, то получите больше похожего контента, подписавшись на наш канал YouTube в Decoded!