Декораторы для компонентов

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

Декораторы свойств

Декоратор свойства используется для объявления реактивных и отражаемых в DOM значений. Часто применяется для связки с атрибутами и автогенерации геттеров/сеттеров.

import { Component, tag, attribute } from '@slimjs/element';

@tag('todo-item')
class TodoItem extends Component {
  @attribute()
  title = '';

  @attribute()
  completed = false;
}

Ключевые особенности:

  • Реактивность: при изменении значения автоматически вызывается обновление шаблона.
  • Отражение атрибутов: внутреннее значение синхронизируется с атрибутом элемента.
  • Типизация через соглашение: строка или булево значение интерпретируются по умолчанию.

Декораторы методов

Методы компонента могут дополняться метаданными для шаблона или событийной модели. Наиболее полезный пример — связывание обработчиков событий.

import { Component, tag, event } from '@slimjs/element';

@tag('counter-button')
class CounterButton extends Component {
  count = 0;

  @event('click')
  increment() {
    this.count++;
  }
}

Выделяемые моменты:

  • Событийное связывание без ручного addEventListener.
  • Контекст компонента всегда корректен.
  • Минимизация шаблонного кода за счет декларативной модели.

Декораторы класса

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

import { Component, tag } from '@slimjs/element';

@tag('app-header')
class AppHeader extends Component {}

Главные функции:

  • Регистрация custom element.
  • Привязка стиля и шаблона при необходимости.
  • Расширяемость через композицию декораторов.

Комбинирование декораторов

Slim.js допускает использование нескольких декораторов на одном классе или свойстве. Это позволяет формировать выразительные конструкции без громоздких конфигураций.

@tag('search-box')
@withStyle`:host{display:block}`
class SearchBox extends Component {
  @attribute()
  query = '';

  @event('input')
  updateQuery(e) {
    this.query = e.target.value;
  }
}

Комбинирование важно для модульности и явного описания контракта компонента.

Расширение поведения через пользовательские декораторы

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

function logCalls(target, key, descriptor) {
  const original = descriptor.value;
  descriptor.value = function (...args) {
    console.log(`Call: ${key}`, args);
    return original.apply(this, args);
  };
  return descriptor;
}

Применение:

class LoggerDemo extends Component {
  @logCalls
  compute(x, y) {
    return x + y;
  }
}

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

Декораторы и жизненный цикл

Декораторы органично взаимодействуют с жизненным циклом Slim.js. Например, свойства, объявленные через @attribute, учитываются при рендеринге и обновлении шаблона, а декораторы методов гарантируют корректный вызов в момент событий. Это снижает объем кода в onCreated, onRender и onUpdated.

Особенности использования

  • Декларативность повышает читабельность структуры компонента.
  • Прозрачность связей между шаблоном, DOM и состоянием.
  • Инкапсуляция логики без нарушения принципов компонентного подхода.
  • Совместимость с нативными возможностями TypeScript и JavaScript по мере их развития.

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

  • Для свойств, отражаемых в DOM, предпочтителен @attribute как универсальный способ синхронизации.
  • Обработчики событий целесообразно помечать через @event, снижая связку с шаблоном.
  • Класс стоит дополнять @tag первым, чтобы регистрация custom element происходила на финальном компоненте.
  • Пользовательские декораторы эффективны при повторяемых шаблонах поведения: логирование, трекинг, кэширование, валидация.

Итоговые свойства архитектуры декораторов в Slim.js

Декораторы создают надстройку над Custom Elements и упрощают код, превращая декларации в конфигурацию компонента. Они минимизируют ручные операции с DOM, исключают дублирование и формируют выразительный, структурированный подход к описанию поведения компонентов на JavaScript.

Оглавление