Кастомные теги и директивы

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

Кастомные теги

Кастомные теги в Marko позволяют инкапсулировать логику и разметку в компонентах, которые могут быть повторно использованы по всему приложению. Эти теги могут включать как статический HTML, так и динамическую логику, использующую данные, переданные в компонент.

Простой кастомный тег Для создания кастомного тега создается новый компонент с соответствующим расширением .marko. Внутри компонента можно использовать синтаксис Marko, включая HTML-разметку и JavaScript для динамического взаимодействия.

Пример простого кастомного тега:

<template>
  <div class="card">
    <h2>${input.title}</h2>
    <p>${input.content}</p>
  </div>
</template>

<script>
  module.exports = {
    onInput(input) {
      // Логика обработки входных данных
    }
  };
</script>

В этом примере компонент “card” отображает заголовок и содержание, полученные через input. Такие компоненты можно использовать в других частях приложения, например:

<card title="Привет, мир!" content="Это простой пример кастомного тега."></card>

Особенности кастомных тегов

  • Каждый компонент Marko представляет собой тег, который можно встраивать в другие шаблоны.
  • Теги могут принимать параметры через input — объект, который содержит данные, передаваемые в компонент.
  • Внутри компонента доступна динамическая логика через блок <script>, где можно использовать обработчики событий, методы и другие механизмы работы с данными.

Директивы

Директивы в Marko — это мощный инструмент для добавления функциональности прямо в разметку шаблона. Они могут изменять поведение или внешний вид элементов, а также управлять их состоянием в зависимости от условий.

Использование директив Директивы применяются к элементам разметки и начинаются с префикса x-. Это позволяет легко расширять функциональность, не изменяя структуру шаблона. Например, директива x-if используется для условного рендеринга:

<div>
  <x-if test=${user.isLoggedIn}>
    <p>Добро пожаловать, ${user.name}!</p>
  </x-if>
  <x-else>
    <p>Пожалуйста, войдите в систему.</p>
  </x-else>
</div>

Здесь блок с приветствием отображается только в том случае, если условие user.isLoggedIn истинно. В противном случае срабатывает блок с предложением войти в систему.

Популярные директивы

  • x-if: Отображает элемент, если условие истинно.
  • x-for: Создает цикл по массиву или коллекции объектов.
  • x-bind: Привязывает атрибуты элемента к значениям из данных.
  • x-on: Добавляет обработчики событий.

Пример использования директивы x-for для перебора массива:

<ul>
  <x-for|item of=${items}>
    <li>${item.name}</li>
  </x-for>
</ul>

Этот код создает список, в котором каждый элемент будет представлен значением из массива items.

Директивы и привязка данных Одна из ключевых особенностей Marko — это двусторонняя привязка данных. Использование директив позволяет динамически изменять элементы на основе изменения данных в приложении.

Пример использования x-bind:

<button x-bind:disabled=${isDisabled}>Отправить</button>

Здесь кнопка будет недоступна для нажатия, если переменная isDisabled истинна.

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

Marko позволяет создавать собственные директивы, которые могут быть использованы для выполнения сложной логики или взаимодействия с компонентами.

Пример создания кастомной директивы Чтобы создать кастомную директиву, необходимо зарегистрировать ее в файле конфигурации проекта. Например, создадим директиву, которая будет изменять стиль элемента на основе условия.

module.exports = {
  directives: {
    'x-toggle-style': (el, value) => {
      if (value) {
        el.style.backgroundColor = 'green';
      } else {
        el.style.backgroundColor = 'red';
      }
    }
  }
};

Эту директиву можно использовать следующим образом:

<div x-toggle-style=${isActive}>Статус</div>

В этом примере, если isActive равно true, элемент получит зеленый фон, иначе — красный.

Рекомендации и лучшие практики

  • Использование повторно: Кастомные теги и директивы облегчают повторное использование компонентов, улучшая поддержку масштабируемости и читаемости кода.
  • Чистота разметки: При создании кастомных тегов и директив важно придерживаться принципа “чистоты разметки”. Логика должна быть инкапсулирована в компонентах или директивах, а не располагаться в самой разметке.
  • Оптимизация производительности: Часто обновляемые данные или сложные вычисления в директивах могут повлиять на производительность. Используйте механизмы оптимизации, такие как кэширование или ленивую загрузку, где это необходимо.

Заключение

Кастомные теги и директивы — это мощные инструменты в Marko, позволяющие создавать гибкие и переиспользуемые компоненты. Их использование помогает разрабатывать более чистую и поддерживаемую архитектуру, а также позволяет интегрировать сложную логику и функциональность непосредственно в разметку.

Оглавление