Передача данных через свойства

SkateJS — библиотека для создания веб-компонентов на базе стандартов Custom Elements, предоставляющая удобный механизм работы с свойствами (props). Свойства компонента позволяют управлять его состоянием и взаимодействовать с внешним миром, обеспечивая реактивность и синхронизацию с DOM.

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

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

Пример определения свойств:

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

class MyElement extends Component {
  static props = {
    name: props.string({ default: 'Guest' }),
    age: props.number(),
    active: props.boolean({ default: false })
  };

  render() {
    return this.html`<p>${this.name}, возраст: ${this.age}, активен: ${this.active}</p>`;
  }
}

define(MyElement);

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

  • props.string() — свойство строкового типа.
  • props.number() — свойство числового типа.
  • props.boolean() — логическое свойство.
  • default — значение, используемое при отсутствии переданного значения.
  • Все свойства автоматически наблюдаются и реактивно обновляют шаблон при изменении.

Передача свойств из HTML

Свойства компонента можно задавать через атрибуты в HTML. SkateJS автоматически преобразует строковые значения в типы, определённые в props.

<my-element name="Alice" age="25" active></my-element>

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

  • Логические свойства (boolean) считаются true, если атрибут присутствует, и false, если отсутствует.
  • Для числовых и строковых свойств SkateJS выполняет конвертацию типов.
  • Изменение атрибутов после рендера автоматически обновляет свойства компонента.

Программное изменение свойств

Свойства компонента можно изменять программно через объект экземпляра:

const el = document.querySelector('my-element');
el.name = 'Bob';
el.age = 30;
el.active = true;

При изменении свойства:

  • Происходит реактивный ререндер компонента.
  • Можно использовать updatedCallback для отслеживания изменений:
updatedCallback(oldProps) {
  if (oldProps.name !== this.name) {
    console.log(`Имя изменилось на ${this.name}`);
  }
}

Взаимодействие с внутренними состояниями

Свойства позволяют строить реактивные внутренние состояния, которые автоматически синхронизируются с DOM. Например, можно создавать условный рендеринг или динамическую стилизацию:

render() {
  return this.html`
    <div class="${this.active ? 'active' : 'inactive'}">
      ${this.name}, ${this.age} лет
    </div>
  `;
}

Изменение свойства active немедленно меняет класс элемента и обновляет отображение.

Комплексные типы и обработка объектов

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

static props = {
  user: props.object({ default: () => ({ name: '', age: 0 }) })
};

Рекомендации:

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

Свойства и события

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

class CounterElement extends Component {
  static props = {
    count: props.number({ default: 0 })
  };

  increment() {
    this.count++;
    this.emit('count-changed', { detail: this.count });
  }

  render() {
    return this.html`<button @click=${() => this.increment()}>${this.count}</button>`;
  }
}
  • Метод emit отправляет кастомное событие.
  • Подписчики могут реагировать на изменение значения.

Синхронизация атрибутов и свойств

SkateJS обеспечивает двустороннюю связь между атрибутами HTML и свойствами:

el.setAttribute('age', '40'); // свойство el.age автоматически обновляется
el.name = 'Charlie';           // атрибут name в DOM обновляется

Это упрощает интеграцию веб-компонентов с обычным HTML и фреймворками, которые используют DOM-атрибуты.

Советы по использованию свойств

  • Всегда задавать default для свойств, если возможно отсутствие значения.
  • Для сложных объектов использовать функции для создания уникального начального состояния.
  • Изменения свойств через JS всегда вызывают ререндер, атрибуты автоматически синхронизируются.
  • Для оптимизации можно использовать updatedCallback для выполнения дорогостоящих операций только при необходимости.

Свойства в SkateJS формируют основу реактивного взаимодействия компонентов с внешним миром и внутренним состоянием. Правильная организация props позволяет создавать гибкие, предсказуемые и легко интегрируемые веб-компоненты, полностью соответствующие стандартам современного фронтенда.

Оглавление