Встроенные директивы Slim.js

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

Встроенные директивы Slim.js обеспечивают базовую функциональность без необходимости подключения сторонних библиотек.

sl-if — условный рендеринг

Директива sl-if управляет отображением элемента в зависимости от логического выражения. Если выражение истинно, элемент рендерится в DOM; если ложно — удаляется.

<div sl-if="isVisible">
  Этот блок отображается только если isVisible === true
</div>

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

  • sl-if реагирует на изменения данных автоматически.
  • Можно использовать любое булево выражение или переменную состояния.
  • Директива полностью удаляет элемент из DOM при ложном значении, освобождая ресурсы.

sl-for — циклический рендеринг

Директива sl-for используется для повторного создания элементов на основе массива данных.

<ul>
  <li sl-for="item in items">
    {{item.name}}
  </li>
</ul>

Особенности работы sl-for:

  • sl-for создает отдельный экземпляр элемента для каждого элемента массива.
  • Доступны индексы через синтаксис item, index in items.
  • Поддерживается вложенный рендеринг внутри циклов.
  • Любые изменения в массиве (push, splice, sort) автоматически отражаются в DOM.
<li sl-for="item, idx in items">
  {{idx}}: {{item.name}}
</li>

sl-bind — привязка атрибутов и свойств

Директива sl-bind используется для динамического связывания атрибутов HTML с данными компонента.

<input type="text" sl-bind:value="username">
<img sl-bind:src="user.avatarUrl">

Суть работы:

  • Поддерживает привязку к любым атрибутам, включая class, style, src, href.
  • Обновление значения переменной автоматически обновляет атрибут.
  • Позволяет комбинировать с другими директивами для сложной реактивности.

sl-on — обработка событий

sl-on обеспечивает декларативное добавление обработчиков событий.

<button sl-on:click="handleClick">Нажми меня</button>

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

  • Поддерживает любые стандартные события DOM (click, input, change, submit).
  • Обработчик указывается как метод компонента.
  • Можно передавать аргументы через выражение: sl-on:click="handleClick(item.id)".
handleClick(id) {
  console.log("Нажат элемент с ID:", id);
}

sl-model — двусторонняя привязка данных

Директива sl-model реализует двустороннюю привязку для форм.

<input type="text" sl-model="username">

Принципы работы:

  • Значение input автоматически синхронизируется с переменной username.
  • Изменение переменной в коде обновляет DOM, а изменение DOM обновляет переменную.
  • Работает с input, textarea, select.

sl-class и sl-style — динамические стили

Директивы sl-class и sl-style позволяют динамически управлять CSS-классами и inline-стилями.

<div sl-class="{active: isActive, hidden: !isVisible}">
  Блок с динамическими классами
</div>

<div sl-style="{color: textColor, 'font-size': fontSize + 'px'}">
  Блок с динамическими стилями
</div>

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

  • Для sl-class объект ключ:значение определяет наличие класса.
  • Для sl-style ключи соответствуют CSS-свойствам, а значения — переменные или выражения.
  • Обновление переменных моментально отражается в DOM.

sl-ref — ссылка на DOM-элемент

Директива sl-ref позволяет получить прямой доступ к DOM-элементу внутри компонента.

<input sl-ref="searchInput" type="text">
this.searchInput.focus();

Преимущества:

  • Удобно для интеграции с внешними библиотеками или прямого управления DOM.
  • Позволяет использовать методы DOM-элемента без querySelector.

Реактивность и производительность

Slim.js оптимизирует обновление DOM, применяя виртуальный DOM и минимальные изменения при ререндеринге. Все встроенные директивы полностью интегрированы с реактивной системой:

  • sl-if и sl-for удаляют и создают элементы только при изменении состояния.
  • sl-bind, sl-model, sl-class, sl-style обновляют только измененные атрибуты.
  • Обработчики sl-on привязываются один раз и остаются активными на протяжении жизни компонента.

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

Комбинирование директив

В Slim.js директивы можно комбинировать для создания сложных реактивных интерфейсов.

<ul>
  <li sl-for="item in items" sl-if="item.visible" sl-class="{selected: item.id === selectedId}">
    <span>{{item.name}}</span>
    <button sl-on:click="selectItem(item.id)">Выбрать</button>
  </li>
</ul>

Результат:

  • Элементы отображаются только если item.visible === true.
  • Классы обновляются автоматически при изменении состояния.
  • События работают корректно для каждого элемента списка.
  • Все изменения данных мгновенно отражаются в интерфейсе без дополнительных вызовов.

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

Оглавление