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

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

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

Свойства объявляются статическим объектом properties внутри класса компонента. Ключи объекта соответствуют именам свойств, а значения определяют поведение и типизацию.

import 'slim-js';

class Counter extends Slim {
  static properties = {
    count: { type: Number, value: 0 },
    label: { type: String, value: 'Clicks' }
  };
}
customElements.define('x-counter', Counter);

Ключевые параметры:

  • type — преобразование значения свойства к указанному типу.
  • value — значение по умолчанию.

Slim.js приводит значения автоматически, уменьшая вероятность ошибок при передаче данных в компонент.

Реактивность свойств

Каждое свойство в Slim.js реактивно. Изменение свойства вызывает автоматическое обновление шаблона, если оно присутствует в разметке. Дополнительная логика обновления может быть реализована методом onRender, который вызывается после перерисовки.

onRender() {
  console.log(`Текущее значение: ${this.count}`);
}

Обновление свойства может выполняться напрямую:

this.count++;

Slim.js обработает изменение и синхронизирует представление.

Отражение в атрибуты и из них

Свойства могут быть связаны с атрибутами HTML. Это обеспечивает передачу данных через разметку и интеграцию с другими веб-компонентами или внешними фреймворками.

static properties = {
  active: { type: Boolean, reflectToAttribute: true }
};

Особенности отражения:

  • При reflectToAttribute: true значение свойства сериализуется в атрибут.
  • Обратное преобразование работает при изменении атрибута в DOM.
  • Для булевых свойств атрибут присутствует или удаляется без строковых значений.

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

Значение value применяется при создании экземпляра компонента, формируя предсказуемое состояние. Вложенная инициализация состояния избавляет от дополнительного кода в конструкторе.

static properties = {
  size: { type: Number, value: 10 }
};

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

static properties = {
  data: { value: () => ({ clicks: 0 }) }
};

Реакция на изменение свойств

Slim.js предоставляет хуки жизненного цикла. Наиболее важный в контексте свойств — onPropertyChanged. Он принимает имя свойства, новое и старое значения.

onPropertyChanged(prop, newValue, oldValue) {
  if (prop === 'count' && newValue > oldValue) {
    console.log('Счётчик увеличился');
  }
}

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

Передача свойств компоненту

Свойства могут передаваться через HTML-разметку:

<x-counter count="5" label="Times"></x-counter>

Slim.js выполнит преобразование типов в соответствии с объявлением. Если свойство не объявлено, оно воспринимается как атрибут без реактивности.

Композитные свойства

При работе со сложными данными Slim.js сохраняет реактивность лишь на уровне ссылки. Изменение вложенных структур без смены ссылки не вызовет перерисовку.

this.data.clicks++;
// шаблон не обновится
this.data = { ...this.data, clicks: this.data.clicks + 1 };
// шаблон обновится

Такой подход важен при проектировании сложного состояния и оптимизации рендеринга.

Свойства и шаблон

Slim.js связывает свойства с шаблоном через ${} в HTML. Связи работают однонаправленно: представление отражает состояние.

<span>${count}</span>

При обновлении count значение обновится автоматически, исключая ручные манипуляции с DOM.

Взаимодействие свойств с событиями

Свойства часто используются как конечное состояние событийного слоя. Например, событие клика увеличивает счётчик, а отображение обновляется на основе свойства.

<button on:click="count++">+</button>
<span>${count}</span>

Slim.js интерпретирует выражение и обновляет значение свойства.

Инкапсуляция данных

Свойства компонента инкапсулируют состояние, позволяя компонентам быть самодостаточными и повторно используемыми. Отсутствие глобальных зависимостей облегчает интеграцию библиотекой в различные архитектуры, включая MVC, MVVM и реактивные паттерны.

Итоги механизма свойств

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

Оглавление