观察者改变被观察者的状态_调整观察者大小

我不是女神ヾ 2023-02-21 14:29 9阅读 0赞

观察者改变被观察者的状态

Creating websites that are reactive and responsive used to be considered advanced but responsiveness is a necessity for successful websites and apps. We've added media queries, `matchMedia`, and a host of other APIs to help developers make responsiveness easier and now we get a new one: `ResizeObserver`. With the Resize Observer API, we can watch for resizing on individual elements!

创建React式和响应式的网站以前被认为是高级的，但是响应性是成功的网站和应用程序的必要条件。 我们添加了媒体查询， `matchMedia`和许多其他API，以帮助开发人员`ResizeObserver`响应速度，现在我们得到了一个新的： `ResizeObserver` 。 借助Resize Observer API，我们可以监视各个元素的大小！

## 使用`ResizeObserver` **(**Using `ResizeObserver`**)** ##

To listen for resize changes on elements, create a `ResizeObserver` instance and call `observe`, passing an element:

要侦听元素的大小更改，请创建`ResizeObserver`实例，并调用`observe` ，并传递元素：

const observer = new ResizeObserver(entries => {
      for (let entry of entries) {
        // Now do something with the resized element
        if (entry.contentRect.width < 1000) {
          // Stop making AJAX calls for content...
        }
      }
    });
    observer.observe(document.querySelector('div'));

An `entry` provides you a target element as well as its dimensions and positioning:

`entry`为您提供目标元素及其尺寸和位置：

entry = {
      target: div, // The element passed to `observe`
      contentRect: {
      bottom: 88,
      height: 88,
      left: 0,
      right: 1043,
      top: 0,
      width: 1043,
      x: 0,
      y: 0
      }
    }

Media queries and `matchMedia` provide an opportunity to adjust display via CSS but not functionality, which is where `ResizeObserver` fits in.

媒体查询和`matchMedia`提供了通过CSS而不是功能调整显示的机会，而这正是`ResizeObserver`适合的。

Years ago I created a hack for spying on elements using CSS, media queries, and `:before`, but it required polling via JavaScript to work properly. Having a legit, optimized JavaScript API to accomplish the same is refreshing and desperately needed!

多年前，我创建了一个利用CSS，媒体查询和`:before`监视元素的技巧，但是它需要通过JavaScript进行轮询才能正常工作。 迫切需要具有合法，经过优化JavaScript API来完成相同任务！

> 翻译自: [https://davidwalsh.name/resize-observer][https_davidwalsh.name_resize-observer]

观察者改变被观察者的状态

[https_davidwalsh.name_resize-observer]: https://davidwalsh.name/resize-observer