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

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

Определение свойств с дефолтными значениями

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

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

class MyButton extends Component {
  static props = {
    label: props.string({ default: 'Нажми меня' }),
    disabled: props.boolean({ default: false }),
    count: props.number({ default: 0 })
  };

  render() {
    return this.html`
      <button ?disabled=${this.disabled}>
        ${this.label} (${this.count})
      </button>
    `;
  }
}

define('my-button', MyButton);

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

  • props.string({ default: '...' }) — строковое свойство с установленным значением по умолчанию.
  • props.boolean({ default: false }) — логическое свойство с дефолтом.
  • props.number({ default: 0 }) — числовое свойство, если не передано значение, будет использован ноль.

Поведение при отсутствии значения

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

<my-button></my-button>

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

  • label будет равен 'Нажми меня'
  • disabled — false
  • count — 0

Если же значения передаются явно:

<my-button label="Отправить" disabled count="5"></my-button>

Свойства компонента перезаписываются указанными значениями.

Использование функций для динамических значений по умолчанию

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

static props = {
  timestamp: props.number({
    default: () => Date.now()
  })
};

Каждый раз при создании нового экземпляра timestamp будет уникальным и равным времени создания компонента. Это особенно полезно для генерации уникальных идентификаторов или временных меток.

Взаимодействие с атрибутами HTML

SkateJS автоматически синхронизирует свойства с атрибутами HTML. При определении значения по умолчанию:

  • Если атрибут отсутствует — используется значение по умолчанию.
  • Если атрибут присутствует — значение берётся из HTML и приводится к указанному типу.

Пример:

static props = {
  active: props.boolean({ default: true })
};
<my-component></my-component> <!-- active = true -->
<my-component active></my-component> <!-- active = true -->
<my-component active="false"></my-component> <!-- active = false -->

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

Наследование и переопределение значений по умолчанию

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

class BaseButton extends Component {
  static props = {
    color: props.string({ default: 'blue' })
  };
}

class DangerButton extends BaseButton {
  static props = {
    color: props.string({ default: 'red' })
  };
}

DangerButton будет использовать color: 'red' по умолчанию, не затрагивая базовый компонент.

Динамическая реактивность

Значения по умолчанию в SkateJS не только инициализируют свойства, но и участвуют в реактивной системе. При изменении свойства, даже если оно было установлено через default, компонент автоматически перерендеривается:

this.count++; // count был равен 0 по умолчанию

Каждое изменение свойства вызывает render, что обеспечивает согласованное отображение компонента.

Лучшие практики использования default

  1. Минимизировать проверку undefined — значения по умолчанию позволяют избавляться от лишних условий в коде.
  2. Использовать функции для динамических данных — уникальные идентификаторы, временные метки, случайные значения.
  3. Сохранять консистентность типов — props.number({ default: 0 }) всегда вернёт число, что предотвращает ошибки.
  4. Явное переопределение при наследовании — при создании новых компонентов контролировать дефолтные значения для специфической логики.

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

Значения по умолчанию в SkateJS являются основным инструментом для управления исходным состоянием компонентов. Они:

  • Обеспечивают безопасное начальное состояние.
  • Поддерживают реактивность компонентов.
  • Автоматически синхронизируются с атрибутами HTML.
  • Позволяют использовать функции для вычисляемых значений.
  • Поддерживают наследование и переопределение.

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

Оглавление