Композиция директив

FAST Element — это современный фреймворк для создания Web Components с высоким уровнем реактивности и гибкой архитектурой. Одной из ключевых возможностей является система директив, которая позволяет управлять поведением и отображением элементов на уровне шаблонов. Композиция директив в FAST Element обеспечивает создание сложных, многоуровневых реактивных интерфейсов без дублирования кода и потери производительности.

Основы директив

Директива в FAST Element — это функция или объект, который управляет привязкой данных к DOM, изменяет свойства или атрибуты элементов и может вмешиваться в процесс рендеринга. В FAST Element существуют стандартные директивы, такие как repeat, if, when, а также возможность создавать пользовательские директивы.

Пример базовой директивы:

import { html, repeat } from '@microsoft/fast-element';

const items = [1, 2, 3];

const template = html`
  
    ${repeat(() => items, item => html`${item}`)}
  
`;

Здесь repeat управляет генерацией списка элементов

на основе массива items.

Принципы композиции директив

Композиция директив заключается в объединении нескольких директив в одном выражении шаблона или в последовательной обработке данных через цепочку директив. Она позволяет:

Избегать дублирования шаблонного кода.
Разделять логику отображения и управление состоянием.
Создавать динамические интерфейсы с условными и повторяющимися блоками.

В FAST Element композиция директив реализуется через вложение или функциональные обёртки.

Вложение директив

Один из способов композиции — вложение одной директивы в другую. Например, комбинация if и repeat:

import { html, repeat, when } from '@microsoft/fast-element';

const users = [
  { name: 'Alice', active: true },
  { name: 'Bob', active: false },
  { name: 'Charlie', active: true }
];

const template = html`
  
    ${repeat(
      () => users,
      user => when(
        () => user.active,
        html`${user.name}`
      )
    )}
  
`;

В этом примере:

repeat проходит по массиву users.
when отображает только активных пользователей.
Директивы работают совместно, создавая эффективный и читабельный шаблон.

Ключевой момент: порядок вложения директив имеет значение. Сначала нужно фильтровать данные (when), затем уже повторять их (repeat), или наоборот, в зависимости от задачи.

Функциональные обёртки

Другой подход к композиции — создание пользовательских директив, которые объединяют несколько стандартных директив в одной. Это позволяет сократить шаблон и повысить читаемость.

Пример пользовательской директивы:

import { directive, html, when } from '@microsoft/fast-element';

export const showIfActive = directive((condition, content) => 
  html`${when(() => condition, content)}`
);

Использование в шаблоне:

const template = html`
  
    ${repeat(() => users, user => showIfActive(user.active, html`${user.name}`))}
  
`;

Преимущества такого подхода:

Инкапсуляция логики — вся проверка условия вынесена в директиву.
Повторное использование — одинаковую проверку можно применять в разных шаблонах.
Упрощение шаблона — уменьшается вложенность и визуальная сложность.

Передача параметров и реактивность

Директивы в FAST Element могут принимать выражения и функции, которые автоматически отслеживаются реактивной системой. При изменении значений, на которые они ссылаются, DOM обновляется без полной перерисовки компонента.

Пример:

const isVisible = true;

const template = html`
  ${when(() => isVisible, html`Элемент видим`)}
`;

Если isVisible изменяется, блок

автоматически появляется или исчезает.

Для композиции директив важно использовать функции доступа к данным, чтобы реактивность распространялась на все уровни вложенности.

Сочетание директив с пользовательскими компонентами

Директивы можно применять не только к стандартным элементам HTML, но и к кастомным FAST Element компонентам:

import { FASTElement, html } from '@microsoft/fast-element';

class UserCard extends FASTElement {
  user;
}

const template = html`
  ${repeat(() => users, user => html`
    
  `)}
`;

Директива repeat создаёт множество экземпляров компонента, каждый со своей реактивной привязкой данных. Это позволяет строить комплексные интерфейсы с высокой переиспользуемостью компонентов и директив.

Оптимизация и производительность

При композиции директив важно учитывать производительность:

Использование функций доступа к данным, а не прямых значений, чтобы реактивная система отслеживала изменения.
Минимизация вложенности — чрезмерная вложенность when, repeat и других директив может замедлять рендеринг.
Кэширование шаблонов — FAST Element поддерживает кэширование шаблонов, что особенно эффективно при повторном использовании директив в больших списках.