Жизненный цикл поведений

В FAST Element поведение компонентов определяется через custom elements, которые наследуют возможности стандартного Web Components API, но предоставляют расширенный контроль над жизненным циклом и реактивностью. Основное понятие — поведение (behavior) — представляет собой механизм, позволяющий управлять жизненным циклом элемента, его состоянием и реакцией на изменения свойств и атрибутов.

Определение поведения

Поведение в FAST Element описывается с помощью классов, расширяющих FASTElement:

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

class MyElement extends FASTElement {
    firstName = "John";
    lastName = "Doe";

    get fullName() {
        return `${this.firstName} ${this.lastName}`;
    }
}

MyElement.define({
    name: "my-element",
    template: html`<div>${x => x.fullName}</div>`,
    styles: css`div { font-weight: bold; }`
});

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

  • FASTElement предоставляет базовую инфраструктуру реактивности и связывания данных.
  • Свойства элемента автоматически отслеживаются и могут триггерить обновление DOM.
  • Методы класса могут использоваться для вычисляемых значений и логики поведения.

Методы жизненного цикла

FAST Element добавляет дополнительные хуки жизненного цикла поверх стандартных:

  1. connectedCallback() Вызывается при добавлении элемента в DOM. На этом этапе можно инициализировать события, подписки или динамическую загрузку данных.

    connectedCallback() {
    super.connectedCallback();
    console.log("Элемент подключён к DOM");
}

  2. disconnectedCallback() Вызывается при удалении элемента из DOM. Подходит для очистки ресурсов, отписки от событий и остановки таймеров.

    disconnectedCallback() {
    console.log("Элемент удалён из DOM");
    super.disconnectedCallback();
}

  3. attributeChangedCallback(name, oldValue, newValue) Триггерится при изменении отслеживаемых атрибутов. FAST Element автоматически связывает свойства с атрибутами при их объявлении.

    attributeChangedCallback(name, oldValue, newValue) {
    console.log(`${name} изменён с ${oldValue} на ${newValue}`);
    super.attributeChangedCallback(name, oldValue, newValue);
}

  4. propertyChanged(propertyName, oldValue, newValue) Специфический FAST Element метод, вызывается при изменении реактивного свойства. Он позволяет обновлять DOM или выполнять побочные эффекты без необходимости вручную отслеживать атрибуты.

    propertyChanged(propertyName, oldValue, newValue) {
    if(propertyName === "firstName") {
        console.log(`firstName изменён на ${newValue}`);
    }
    super.propertyChanged(propertyName, oldValue, newValue);
}

Отслеживание свойств и реактивность

FAST Element поддерживает реактивное связывание данных через декораторы и объявление свойств:

import { observable } from "@microsoft/fast-element";

class UserCard extends FASTElement {
    @observable firstName;
    @observable lastName;

    get fullName() {
        return `${this.firstName} ${this.lastName}`;
    }
}
  • Декоратор @observable делает свойство реактивным. Любое изменение автоматически вызовет обновление DOM в местах, где оно связано.
  • Свойства могут иметь геттеры и сеттеры для вычислений и побочных эффектов.

Инициализация шаблона и стилей

FAST Element позволяет разделять структуру и стили через template и styles:

import { html, css } from "@microsoft/fast-element";

const template = html<UserCard>`<div>${x => x.fullName}</div>`;
const styles = css`div { color: blue; font-size: 16px; }`;

UserCard.define({
    name: "user-card",
    template,
    styles
});
  • Template может использовать функции и вычисляемые свойства.
  • Styles изолированы внутри элемента, что предотвращает конфликт с внешними стилями.
  • Любое изменение реактивного свойства автоматически перерисовывает соответствующие узлы DOM.

Связь с событиями

Поведения элементов тесно связаны с событиями:

class ClickCounter extends FASTElement {
    count = 0;

    increment() {
        this.count++;
    }
}

const template = html<ClickCounter>`
    <button @click="${x => x.increment()}">Нажато: ${x => x.count}</button>
`;

ClickCounter.define({ name: "click-counter", template });
  • @click — это директива FAST Element для привязки событий.
  • Любое изменение свойства count автоматически обновляет текст внутри кнопки.

Управление жизненным циклом через Directive и Behavior

FAST Element поддерживает более гибкие способы управления поведением через Directives:

  • ref — позволяет сохранять ссылку на элемент или DOM-узел.
  • repeat — реактивно повторяет элементы на основе массива.
  • when — условное отображение элементов.

Пример использования ref для управления элементом:

import { ref } from "@microsoft/fast-element";

const template = html`<input ${ref("inputElement")}>`;

class InputFocus extends FASTElement {
    inputElement;

    connectedCallback() {
        super.connectedCallback();
        this.inputElement.focus();
    }
}

InputFocus.define({ name: "input-focus", template });
  • ref связывает DOM-узел с полем класса.
  • В connectedCallback можно выполнить действия над элементом сразу после вставки в DOM.

Взаимодействие нескольких поведений

Один элемент может иметь несколько поведений, объединяя их через композицию и наследование:

class LoggingBehavior extends FASTElement {
    logPropertyChange(name, value) {
        console.log(`Свойство ${name} изменено на ${value}`);
    }
}

class MyComponent extends LoggingBehavior {
    myProperty;
    
    propertyChanged(name, oldValue, newValue) {
        super.propertyChanged(name, oldValue, newValue);
        this.logPropertyChange(name, newValue);
    }
}

MyComponent.define({ name: "my-component" });
  • Поведения можно расширять, создавая цепочку вызовов.
  • Метод super позволяет сохранять функциональность родителя и добавлять новые реакции.

Итоговая структура жизненного цикла FAST Element

  1. Инициализация класса — создание экземпляра.
  2. Подключение к DOM (connectedCallback) — инициализация событий и ресурсов.
  3. Обработка изменений свойств и атрибутов (propertyChanged / attributeChangedCallback).
  4. Обновление DOM через шаблон и директивы.
  5. Удаление из DOM (disconnectedCallback) — очистка ресурсов.

Эта последовательность позволяет строить высокореактивные, модульные и управляемые компоненты, полностью интегрированные в систему FAST Element.

Оглавление