Типы для событий

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

Основные типы событий

События в Slim.js делятся на несколько категорий, каждая из которых имеет свои особенности и ограничения. Основные типы событий:

  1. События DOM Эти события наследуются от стандартного DOM, например: click, input, change, submit. Slim.js позволяет использовать нативные события напрямую в компонентах, при этом добавляя удобные механизмы привязки.

    class MyComponent extends Slim {
  constructor() {
    super();
    this.name = '';
  }

  onInputChange(event) {
    this.name = event.target.value;
  }

  get template() {
    return `<input type="text" onin put="this.onInputChange(event)">`;
  }
}
customElements.define('my-component', MyComponent);

    Ключевой момент: обработчики получают объект события строго соответствующего типа (Event, InputEvent, MouseEvent), что позволяет использовать автокомплит и проверку типов в современных редакторах.

  2. Пользовательские события (Custom Events) Slim.js активно использует собственные события для связи компонентов. Они создаются через класс CustomEvent и могут содержать полезные данные (detail).

    const event = new CustomEvent('user-logged-in', {
  detail: { userId: 42 },
  bubbles: true,
  composed: true
});
this.dispatchEvent(event);

    Типизация пользовательских событий позволяет указать структуру detail, что предотвращает ошибки при доступе к свойствам.

  3. События жизненного цикла компонентов Slim.js предоставляет набор встроенных событий для компонентов: onBeforeRender, onAfterRender, onConnect, onDisconnect. Эти события полезны для инициализации состояния, подписок на внешние источники данных и управления ресурсами.

    class LoggerComponent extends Slim {
  onConnect() {
    console.log('Компонент подключён к DOM');
  }

  onDisconnect() {
    console.log('Компонент удалён из DOM');
  }
}

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

Типизация данных события

В Slim.js рекомендуется всегда указывать ожидаемый тип данных в событиях. Это особенно важно для пользовательских событий, передающих сложные объекты. Типизация может быть выполнена как через JSDoc, так и через TypeScript:

/**
 * @typedef {Object} UserEventDetail
 * @property {number} userId
 * @property {string} userName
 */

/** @type {CustomEvent<UserEventDetail>} */
const loginEvent = new CustomEvent('login', {
  detail: { userId: 1, userName: 'Alice' },
});

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

Связь типов с жизненным циклом

Тип события напрямую влияет на то, где его безопасно обрабатывать:

  • DOM-события могут обрабатываться в любой момент после рендеринга.
  • Пользовательские события лучше обрабатывать после полного подключения компонента (onConnect), чтобы избежать потери событий.
  • События жизненного цикла строго ограничены своим контекстом и выполняются автоматически библиотекой.

Советы по работе с событиями

  • Использовать строгую типизацию Event и CustomEvent для предотвращения ошибок при доступе к свойствам.
  • Не изменять глобальные объекты события; лучше использовать detail для передачи данных.
  • Всегда указывать bubbles и composed при создании событий, если они должны распространяться за пределы компонента.
  • Подписка на события должна выполняться в onConnect, отписка — в onDisconnect.

Пример комплексного использования типов

class CounterComponent extends Slim {
  constructor() {
    super();
    this.count = 0;
  }

  increment() {
    this.count += 1;
    const event = new CustomEvent('count-updated', {
      detail: { value: this.count },
      bubbles: true,
      composed: true
    });
    this.dispatchEvent(event);
  }

  onClickIncrement() {
    this.increment();
  }

  get template() {
    return `<button oncl ick="this.onClickIncrement()">Increment</button>`;
  }
}
customElements.define('counter-component', CounterComponent);

В этом примере пользовательское событие count-updated имеет четко определённый тип detail, DOM-событие click обрабатывается напрямую, а компоненты Slim.js используют безопасные методы управления состоянием и событиями.

Типы событий в Slim.js обеспечивают строгую организацию взаимодействий между компонентами и DOM. Их правильное использование повышает надежность, предсказуемость и читаемость кода в крупных проектах.

Оглавление