Регистрация компонентов

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

Определение компонента

Компонент в Slim.js создаётся с помощью класса, который наследует поведение от базового объекта Slim:

class MyComponent extends Slim {
    constructor() {
        super();
        this.title = "Пример компонента";
    }

    getTemplate() {
        return `
            <div>
                <h1>{{title}}</h1>
            </div>
        `;
    }
}

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

  • Конструктор компонента обязательно вызывает super().
  • Свойства, определённые в классе, автоматически становятся наблюдаемыми (reactive).
  • Метод getTemplate() возвращает HTML-шаблон компонента, где привязки данных выполняются через двойные фигурные скобки {{}}.

Основная регистрация

Регистрация компонента осуществляется через метод Slim.tag():

Slim.tag('my-component', MyComponent);

Пояснения:

  • 'my-component' — это имя нового HTML-тега, который будет использоваться в DOM.
  • MyComponent — класс, который реализует логику компонента.
  • После регистрации компонент можно использовать как обычный HTML-тег:
<my-component></my-component>

Свойства и наблюдаемые поля

При регистрации важно понимать, какие поля будут наблюдаемыми. Slim.js автоматически отслеживает изменения всех свойств, определённых в конструкторе или через this:

class Counter extends Slim {
    constructor() {
        super();
        this.count = 0; // наблюдаемое свойство
    }

    increment() {
        this.count++;
    }

    getTemplate() {
        return `
            <div>
                <p>Счётчик: {{count}}</p>
                <button oncl ick="{{increment}}">Увеличить</button>
            </div>
        `;
    }
}

Slim.tag('counter-component', Counter);

Изменение свойства count автоматически обновляет шаблон без ручного вмешательства в DOM.

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

Методы класса можно напрямую использовать в шаблоне через синтаксис oncl ick="{{метод}}" или аналогичные обработчики событий. Slim.js автоматически привязывает контекст this к экземпляру компонента.

  • Все методы, объявленные в классе, доступны для привязки.
  • События DOM можно комбинировать с динамическими значениями через привязку:
<button oncl ick="{{increment}}">Увеличить</button>

Расширенные возможности регистрации

Slim.js позволяет регистрировать компонент с дополнительными настройками:

Slim.tag('custom-component', MyComponent, {
    useShadow: true,
    observedAttributes: ['data-title', 'data-value']
});

Параметры:

  • useShadow: true — компонент использует Shadow DOM, изолируя стили и структуру.
  • observedAttributes — список атрибутов, изменения которых будут автоматически отслеживаться.

Это особенно полезно для интеграции с веб-компонентами и сторонними библиотеками.

Вложенные и динамические компоненты

После регистрации компоненты можно использовать внутри других компонентов. Slim.js поддерживает вложенность и динамическое создание компонентов в шаблонах:

class ParentComponent extends Slim {
    constructor() {
        super();
        this.showChild = true;
    }

    toggleChild() {
        this.showChild = !this.showChild;
    }

    getTemplate() {
        return `
            <div>
                <button oncl ick="{{toggleChild}}">Показать/Скрыть</button>
                {{#if showChild}}
                    <child-component></child-component>
                {{/if}}
            </div>
        `;
    }
}

Slim.tag('parent-component', ParentComponent);
Slim.tag('child-component', class extends Slim {
    getTemplate() {
        return `<p>Я дочерний компонент</p>`;
    }
});

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

  • Условные конструкции {{#if ...}} позволяют управлять отображением компонентов.
  • Вложенные компоненты автоматически получают обновления состояния родителя через реактивные свойства.

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

  • Имена тегов компонентов должны быть через дефис (my-component), чтобы соответствовать стандарту веб-компонентов.
  • Все свойства, которые должны быть реактивными, необходимо инициализировать в конструкторе.
  • Методы, используемые в шаблоне, должны быть объявлены в классе, иначе привязка не сработает.
  • Shadow DOM рекомендуется применять для компонентов с собственными стилями, чтобы избежать конфликтов.

Регистрация компонентов в Slim.js — фундаментальная операция, определяющая жизненный цикл, реактивность и взаимодействие с DOM. Понимание всех аспектов регистрации позволяет строить сложные интерфейсы с минимальным количеством ручного кода и полной поддержкой реактивности.

Оглавление