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!