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

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

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

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

相关资源：jdk-8u281-windows-x64.exe