让我们了解一下 ResizeObserver 👋🏼

Resize Observer API 是另一个很棒的 JavaScript API，它能让你在元素大小发生变化时收到通知。window.onresize不过，这需要从元素层面来思考。

什么

元素尺寸变化最常见的情况是视口大小调整。或者就移动设备而言，方向发生变化。

以前，ResizeObserver你必须通过 hookwindow.onresize或 usewindow.resize才能判断元素的大小是否发生了变化。这非常低效，因为它会触发很多事件。

此 API 可以派上用场的另一种情况是当您动态添加/删除元素时，在这种情况下父元素的大小会发生变化，而不是视口发生变化。

该界面报告的内容或边框ResizeObserver尺寸的变化，或 的边界框的变化。ElementSVGElement

内容框是可以放置内容的框，即边框框减去内边距和边框宽度。边框框包含内容、内边距和边框。

闲话少叙，快把代码告诉我吧😉

ResizeObserver在其最简单的形式中，您只需实例化 API 的新实例并将回调传递给它即可使用。

const myObserver = new ResizeObserver(entries => {
  // iterate over the entries, do something.
});

就其本身而言，这并没有多大帮助，但是如果您observe在实例上调用该方法并为其提供一个元素，它将开始捕获其大小变化并调用您的回调函数。

const myEl = document.querySelector('.my-element');

myObserver.observe(myEl);

现在，每当我的元素的大小发生变化时，它都会触发回调，瞧。

回调输入对象

当您将回调传递给 API 的构造函数时，您将获得一个如下所示的对象数组：

如您所见，您获取的对象具有两个属性：contentRect和target。目标很明显，它是 DOM 元素本身。与元素的 不同，上的width和值不包含填充。heightcontentRectgetBoundingClientRect

演示

你可以用这个 API 做很多事情，比如根据元素大小调整字体大小，以及在大小变化时更改样式。下面是我根据元素大小更改边框单选按钮的示例。调整窗口大小，看看会发生什么😎。

演示说明

这个演示并不复杂，我们有一个div有两个孩子的：

<div class="boxes">
  <div class="box"></div>
  <div class="box"></div>
</div>

我们添加了一些样式以便我们可以看到变化：

.boxes {
  display: flex;
  flex-wrap: wrap;
  width: 40vw;
  margin-bottom: 50px;
}
.box {
  height: 200px;
  flex-shrink: 1;
  flex-grow: 1;
  margin: 10px;
  box-sizing: border-box;
  border: 3px solid black;
}

完成后，我们添加小片段以让观察者通知我们变化：

const ro = new ResizeObserver(entries => {
  for (let entry of entries) {
    entry.target.style.borderRadius =
      Math.max(0, 250 - entry.contentRect.width) +
      'px'
  }
})
console.log('horay');
// Only observe the 2nd box
ro.observe(
  document.querySelector('.box:nth-child(2)')
)

在回调中，我们只需根据元素的宽度改变边框半径，就好了。

浏览器支持

大多数主流浏览器都支持该 API，Chrome 64+、Firefox 69+、Microsoft Edge 76 和 Safari 13-TP 均支持该 API，但对移动浏览器的支持较差。

探索 API 并使用它做一些很酷的事情，玩得开心😍。