Функции

FAST Element — это современная библиотека для создания веб-компонентов на JavaScript, обеспечивающая высокую производительность, гибкую реактивность и декларативное связывание данных. Функции в FAST Element — это ключевой инструмент для управления поведением компонентов, реактивностью и взаимодействием с DOM.

Определение и регистрация функций

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

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

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

class MyButton extends FASTElement {
    count = 0;

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

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

const styles = css`
    button {
        padding: 10px 20px;
        font-size: 16px;
    }
`;

MyButton.define({ name: 'my-button', template, styles });

Здесь метод increment увеличивает счетчик, а привязка через @click обеспечивает реактивное обновление шаблона.

Связывание функций с шаблоном

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

  • Выражения для значений атрибутов и текста.
  • Обработчики событий.
  • Вычисляемые свойства (computed).

Пример вычисляемого свойства:

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

class TemperatureConverter extends FASTElement {
    @observable celsius = 0;

    get fahrenheit() {
        return this.celsius * 9 / 5 + 32;
    }
}

const template = html<TemperatureConverter>`
    <input type="number" value="${x => x.celsius}" @input="${x => x.celsius = parseFloat(x.event.target.value)}" />
    <p>Фаренгейт: ${x => x.fahrenheit}</p>
`;

TemperatureConverter.define({ name: 'temp-converter', template });

Здесь метод fahrenheit реализован через геттер и автоматически пересчитывается при изменении celsius.

Передача функций через свойства

Функции могут передаваться в компонент через свойства:

class CustomButton extends FASTElement {
    clickHandler: () => void;
}

const template = html<CustomButton>`
    <button @click="${x => x.clickHandler?.()}">Клик</button>
`;

CustomButton.define({ name: 'custom-button', template });

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

const button = document.createElement('custom-button');
button.clickHandler = () => console.log('Кнопка нажата');
document.body.appendChild(button);

Такой подход позволяет разделять логику и разметку, облегчая повторное использование компонентов.

Функции с реактивными свойствами

FAST Element поддерживает реактивность с помощью декоратора @observable. Любая функция, зависящая от наблюдаемых свойств, автоматически обновляет шаблон при изменении данных.

Пример:

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

class Counter extends FASTElement {
    @observable count = 0;

    increment() {
        this.count++;
    }

    reset() {
        this.count = 0;
    }
}

const template = html<Counter>`
    <p>Счетчик: ${x => x.count}</p>
    <button @click="${x => x.increment()}">+</button>
    <button @click="${x => x.reset()}">Сброс</button>
`;

Counter.define({ name: 'counter-element', template });

Здесь функции increment и reset автоматически обновляют DOM при изменении count.

Асинхронные функции и промисы

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

class DataLoader extends FASTElement {
    @observable data = null;

    async fetchData() {
        const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
        this.data = await response.json();
    }
}

const template = html<DataLoader>`
    <button @click="${x => x.fetchData()}">Загрузить данные</button>
    <pre>${x => JSON.stringify(x.data, null, 2)}</pre>
`;

DataLoader.define({ name: 'data-loader', template });

Реактивность @observable гарантирует, что компонент автоматически отобразит полученные данные.

Передача функций через шаблонные выражения

Можно использовать функции прямо в выражениях шаблона, чтобы выполнять вычисления на лету:

const template = html`
    <p>Сумма: ${() => 2 + 3}</p>
`;

В сочетании с реактивными свойствами это позволяет динамически формировать контент без создания лишних методов.

Взаимодействие с жизненным циклом

Функции могут быть интегрированы с жизненным циклом FAST Element через методы:

  • connectedCallback — выполняется при добавлении элемента в DOM.
  • disconnectedCallback — при удалении.
  • attributeChangedCallback — при изменении атрибутов.

Пример:

class LifecycleDemo extends FASTElement {
    connectedCallback() {
        super.connectedCallback();
        console.log('Компонент подключен');
    }

    disconnectedCallback() {
        console.log('Компонент удален');
        super.disconnectedCallback();
    }
}

LifecycleDemo.define({ name: 'lifecycle-demo', template: html`` });

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

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

Оглавление