Шаблонизация через Bliss

Bliss.js предоставляет мощный инструмент для работы с шаблонами, позволяя динамически создавать, модифицировать и управлять HTML-структурами прямо из JavaScript. В основе лежит система шаблонов, которые можно использовать повторно, связывать с данными и комбинировать между собой. Основной принцип работы — отделение структуры документа от логики и данных, что упрощает поддержку и масштабирование интерфейсов.

Создание шаблонов

Шаблон в Bliss определяется с помощью специального метода Bliss.template. Он принимает HTML-строку и возвращает функцию, которая при вызове с объектом данных генерирует готовый DOM-элемент.

const userTemplate = Bliss.template(`
  <div class="user-card">
    <h2>{{name}}</h2>
    <p>Возраст: {{age}}</p>
    <ul>
      {{#each hobbies}}
        <li>{{this}}</li>
      {{/each}}
    </ul>
  </div>
`);

В этом примере используются двойные фигурные скобки для вставки данных. Ключ {{name}} будет заменён на значение свойства объекта, переданного в шаблон. Конструкция {{#each hobbies}}...{{/each}} позволяет итерировать массивы.

Вставка данных

Функция-шаблон принимает объект с данными и возвращает DOM-узел:

const userData = {
  name: "Анна",
  age: 28,
  hobbies: ["Чтение", "Путешествия", "Йога"]
};

const userElement = userTemplate(userData);
document.body.appendChild(userElement);

Ключевые моменты:

  • Шаблон может возвращать один корневой элемент или несколько через DocumentFragment.
  • Любые отсутствующие данные подставляются как пустые строки, что предотвращает ошибки рендеринга.
  • Вложенные шаблоны можно использовать для повторного включения компонентов.

Вложенные шаблоны и компоненты

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

const hobbyTemplate = Bliss.template(`<li>{{hobby}}</li>`);

const userTemplate = Bliss.template(`
  <div class="user-card">
    <h2>{{name}}</h2>
    <ul>{{#each hobbies}}{{> hobbyTemplate this}}{{/each}}</ul>
  </div>
`);

const userElement = userTemplate({
  name: "Иван",
  hobbies: ["Фотография", "Рисование"]
});

Здесь {{> hobbyTemplate this}} означает вставку другого шаблона, передавая текущий элемент массива в качестве данных.

Условные конструкции

Bliss.js позволяет управлять отображением блоков с помощью условий:

const messageTemplate = Bliss.template(`
  <div class="message">
    {{#if isAdmin}}
      <strong>Администратор</strong>
    {{else}}
      <span>Пользователь</span>
    {{/if}}
    : {{text}}
  </div>
`);
  • {{#if condition}} ... {{/if}} — рендерит блок только если условие истинно.
  • {{else}} позволяет добавить альтернативное содержимое.
  • Любые JavaScript-выражения в условиях должны возвращать логическое значение.

Динамическая вставка атрибутов

Bliss.js поддерживает подстановку данных в атрибуты HTML:

const linkTemplate = Bliss.template(`
  <a href="{{url}}" target="_blank">{{text}}</a>
`);

const linkElement = linkTemplate({
  url: "https://example.com",
  text: "Перейти на сайт"
});
  • Значения автоматически экранируются, предотвращая XSS.
  • Поддерживается использование выражений в атрибутах: {{condition ? "classA" : "classB"}}.

Работа с событиями

Bliss интегрирует шаблонизацию с привязкой событий:

const buttonTemplate = Bliss.template(`
  <button oncl ick="{{handleClick}}">Нажать</button>
`);

const buttonElement = buttonTemplate({
  handleClick: () => alert("Кнопка нажата")
});
  • Любая функция, переданная как значение атрибута события, автоматически привязывается к DOM-элементу.
  • Позволяет держать логику отдельно от структуры шаблона.

Шаблонные массивы и повторные элементы

Bliss.js умеет генерировать списки элементов на основе массива данных без ручного перебора:

const listTemplate = Bliss.template(`
  <ul>
    {{#each items}}
      <li>{{this}}</li>
    {{/each}}
  </ul>
`);

const listElement = listTemplate({
  items: ["Элемент 1", "Элемент 2", "Элемент 3"]
});
  • {{#each array}} ... {{/each}} создает повторяющиеся элементы для каждого объекта массива.
  • Вложенные массивы можно обрабатывать через комбинирование подшаблонов.

Рендеринг в существующий DOM

Шаблоны могут не только создавать новые элементы, но и заменять содержимое существующих:

const container = document.querySelector("#app");
container.innerHTML = "";
container.appendChild(userTemplate({ name: "Мария", age: 35, hobbies: ["Пение"] }));
  • Такой подход упрощает обновление интерфейса без полного перезапуска страницы.
  • Для больших приложений рекомендуется использовать DocumentFragment, чтобы минимизировать количество перерисовок.

Совместимость с реактивными данными

Bliss.js хорошо сочетается с наблюдаемыми объектами:

let user = Bliss.observable({
  name: "Олег",
  age: 40
});

const userCard = userTemplate(user);
document.body.appendChild(userCard);

user.name = "Алексей"; // автоматически обновляет отображение
  • Bliss.observable делает объект реактивным.
  • Все шаблоны, использующие эти данные, автоматически обновляются при изменении значений.

Кэширование и оптимизация шаблонов

Bliss.js позволяет кэшировать скомпилированные шаблоны для ускорения рендеринга:

const cachedTemplate = Bliss.templateCache.get("userCard") || Bliss.template(`<div>{{name}}</div>`);
Bliss.templateCache.set("userCard", cachedTemplate);
  • Использование кэша снижает нагрузку на процессор при частом рендеринге.
  • Особенно полезно для больших списков и часто обновляемых компонентов.

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

Оглавление