Константы и перечисления

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

Объявление констант

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

const BASE_CLASS = "fast-button";
const DEFAULT_WIDTH = 120;
const EVENTS = {
    CLICK: "click",
    FOCUS: "focus"
};

Особенности:

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

Перечисления (Enums)

FAST Element не имеет встроенной поддержки enum, как в TypeScript, но константные объекты или замороженные объекты (Object.freeze) эффективно выполняют ту же функцию.

const ButtonSize = Object.freeze({
    SMALL: "small",
    MEDIUM: "medium",
    LARGE: "large"
});

const ButtonType = Object.freeze({
    PRIMARY: "primary",
    SECONDARY: "secondary",
    TERTIARY: "tertiary"
});

Преимущества использования замороженных объектов:

  • Невозможность изменения значений после определения.
  • Возможность безопасного сравнения значений.
  • Явная семантика для определённых типов данных компонента.

Использование констант и перечислений в свойствах компонентов

Константы и перечисления активно применяются для определения допустимых значений свойств (@attr) компонента. Это позволяет ограничивать вводимые значения и поддерживать строгую типизацию при разработке.

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

class MyButton extends FASTElement {
    @attr size;
    @attr type;

    connectedCallback() {
        super.connectedCallback();
        if (!Object.values(ButtonSize).includes(this.size)) {
            this.size = ButtonSize.MEDIUM;
        }
        if (!Object.values(ButtonType).includes(this.type)) {
            this.type = ButtonType.PRIMARY;
        }
    }
}

MyButton.define({
    name: "my-button",
    template: html`<button class="${x => BASE_CLASS} ${x => x.size} ${x => x.type}"><slot></slot></button>`,
    styles: css`
        .fast-button.small { width: 80px; }
        .fast-button.medium { width: 120px; }
        .fast-button.large { width: 160px; }
    `
});

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

  • Проверка значений через Object.values(Enum) гарантирует допустимые параметры.
  • Константы для классов CSS и размеров позволяют централизованно управлять стилями.
  • Использование констант в шаблонах упрощает поддержку и расширение компонентов.

Связь констант с CSS Custom Properties

FAST Element поддерживает динамическое связывание констант с CSS Custom Properties для улучшения управляемости стилей и переиспользуемости значений.

const COLOR_PRIMARY = "#0078d4";
const COLOR_SECONDARY = "#e5e5e5";

const buttonStyles = css`
    :host {
        --button-primary: ${COLOR_PRIMARY};
        --button-secondary: ${COLOR_SECONDARY};
    }
    button.primary {
        background-color: var(--button-primary);
    }
    button.secondary {
        background-color: var(--button-secondary);
    }
`;

Преимущества:

  • Легко изменять цвета и другие параметры глобально через константы.
  • Константы и CSS-переменные обеспечивают согласованность стилей в проекте.
  • Упрощается создание тем и вариантов оформления компонентов.

Использование перечислений для управления состояниями

Для управления состояниями компонентов (disabled, loading, selected) удобнее всего использовать перечисления, чтобы избегать строковых литералов и ошибок при написании кода.

const ButtonState = Object.freeze({
    DEFAULT: "default",
    LOADING: "loading",
    DISABLED: "disabled"
});

class StatefulButton extends FASTElement {
    @attr state;

    get isDisabled() {
        return this.state === ButtonState.DISABLED;
    }

    get isLoading() {
        return this.state === ButtonState.LOADING;
    }
}

Особенности:

  • Перечисления обеспечивают строгую типизацию и читаемость.
  • Методы-помощники (get isDisabled()) упрощают работу с состояниями.
  • Константы и перечисления создают единый источник истины для значений состояний.

Рекомендации по организации констант и перечислений

  • Все константы и перечисления следует группировать в отдельные файлы, чтобы их можно было использовать в разных компонентах.
  • Использовать Object.freeze для имитации перечислений, что предотвращает случайное изменение.
  • Присваивать константам логичные имена, отражающие их назначение в компоненте или шаблоне.
  • Объединять константы и перечисления с CSS Custom Properties для централизованного управления стилями и параметрами.

Константы и перечисления в FAST Element создают основу для предсказуемого поведения компонентов, упрощают управление стилями и состояниями, а также делают код более структурированным и поддерживаемым.

Оглавление