在前端开发中，我们常常会遇到需要检测 DOM 元素大小变化的情况。而 resize-observer 就是一种能够监听元素大小变化并触发回调函数的工具。
本文将详细介绍如何使用 npm 包 resize-observer，包含基本用法、高级应用以及注意事项等内容。
基本用法
首先，我们需要安装 resize-observer 包。在终端输入以下命令即可：
--- ------- ---------------
安装成功后，我们可以在 JavaScript 文件中引入 resize-observer，代码如下：
------ -------------- ---- -----------------
引入之后，就可以使用 ResizeObserver 这个类了。我们需要创建一个实例，并传入回调函数，以在元素大小变化时触发。示例代码如下：
----- ------------- - ---------------------------------
-- -- -------------- --
----- -------------- - --- ---------------------- -- -
--------------------- -- -
------------------------------------ -------------------------
--
--
-- -------- -------------- -
-------------------------------------以上代码中，我们用 targetElement 变量表示要监听大小变化的目标元素。然后，我们创建了一个 ResizeObserver 实例 resizeObserver，并传入了一个回调函数。
回调函数的参数 entries 表示被观察元素的大小信息数组。在本例中，我们对这个数组进行了遍历，取出每个元素的大小信息并输出。
最后，我们用 observe 方法将 targetElement 添加到 resizeObserver 中，以便监听它的大小变化。
高级应用
除了基本用法，resize-observer 还提供了一些高级功能。下面我们将分别介绍：
1. 监听多个元素
如果我们需要同时监听多个元素的大小变化，我们可以将多个元素依次添加到 ResizeObserver 实例中。代码示例如下：
----- -------------- - ------------------------------------
-- -- -------------- --
----- -------------- - --- ---------------------- -- -
--------------------- -- -
------------------------------------ -------------------------
--
--
-- -------- -------------- -
------------------------------------ -- -
-------------------------------------
--以上代码中，我们首先使用 querySelectorAll 方法获取了多个目标元素，并保存在 targetElements 变量中。然后遍历 targetElements，将每个元素依次添加到 resizeObserver 中即可。
2. 取消监听元素
如果我们需要停止监听某个元素的大小变化，我们可以使用 unobserve 方法。代码示例如下：
---------------------------------------
以上代码中，我们使用 unobserve 方法移除了 targetElement 从 resizeObserver 中。
3. 停止监听所有元素
如果我们需要停止监听所有元素的大小变化，我们可以使用 disconnect 方法。代码示例如下：
---------------------------
以上代码中，我们使用 disconnect 方法停止了 resizeObserver 的监听。
注意事项
在使用 resize-observer 时，需要注意以下几点：
resize-observer包不支持所有浏览器。可以在官网查看支持情况。resize-observer监听的是元素大小的变化，而不是位置的变化。如果需要监听动态添加的元素的大小变化，需要在插入元素后重新将元素添加到
ResizeObserver实例中。如果目标元素是可隐藏的，当它隐藏时，尺寸信息可能不正确。针对此情况，可以使用
resize-observer-polyfill包作适配。
结论
本文介绍了 npm 包 resize-observer 的基本用法和高级应用，并在最后指出了一些注意事项。希望这篇文章能够帮助前端开发者更好地使用 resize-observer 工具。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/resize-the-observer