Интерфейсы прикладного программирования (API) — это предопределенные конструкции языка программирования, которые позволяют разработчику создавать сложные функции с меньшими усилиями. Они «скрывают» более сложный код от программиста, обеспечивая простоту использования.
API-интерфейсы браузера встроены в веб-браузер и могут использовать данные из браузера и компьютерной среды для выполнения более сложных действий с этими данными. Например, Geolocation API предоставляет простые в использовании конструкции JavaScript для управления данными о местоположении, поэтому вы можете, например, отметить свое местоположение на карте Google.
В этой статье мы рассмотрим несколько самых интересных на мой взгляд API, о которых вы, возможно, не знали.
API-интерфейс наблюдателя за пересечением
Intersection Observer API позволяет веб-приложениям асинхронно отслеживать изменения в пересечении элемента с его родительским элементом или областью просмотра документа.
Исторически определение видимости одного элемента или видимости двух элементов по отношению друг к другу было сложной задачей. Способы решения этой проблемы были ненадежными и замедляли работу браузера. Однако по мере роста Интернета необходимость решения этой проблемы также возрастала по многим причинам, таким как:
- Ленивая загрузка изображений или другого контента при прокрутке страницы.
- Реализация веб-сайтов с «бесконечной прокруткой», когда контент загружается при прокрутке страницы вниз без переключения между страницами.
- Отчет о видимости рекламы для расчета выручки от нее.
- Решение о том, запускать ли какой-либо процесс или анимацию, зависит от того, видит пользователь результат или нет.
В прошлом реализация обнаружения пересечения элементов включала использование обработчиков событий и циклов, которые вызывали такие методы, как Element.getBoundingClientRect, для сбора необходимой информации о каждом затронутом элементе. Поскольку весь этот код выполняется в основном потоке, могут возникать различные проблемы с производительностью.
Пример использования:
Приостановите текущее видео и запустите его снова в зависимости от того, попадает ли видео в область просмотра.
Результат: Пока видео находится в области просмотра, оно воспроизводится.
API буфера обмена
Существует новый API JavaScript для асинхронного доступа к буферу обмена с использованием спецификации, которая все еще находится в стадии разработки. До сих пор в веб-разработке стандартным способом копирования текста в буфер обмена был метод document.execCommand. Основным недостатком этого подхода является то, что это синхронная блокирующая операция. API асинхронного буфера обмена основан на промисах, и одной из его целей является устранение этого недостатка. Он призван предоставить веб-разработчикам более простой в использовании API унифицированного буфера обмена. Кроме того, этот API предназначен для поддержки многих типов данных, а не только текстовых/обычных.
Запись данных в буфер обмена — это простая операция, реализуемая вызовом метода writeText объекта буфера обмена и передачей ему соответствующего текста.
Метод readText используется для чтения данных из буфера обмена. В целях повышения безопасности, помимо того, что страница, считывающая данные из буфера обмена, должна быть открыта в активной вкладке браузера, пользователь должен предоставить ей дополнительное разрешение. Браузер автоматически запросит это разрешение при первом вызове readText.
API геолокации
API геолокации позволяет пользователю указать свое местоположение в веб-приложении, если пользователь решит предоставить его. Из соображений конфиденциальности у пользователя будет запрошено разрешение на предоставление информации о местоположении.
В качестве примера используйте метод Geolocation.getCurrentPosition() для определения местоположения пользователя.
Этот метод принимает один обязательный и два необязательных параметра: success — это функция обратного вызова, которая получает объект Position при предоставлении разрешения, error — это функция обратного вызова, которая получает объект PositionError при отказе в доступе, а options — это объект с настройками. Вот как это выглядит в коде:
API производительности
Измерение времени, необходимого для выполнения функции, — хороший способ доказать, что одна реализация механизма более производительна, чем другая. Это позволяет убедиться, что на производительность функции не повлияют некоторые изменения, внесенные в код. Это также помогает найти узкие места в производительности приложений.
Интерфейс Performance предоставляет доступ к значению типа DOMHighResTimeStamp через метод performance.now(). Этот метод возвращает метку времени, указывающую время в миллисекундах с момента начала существования документа. При этом точность этого индикатора составляет около 5 микросекунд (долей миллисекунды).
История API
Объект Window DOM предоставляет доступ к истории текущего сеанса браузера (не путать с историей расширений браузера) через объект истории. Он предоставляет полезные методы и свойства, которые позволяют перемещаться вперед и назад по истории пользователя и манипулировать ее содержимым.
Чтобы двигаться назад по истории:
window.history.back();Аналогично можно двигаться вперед (как если бы пользователь нажал кнопку «Вперед»):
window.history.forward();Переместиться на 2 страницы назад можно так:
window.history.go(-2);Похоже, вы можете перейти на 2 страницы вперед:
window.history.go(2);Заключение
В этой статье мы рассмотрели лишь малую часть API браузера. Для более подробного ознакомления рекомендую перейти к документации этих апи. Желаю вам развития и успешных проектов!
