76. Resize Observer

JavaScript: Мозги. Урок: Resize Observer

Resize Observer – это мощный инструмент JavaScript, позволяющий вам реагировать на изменения размеров элементов DOM. Вместо постоянной проверки размеров с помощью window.innerWidth или element.offsetWidth, Resize Observer предоставляет элегантный и эффективный способ отслеживать эти изменения.

Что такое Resize Observer?

Resize Observer – это API, которое позволяет вам отслеживать изменения размеров одного или нескольких HTML элементов. Когда размер отслеживаемого элемента изменяется (например, пользователь изменил размер окна браузера, элемент был добавлен или удален из DOM, изменились стили элемента), Resize Observer вызывает callback функцию, предоставляя информацию о новых размерах элемента. Это позволяет динамически адаптировать контент и поведение вашего веб-приложения к текущим размерам элементов.

Пример кода

Простейший пример использования Resize Observer:

// Создаем экземпляр ResizeObserver
const resizeObserver = new ResizeObserver(entries => {
  for (let entry of entries) {
    // entry.target - это элемент, размер которого изменился
    const width = entry.contentRect.width;
    const height = entry.contentRect.height;

    console.log(`Размер элемента изменен! Ширина: ${width}, Высота: ${height}`);
  }
});

// Наблюдаем за элементом с id "myElement"
const element = document.getElementById('myElement');
resizeObserver.observe(element);

// Чтобы прекратить наблюдение:
// resizeObserver.unobserve(element);
// resizeObserver.disconnect(); // Прекратить наблюдение за всеми элементами

<div id="myElement" style="width: 200px; height: 100px; background-color: lightblue;">
  Измените размер этого элемента!
</div>

В этом примере создается экземпляр ResizeObserver, который при изменении размера элемента с id myElement выводит в консоль его новую ширину и высоту. Обратите внимание на entry.contentRect, который содержит информацию о размерах элемента.

Параметры наблюдений (options)

Метод observe может принимать второй аргумент - объект с параметрами. На данный момент существует только один параметр: box.

• box: Указывает, какую часть элемента нужно наблюдать. Возможные значения:
  • content-box: Наблюдает за размерами контентной области элемента (внутри padding). (Значение по умолчанию)
  • border-box: Наблюдает за размерами элемента с учетом border.
  • device-pixel-content-box: Наблюдает за размерами контентной области в физических пикселях устройства.

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

const resizeObserver = new ResizeObserver(entries => {
  for (let entry of entries) {
    console.log("Ширина с учетом border:", entry.borderBoxSize[0].inlineSize);
  }
});

const element = document.getElementById('myElement');
resizeObserver.observe(element, { box: 'border-box' });

Жизненный пример

Resize Observer активно используется в современных веб-разработках:

• Адаптивные компоненты: Например, слайдеры, карусели или графики, которые автоматически подстраиваются под доступное пространство.
• Lazy loading изображений: Когда элемент (контейнер изображения) становится видимым (то есть его размер становится больше 0), загружается изображение.
• Библиотеки UI: Многие библиотеки UI (например, React, Vue, Angular) используют Resize Observer для управления компоновкой и адаптивностью своих компонентов.
• Реагирование на изменение ориентации мобильных устройств: Можно использовать Resize Observer для отслеживания изменений размеров viewport и адаптировать интерфейс приложения к портретной или альбомной ориентации.

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

• Resize Observer – это эффективный и современный способ отслеживания изменений размеров элементов DOM.
• Он вызывает callback функцию только при реальных изменениях размера, что экономит ресурсы.
• entry.contentRect содержит информацию о новых размерах элемента.
• Метод observe используется для начала наблюдения за элементом.
• Методы unobserve и disconnect используются для прекращения наблюдения.
• box параметр позволяет выбрать, какую часть элемента наблюдать.
• Resize Observer активно используется в современных веб-приложениях для создания адаптивных и динамичных интерфейсов.

Интерактивный пример