Более новый JavaScript API — использование ResizeObserver

JavaScript

Я увидел этот API сегодня, когда смотрел код своего коллеги, и пошел разбираться из любопытства.

написать впереди

Это экспериментальная функцияЭта функция все еще находится в стадии разработки в некоторых браузерах, см.Таблица совместимости браузеровчтобы получить префиксы, подходящие для использования в разных браузерах. Синтаксис и поведение этой функции могут измениться в будущих версиях браузеров, поскольку стандартная документация для этой функции может быть пересмотрена. - Напоминание от MDN

Введение в API

Как мы все знаем, событие window.resize может помочь нам отслеживать изменения размера окна. Но событие reize срабатывает почти 60 раз в секунду, поэтому легко вызвать проблемы с производительностью при изменении размера окна. Другими словами, событие window.resize обычно расточительно, потому что оно отслеживает изменение размера каждого элемента (событие изменения размера есть только у объекта окна), а не специфично для изменения размера элемента. Если мы хотим только прослушивать изменения элемента, эта операция является пустой тратой производительности. 
API ResizeObserver может помочь нам: отслеживать изменения узла DOM, включая, помимо прочего:

  1. Внешний вид и скрытие узла
  2. Размер узла меняется

Совместимость с браузером

Это чрезвычайно новый API для JavaScript, поэтому он еще не очень совместим.
Кстати, я дам вам инструмент, который Амвей нашел сегодня в Наггетс-Can I use, используемый для запроса совместимости API в различных браузерах.

Применение

ResizeObserver — это конструктор. При использовании нового ключевого слова для вызова конструктора и возврата объекта экземпляра вам необходимо передать функцию обратного вызова, которая используется для отслеживания изменения узла DOM объекта экземпляра.

// HTML
<div class="wrapper" ref="wrapper"></div>

// css
.wrapper {
  height: 500px;
  background-color: blueviolet;
}

// js
 mounted() {
    const resizeObserver = new ResizeObserver(entries => {
      console.log("我的resize变化啦");
      // console.log(entries);
    });
}

Показать результаты:

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

unobserve()

Отменить прослушивание узла DOM. Допустим, вы хотите отменить прослушивание через четыре секунды.

setTimeout(() => {
  resizeObserver.unobserve(this.$refs.wrapper);
}, 4000);

disconnect()

Отменить прослушивание на всех узлах. Например, если вы хотите отменить прослушивание всех узлов через четыре секунды

setTimeout(() => {
  resizeObserver.disconnect(this.$refs.wrapper);
}, 4000);

Отмените отображение эффекта мониторинга:

Ссылаться на

ResizeObserver API
MDN ResizeObserver

Категории