Расширение базовых классов

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

Наследование от FASTElement

В FAST Element базовым классом для всех компонентов является FASTElement. Любой пользовательский элемент создаётся через наследование от него:

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

class MyElement extends FASTElement {
    constructor() {
        super();
        this.message = "Привет, FAST!";
    }
}

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

  • FASTElement предоставляет реактивность свойств через декоратор @observable или метод defineProperty.
  • Наследование позволяет использовать жизненные циклы компонента, такие как connectedCallback и disconnectedCallback.

Создание базового класса для переиспользования

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

class BaseButton extends FASTElement {
    static styles = css`
        button {
            padding: 8px 16px;
            border-radius: 4px;
            border: none;
            cursor: pointer;
        }
    `;

    label = "Кнопка";

    click() {
        console.log(`${this.label} нажата`);
    }
}

Теперь можно создать специализированные кнопки, наследуя этот базовый класс:

class PrimaryButton extends BaseButton {
    static styles = css`
        ${super.styles}
        button {
            background-color: blue;
            color: white;
        }
    `;
}

class SecondaryButton extends BaseButton {
    static styles = css`
        ${super.styles}
        button {
            background-color: gray;
            color: black;
        }
    `;
}

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

  • Использование super.styles позволяет расширять стили базового класса без полного копирования CSS.
  • Методы базового класса можно переопределять или расширять, вызывая super.method().

Реактивные свойства в наследуемых классах

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

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

class BaseInput extends FASTElement {
    @observable value = "";
}
  
class TextInput extends BaseInput {
    @observable placeholder = "Введите текст";
}

При изменении value в TextInput шаблон автоматически обновится, как если бы это свойство было определено в дочернем классе. Наследование не ломает реактивность.

Переопределение шаблонов

Шаблон компонента в FAST Element определяется с помощью html и может быть переопределён при наследовании:

class BaseCard extends FASTElement {
    title = "Заголовок";
    content = "Содержимое карточки";

    static template = html`
        <div class="card">
            <h2>${x => x.title}</h2>
            <p>${x => x.content}</p>
        </div>
    `;
}

class FancyCard extends BaseCard {
    static template = html`
        <div class="fancy-card">
            <h1>${x => x.title}</h1>
            <div>${x => x.content}</div>
        </div>
    `;
}

Особенности переопределения:

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

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

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

function ClickLogger(Base) {
    return class extends Base {
        logClick() {
            console.log("Элемент был нажат");
        }
    };
}

class LoggerButton extends ClickLogger(FASTElement) {
    label = "Нажми меня";
}

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

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

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

  • connectedCallback() — вызывается при добавлении компонента в DOM.
  • disconnectedCallback() — вызывается при удалении компонента из DOM.
  • propertyChanged(name, oldValue, newValue) — вызывается при изменении реактивного свойства.

При наследовании важно вызывать методы базового класса через super, чтобы не нарушить реактивную модель:

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

Практические рекомендации

  • Для общих UI-элементов стоит создавать базовые классы, чтобы централизовать стили и поведение.
  • Наследование должно быть логически осмысленным: дочерний класс расширяет функционал, а не полностью меняет смысл базового.
  • Использовать миксины для повторно используемой функциональности, которая может сочетаться с другими классами.
  • Всегда проверять реактивность свойств при переопределении, чтобы данные в шаблоне оставались синхронизированными.

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

Оглавление