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

SkateJS — это библиотека для создания веб-компонентов с использованием реактивного подхода и современного синтаксиса JavaScript. Одной из ключевых возможностей является работа с декораторами свойств, которые упрощают объявление реактивных свойств и связывание их с атрибутами элементов.

Основы декораторов свойств

В SkateJS свойство компонента определяется через декоратор @prop. Этот декоратор позволяет указать:

  • Тип свойства (type)
  • Связь с атрибутом (attribute)
  • Значение по умолчанию (default)
  • Наблюдение изменений свойства (observer)

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

import { define, props, prop, Component } from 'skatejs';

class MyElement extends Component {
  @prop({ type: String, attribute: true, default: 'Hello' })
  greeting;
}

define(MyElement);

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

  • type: String указывает, что свойство должно быть строкой.
  • attribute: true создаёт автоматическую синхронизацию свойства с атрибутом HTML.
  • default: 'Hello' задаёт начальное значение свойства.

Типы свойств

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

  • String — строковое свойство.
  • Number — числовое свойство, автоматически преобразует значение атрибута.
  • Boolean — логическое свойство, присутствие атрибута = true.
  • Object — сложный объект, передается как ссылка.
  • Array — массив, можно использовать JSON-сериализацию при передаче через атрибут.

Пример свойства типа Boolean:

@prop({ type: Boolean, attribute: true, default: false })
isActive;

Если элемент имеет <my-element is-active></my-element>, свойство isActive примет значение true.

Наблюдение изменений свойств

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

@prop({ type: String, observer(newValue, oldValue) { 
  console.log(`Свойство изменилось с ${oldValue} на ${newValue}`); 
}})
status;

При изменении status вызывается функция observer, что позволяет реализовать реактивные реакции на изменения состояния компонента.

Связь с атрибутами

Использование attribute: true создаёт двустороннюю связь между свойством и атрибутом HTML. Это означает, что изменение свойства в JavaScript автоматически обновляет атрибут, и наоборот.

Для атрибута можно задать другое имя:

@prop({ type: String, attribute: 'custom-name' })
customProperty;

В DOM это будет отражено как <my-element custom-name="value"></my-element>.

Значения по умолчанию и инициализация

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

@prop({ type: Array, default: () => [] })
items;

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

Комбинация нескольких опций

Декоратор @prop поддерживает комбинирование всех опций:

@prop({
  type: Number,
  attribute: true,
  default: 10,
  observer(newValue, oldValue) {
    console.log(`Значение изменилось с ${oldValue} на ${newValue}`);
  }
})
count;

Это позволяет задать тип, синхронизацию с атрибутом, начальное значение и реакцию на изменения свойства одновременно.

Особенности и ограничения

  • Свойства, определённые через декоратор, автоматически становятся реактивными. При изменении их значения компонент перерисовывается.
  • Декораторы не работают с приватными свойствами (#privateProp) напрямую. Для приватных реактивных свойств используется метод props.define.
  • Атрибуты HTML всегда хранят строки, поэтому SkateJS приводит их к указанному типу.

Продвинутые возможности

  • Комплексные типы. Для объектов и массивов можно определить deserialize и serialize функции, чтобы контролировать преобразование значения при чтении из атрибута и записи в атрибут.
@prop({
  type: Object,
  attribute: true,
  serialize: obj => JSON.stringify(obj),
  deserialize: str => JSON.parse(str)
})
settings;

  • Наследование свойств. Декораторы свойства можно наследовать, SkateJS корректно объединяет свойства родительского и дочернего классов.

  • Реактивная работа с DOM. Изменение свойства автоматически вызывает render, если метод рендера используется для отображения значений в шаблоне.

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

Оглавление