Геттеры и сеттеры

Геттеры и сеттеры в Slim.js представляют собой удобный механизм управления состоянием компонента и реактивного обновления интерфейса. Библиотека опирается на нативные свойства JavaScript, дополняя их собственным циклом связывания данных и обновления DOM.

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

class Counter extends Slim {
  get count() {
    return this._count;
  }

  set count(value) {
    this._count = value;
    this.update();
  }
}

В данном примере сеттер не только обновляет внутреннее состояние, но и вызывает UPDATE(), что сообщает Slim.js о необходимости перерисовки.

Внутреннее хранение состояния

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

class Toggle extends Slim {
  constructor() {
    super();
    this._active = false;
  }

  get active() {
    return this._active;
  }

  se t active(flag) {
    this._active = Boolean(flag);
    this.update();
  }
}

Связь с шаблонами

Slim.js позволяет использовать свойства класса непосредственно в шаблоне. При изменении значения сеттером дёргается обновление шаблона, что делает реактивность естественной.

<span>{{ count }}</span>
<button @click="count = count + 1">+</button>

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

Валидация и преобразование данных

Сеттеры нередко используют для фильтрации и нормализации данных перед тем, как состояние попадёт в компонент. Такой подход уменьшает риск ошибок и упрощает сопровождение:

set value(v) {
  const num = Number(v);
  this._value = isNaN(num) ? 0 : num;
  this.update();
}

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

Ленивые геттеры

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

get formatted() {
  return `${this.count} items`;
}

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

Сеттеры как триггеры логики

Сеттеры применяются не только для записи состояния, но и как точка входа для бизнес-логики: логирование, обновление зависимого состояния, моделирование событий.

set active(v) {
  this._active = Boolean(v);
  if (this._active) {
    this.lastActivated = Date.now();
  }
  this.update();
}

Особенности реактивности

Slim.js не использует прокси-объекты и не навязывает собственный слой абстракции поверх JavaScript-свойств. Такой подход обеспечивает предсказуемость поведения, однако требует явного вызова update() либо применения декораторов и вспомогательных методов Slim.js, которые автоматизируют этот процесс.

Ключевой принцип: состояние компонента контролируется самим разработчиком, а Slim.js лишь координирует обновления интерфейса.

Наследование и переопределение

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

set count(v) {
  super.count = v;
  console.log('updated');
}

Таким образом сохраняется реактивность Slim.js и добавляется дополнительное поведение.

Итеративное улучшение компонентов

Геттеры и сеттеры упрощают постепенное расширение компонента: вначале может существовать простое поле, затем — валидация, позже — вычисляемые значения и логирование. Slim.js органично поддерживает эту эволюцию без изменения структуры шаблона и без внедрения сложных реактивных инструментов.

Ключевые преимущества подхода

  • Явное управление состоянием через свойства.
  • Прозрачность реактивности и логики обновления.
  • Минимальные требования к абстракциям.
  • Простота интеграции в шаблоны.
  • Возможность инкапсулировать бизнес-правила в сеттерах.

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

Оглавление