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

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

Синтаксис и базовое использование

Декоратор метода объявляется перед определением метода с использованием символа @:

import { component, h, property, method } from 'skatejs';

@component('my-element')
class MyElement extends HTMLElement {
  @method
  greet(name) {
    return `Hello, ${name}!`;
  }
}

В этом примере декоратор @method регистрирует метод greet как часть API компонента. Такой метод можно безопасно вызывать извне, и он будет интегрирован с системой реактивности SkateJS, если будет использоваться вместе со свойствами компонента.

Ключевой момент: декораторы в SkateJS могут изменять поведение метода, оборачивать его, добавлять кэширование, связывать с событиями или реагировать на изменения свойств.

Связывание методов с событиями

Одной из часто используемых практик является автоматическое связывание методов с событиями DOM через декораторы:

import { component, h, event } from 'skatejs';

@component('button-counter')
class ButtonCounter extends HTMLElement {
  count = 0;

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

  render() {
    return h('button', {}, `Count: ${this.count}`);
  }
}

Здесь декоратор @event('click') выполняет несколько функций:

  • Регистрирует метод как обработчик события click.
  • Автоматически биндует this, чтобы внутри метода корректно ссылаться на экземпляр компонента.
  • Обеспечивает корректное удаление обработчиков при размонтировании компонента.

Использование декораторов для событий повышает читаемость кода и избавляет от необходимости вручную привязывать addEventListener и removeEventListener.

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

SkateJS поддерживает реактивность через свойства, и декораторы позволяют создать методы, которые автоматически реагируют на изменения свойств:

import { component, h, property, watch } from 'skatejs';

@component('user-greeting')
class UserGreeting extends HTMLElement {
  @property()
  name = '';

  @watch('name')
  updateGreeting(newName) {
    this.render();
  }

  render() {
    return h('p', {}, `Hello, ${this.name}`);
  }
}

В этом примере:

  • @property() делает name наблюдаемым свойством.
  • @watch('name') регистрирует метод updateGreeting, который вызывается каждый раз, когда значение name изменяется.

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

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

Декораторы в SkateJS могут принимать параметры, которые определяют поведение метода:

@watch('value', { immediate: true })
valueChanged(newValue) {
  console.log('Value updated:', newValue);
}
  • immediate: true — метод вызывается сразу после инициализации свойства, а не только при последующих изменениях.
  • Другие параметры могут включать фильтры, условия вызова, связывание с определёнными событиями и т.д.

Важно: параметры декораторов позволяют гибко управлять реактивностью и интеграцией методов с жизненным циклом компонента.

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

Методы в SkateJS могут быть обёрнуты несколькими декораторами, например, связываться с событием и наблюдать изменения свойств одновременно:

@event('input')
@watch('text')
updateText() {
  this.render();
}
  • @event('input') связывает метод с событием DOM.
  • @watch('text') обеспечивает реакцию на изменения свойства text.

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

Применение в жизненном цикле компонента

Методы с декораторами часто интегрируются с жизненным циклом Custom Elements:

  • connectedCallback — можно вызывать декорированные методы автоматически при добавлении компонента в DOM.
  • disconnectedCallback — декораторы автоматически очищают подписки и обработчики событий.

Пример:

@component('auto-cleanup-element')
class AutoCleanupElement extends HTMLElement {
  @event('resize', { passive: true })
  handleResize() {
    console.log('Resized');
  }
}

Метод handleResize будет автоматически привязан при подключении компонента и отвязан при его удалении, обеспечивая безопасное управление ресурсами.

Польза декораторов методов

  • Чистота и компактность кода: нет необходимости вручную подписываться на события или следить за реактивностью.
  • Повторное использование логики: методы с декораторами легко переиспользовать в других компонентах.
  • Согласованность с жизненным циклом: декораторы интегрируются с системой SkateJS, предотвращая утечки памяти и дублирование вызовов.
  • Расширяемость: можно создавать собственные декораторы для специфических задач, например, логирование, кеширование или валидация данных.

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

Оглавление