При работе в среде браузера вы можете использовать множество веб-API в своем коде JavaScript. От простых вещей, таких как доступ к DOM, через интегрированные платежи, вибрации, криптографию, WebGL, холст, вплоть до бесконечности и далее.

Сегодня мы рассмотрим небольшой раздел веб-API, который можно назвать "веб-API на основе наблюдателя". Эти:

  • API наблюдения за мутациями
  • Изменить размер API-интерфейса Observer
  • API-интерфейс наблюдателя за пересечением

Итак, казалось бы, несвязанные веб-API, с разными вариантами использования, но все же имеющие одну общую черту — архитектуру, основанную на наблюдателе. Это означает, что они будут иметь схожие структуры API и в целом позволят вам наблюдать за определенными изменениями и значениями и реагировать на них.

С этим небольшим введением, давайте сразу приступим к делу.

API наблюдения за мутациями

Начиная с, пожалуй, самого старого и наиболее хорошо поддерживаемого из множества (он работает даже в IE 11), у нас есть Mutation Observer API.

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

Как это работает?

Использование MutationObserver довольно просто. Просто инициируйте его с помощью функции обратного вызова, а затем используйте методы observe() и disconnect() созданного экземпляра, чтобы соответственно отслеживать узел DOM на наличие изменений и останавливать весь экземпляр от любых активных часов.

Помимо двух упомянутых методов, есть еще метод takeRecords(), который возвращает массив MutationRecords (тот самый из функции обратного вызова), которые были обнаружены, но еще не обработаны посредством обратного вызова. Это полезно для окончательной обработки перед disconnect().

Чем это полезно?

MutationObserver можно использовать по-разному. Особенно при запуске в качестве стороннего скрипта на иностранном веб-сайте он позволяет вам реагировать на изменения DOM по мере их возникновения.

С другой стороны, когда вы создаете веб-сайт с нуля и имеете знания и контроль над изменениями DOM, MutationObserver все еще может быть полезно для наблюдения, когда, например, когда сторонний виджет или его определенная часть загружается.

MutationObserver намного быстрее, чище и проще в использовании, чем запуск интервалов проверки изменений. Тем не менее, наблюдение за такими узлами, как целое <body> со всем его поддеревом, определенно вызовет проблемы с производительностью.

Благодаря этому небольшому обзору MutationObserver у вас должно быть достаточно хорошее представление о том, как работают и выглядят эти веб-API на основе наблюдателя, поскольку, как я уже сказал, большинство из них имеют схожую структуру.

Сказав это, давайте изучим другой API!

Изменить размер API-интерфейса Observer

Resize Observer API состоит, как и предыдущий API, из одного интерфейса ResizeObserver, экземпляр которого имеет 3 метода — базовые observe() и disconnect(), а также unobserve().

Теперь Resize Observer API позволяет отслеживать изменения размера любого элемента DOM. Это означает, что вы можете не только наблюдать за изменением размеров окна более эффективно, чем с помощью события window.onresize, или точнее, чем с помощью правил @media, но вы также можете фактически реагировать на изменения на основе элементов, когда, например, пользователь использует изменение размера. handle, или происходит обновление макета.

Это очень полезная функция для многих приложений. Вам больше не нужно устанавливать интервалы и использовать дорогостоящий метод getBoundingClientRect() только для того, чтобы реагировать на изменение размера элемента. Однако он довольно новый и доступен только в новых версиях вечнозеленых браузеров.

Что касается того, как вы можете его использовать:

Теперь ResizeObserver по сравнению с MutationObserver не имеет метода takeRecords(), поэтому он не ставит в очередь входящие изменения.

Чтобы компенсировать это, существует метод unobserve(). Это похоже на disconnect(), но вместо того, чтобы очищать весь экземпляр наблюдателя, он только «не наблюдает» предоставленный элемент, позволяя одному и тому же наблюдателю легче управлять несколькими элементами.

API-интерфейс наблюдателя за пересечением

И последнее, но не менее важное: у нас есть Intersection Observer API. Его можно использовать для наблюдения за пересечениями между родительскими и дочерними элементами (обычно между любым элементом DOM и корневым окном просмотра). Это полезно для определения, например, приблизительной позиции прокрутки (путем размещения фиктивного элемента в интересующей позиции прокрутки), отображал ли пользователь рекламу или другой виджет, следует ли нам загружать больше контента в бесконечный скроллер и т. д.

С точки зрения поддержки браузеров он находится между двумя предыдущими API, поскольку поддерживается более старыми версиями вечнозеленых браузеров, чем ResizeObserver, но все же не IE, как MutationObserver.

Теперь, что касается фактического API, он выглядит как комбинация двух предыдущих. У вас есть единый интерфейс — IntersectionObserver, экземпляр которого имеет все 4 ранее введенных метода, включая takeRecords() и unobserve(), и все они служат той же цели, что и их аналоги в ResizeObserver и MutationObserver.

Как и в случае с MutationObserver, IntersectionObserver также принимает объект параметров, но на этот раз непосредственно в вызове конструктора, сразу после обратного вызова. Ко всем установленным параметрам или их значениям по умолчанию позже можно получить доступ непосредственно через экземпляр наблюдателя.

Есть больше

Теперь, помимо наблюдателей, связанных с DOM, которые мы только что рассмотрели, есть также PerformanceObserver (API Performance Observer) и ReportingObserver (API Reporting Observer) — оба имеют API, похожие на MutationObserver (observe(), disconnect(), takeRecords()) и можно использовать для наблюдения за измерениями производительности и отчетов соответственно.

Оба этих наблюдателя, как правило, используются реже, чем 3 перечисленных, а ReportingObserver даже является частью Reporting API, который сейчас является экспериментальным и эксклюзивным для Chromium. .

С учетом сказанного, я надеюсь, что этот пост дал вам лучшее понимание и, возможно, даже убедил вас попробовать и использовать по крайней мере одного из наблюдателей веб-API в ваших проектах. Все они исключительно полезны и могут предоставить вам четкие интерфейсы для функций, которые в прошлом было сложно или невозможно реализовать.

Для получения дополнительной информации о веб-разработке, охватывающей фреймворки, веб-API и т. д., следите за мной в Twitter, Facebook или через мою рассылку. Спасибо за чтение и удачного кодирования!

Этот пост был написан с легкостью, сделан грамматически правильным и размещен здесь в течение 1 клика благодаря CodeWrite с его великолепным редактором, плавной интеграцией Grammarly и публикацией в один клик. Попробуйте бесплатно и используйте код first100, чтобы получить скидку 20 % на подписку (всего 2,40 доллара США в месяц или 24 доллара США в год!)