Встроенные hooks

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

Основные категории встроенных hooks

  1. Жизненный цикл элементов Bliss.js поддерживает hooks, которые срабатывают в ключевые моменты жизни элемента: его создание, монтирование в DOM, обновление или удаление.

    • created — вызывается сразу после создания элемента, до вставки в DOM. Используется для начальной настройки свойств и атрибутов.
    • mounted — срабатывает после вставки элемента в DOM. На этом этапе безопасно производить манипуляции с размерами, вычислять позиции и привязывать сторонние библиотеки.
    • updated — вызывается после изменения состояния или атрибутов элемента, что позволяет динамически реагировать на изменения данных.
    • destroyed — срабатывает перед удалением элемента из DOM, что полезно для очистки ресурсов, снятия событий и остановки таймеров.

Пример использования:

Bliss.hooks.created(element, () => {
    element.textContent = 'Элемент создан';
});

Bliss.hooks.mounted(element, () => {
    console.log('Элемент добавлен в DOM');
});

Event hooks

Bliss.js предоставляет встроенные hooks для работы с событиями DOM. Они упрощают привязку обработчиков и обеспечивают автоматическое управление жизненным циклом событий.

  • onClick, onInput, onChange, onSubmit — классические события с автоматическим управлением контекстом this внутри функции.
  • onHover и onFocus — синтаксический сахар для событий mouseenter/mouseleave и focus/blur.
  • onCustom — возможность создавать собственные кастомные события и реагировать на них через hooks.

Пример:

Bliss.hooks.onClick(button, (event) => {
    event.preventDefault();
    console.log('Кнопка нажата');
});

State hooks

Bliss.js поддерживает управление состоянием элементов через state hooks, аналогичные реактивным системам. Они позволяют привязывать значения к элементам и автоматически обновлять DOM при изменении состояния.

  • useState(initialValue) — создаёт реактивное состояние.
  • bindState(element, state) — связывает состояние с атрибутами или содержимым элемента.

Пример реактивного обновления текста:

const count = Bliss.hooks.useState(0);

Bliss.hooks.bindState(counterElement, count);

incrementButton.addEventListener('click', () => {
    count.value += 1; // автоматически обновляет DOM
});

Ключевой момент: изменение count.value автоматически вызывает обновление всех связанных элементов без дополнительного кода.

Async hooks

Bliss.js поддерживает асинхронные операции через специальные hooks, которые позволяют управлять данными из API или таймеров без потери синхронности DOM.

  • onAsyncLoad — срабатывает после завершения асинхронной операции и передачи данных элементу.
  • onInterval — hook для периодических обновлений с автоматическим управлением интервалами.
  • onFetch — встроенная поддержка асинхронных запросов с привязкой результатов к элементам.

Пример асинхронного обновления:

Bliss.hooks.onFetch(dataElement, 'https://api.example.com/data', (response) => {
    dataElement.textContent = response.name;
});

Composable hooks

Bliss.js позволяет комбинировать несколько hooks для одного элемента, создавая сложные сценарии поведения без дублирования кода. Hooks могут быть вложенными, реагировать друг на друга и управлять состоянием одного элемента совместно.

Bliss.hooks.mounted(input, () => {
    Bliss.hooks.onInput(input, (event) => {
        console.log('Ввод: ', event.target.value);
    });
});

Такой подход упрощает создание динамичных компонентов с минимальными усилиями и высокой читаемостью кода.

Оптимизация с использованием hooks

  • Lazy hooks — срабатывают только при необходимости, например при прокрутке или появлении элемента в области видимости.
  • Memory management — Bliss.js автоматически снимает все hooks при удалении элементов, предотвращая утечки памяти.
  • Debounce и throttle hooks — встроенные средства оптимизации событий, предотвращающие частое срабатывание обработчиков.

Пример использования debounce:

Bliss.hooks.onInput(searchInput, (e) => {
    console.log('Поиск: ', e.target.value);
}, { debounce: 300 });

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

  • Автоматическое управление жизненным циклом элементов.
  • Реактивное обновление DOM без ручного вмешательства.
  • Чистый и читаемый код, избегающий дублирования.
  • Гибкая комбинация асинхронных и синхронных операций.
  • Минимизация утечек памяти через автоматическое удаление hooks.

Встроенные hooks в Bliss.js создают современную и эффективную архитектуру разработки интерфейсов, обеспечивая мощный контроль над состоянием, событиями и жизненным циклом элементов без необходимости использования сторонних библиотек.

Оглавление