ResizeObserver API使用示例详解

API介绍

当我们需要知道一个元素的大小变化或者屏幕横竖屏时，我们需要监听window.resize事件或者window.orientationchange方法。由于reize事件会在一秒内触发将近60次，所以很容易在改变窗口大小时导致性能问题。换句话说，window.resize事件通常是浪费的，因为它会监听每个元素的大小变化（只有window对象才有resize事件），而不是具体到某个元素的变化。如果我们只想监听某个元素的变化的话，这种操作就很浪费性能了。

而ResizeObserver API就可以帮助我们：监听一个DOM节点的变化，这种变化包括但不仅限于：

• 某个节点的出现和隐藏
• 某个节点的大小变化

ResizeObserver API是一个新的JavaScript API，与IntersectionObserver API非常相似，它们都允许我们去监听某个元素的变化。

实际上，ResizeObserver API使用了观察者模式，也就是我们常说的发布-订阅模式。发布-订阅模式是JavaScript中典型的设计模式，在很多地方都有使用到。如Nodejs的Event模块，Vue的父子组件通信等等。对发布-订阅模式不熟悉的同学可以看看《JavaScript设计模式与开发实践》这本书，对Vue的通信感兴趣的可以看看Vue官网啦。

所以呢，我个人认为，ResizeObserver API的出现是用于替代window.resize方法糟糕的性能的。（不喜亲喷: (）

浏览器兼容性

虽然可以用来替代resize事件。但是它，很新，新到只有部分浏览器支持。

但是不要怂呀，如果想使用它，可以使用其polyfill。最低可以兼容到IE8以上的浏览器啦。所以以后在开发过程中如果想使用resize事件监听DOM的大小变化时，何不尝试一下ResizeObserver API呢？

用法

使用ResizeObserver API非常简单。ResizeObserver是个构造函数。在使用new关键字调用构造函数，返回实例对象时，需要传入一个回调函数，这个回调用于监听实例对象某个DOM节点的变化。如

      const myObserver = new ResizeObserver(entries => {
        entries.forEach(entry => {
          console.log('大小位置', entry.contentRect)
          console.log('监听的DOM', entry.target)
        })
      })
      myObserver.observe(document.body)

以上，调用实例对象的observe方法，监听整个body节点的变化，当改变窗口大小或者某个DOM节点出现或隐藏时时，就会触发回调。

触发回调后的第一个参数是一个ResizeObserverEntry对象。这里的entry.target是DOM节点本身，而entry.contentRect是一个对象，包含了节点的位置属性，如width, height, left, right, bottom, left, x, y等。

width：指元素本身的宽度，不包含padding，border值

height：指元素本身的高度，不包含padding，border值

top：指padidng-top的值

left：指padding-left的值

right：指left + width的值

bottom: 值top + height的值

x：大小与top相同

y：大小与left相同，不知道具体是指什么

明白了contentRect之后，就可以在使用这个api的时候针对不同场景获取不同的值进行业务的开发。

接着，如果想在监听多个DOM节点的变化，直接在一个实例对象上调用多次observe方法就好了。如

const myObserver = new ResizeObserver(entries => {
// 注意，entres是个数组，数组项为每个需要监听的DOM节点
   entries.forEach(entry => {
     console.log('大小位置 contentRect', entry.contentRect)
     console.log('监听的DOM target', entry.target)
   })
})
myObserver.observe(document.body)
myObserver.observe(document.querySelector('#app'))

然后，实例对象myObserver方法除了有observe方法之外，还有disconnect方法和unobserve方法。

unobserve方法，顾名思义了，就是取消监听某个DOM节点。比如说想在两秒后取消监听document.body，那么这样做就好了

window.setTimeout(() => {
   myObserver.unobserve(document.body)   // 需要接收一个参数
}, 2000)

disconnect方法呢，就是取消对所有节点的监听。比如说想在四秒后取消监听所有节点，那么

window.setTimeout(() => {
   myObserver.disconnect()    // 此时就不会再监听document.body,和#app节点了
}, 4000)

最后，在使用ResizeObserver API的时候，在每次触发元素的大小变化时，会在1s内触发回调蛮多次的。如果想进一步优化性能，可以加上throttle节流函数处理

// throttle需要自行引入哈
const myObserver = new ResizeObserver(throttle(entries => {
  entries.forEach(entry => {
    console.log('大小位置 contentRect', entry.contentRect)
    console.log('监听的DOM target', entry.target)
  })
}), 500)

这样子就能做到每个500ms触发一次回调啦。是不是很劲（粤语）

总结

好的，关于ResizeObserver API的介绍就到这里了，如果想要一个更加具体的例子，可以参考

JavaScript API ResizeObserver使用示例

https://github.com/que-etc/resize-observer-polyfill

更多关于ResizeObserver API使用的资料请关注脚本之家其它相关文章！

最新评论