前言
在前端开发中，对于元素大小变化的监测需求十分常见。可以通过监听 resize 事件来实现，但是存在一些问题。比如，如果需要监听非窗口元素的大小变化，使用 resize 事件是行不通的。此时，我们可以使用 esm-detect-element-resize 这个 npm 包。
esm-detect-element-resize 的简介
esm-detect-element-resize 是一个用于监听元素大小变化的 npm 包。它能够支持非窗口元素的大小监测，全面覆盖了 resize 事件的局限。
esm-detect-element-resize 能够检测元素的大小变化，并且可以支持对多个元素进行监听。和其他的大多数监测方案相比，esm-detect-element-resize 具有更高的性能和更好的兼容性。
怎么使用 esm-detect-element-resize？
安装
首先在终端中执行以下命令进行安装：
npm install esm-detect-element-resize --save
这个命令将会下载依赖包，并将其保存在项目中。
使用
初始化 esm-detect-element-resize：
import { createResizer } from "esm-detect-element-resize";
const myResizer = createResizer();上述代码使用 createResizer 方法初始化了一个 resizer 对象，用于后面的元素大小监测。
现在，我们可以使用以下代码来开始监听元素大小变化：
const element = document.querySelector(".my-element");
myResizer.listenTo(element, size => {
console.log(`Element size is ${size.width}x${size.height}`);
});在上述代码中，我们使用了 listenTo 方法来监听元素的大小变化。listenTo 方法的第一个参数是需要监听的元素，第二个参数是回调函数，用于获取元素的大小信息。
我们可以使用 unlisten 方法来停止对元素大小变化的监听：
myResizer.unlisten(element);
需要注意的是，如果我们有需要同时监听多个元素的大小变化，可以使用以下代码：
const elements = document.querySelectorAll(".my-element");
for (const element of elements) {
myResizer.listenTo(element, size => {
console.log(`Element size is ${size.width}x${size.height}`);
});
}示例代码
-- -------------------- ---- ------- ------ - ------------- - ---- ---------------------------- ----- --------- - ---------------- ----- ------- - -------------------------------------- --------------------------- ---- -- - -------------------- ---- -- ------------------------------- --- ----------------------------
总结
esm-detect-element-resize 是一个非常方便实用的 npm 包，它能够让我们在监听元素大小变化时更加灵活。在日常前端开发中，它可以帮助我们解决许多问题，尤其是在对非窗口元素的大小监测上。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005626181e8991b448dfa72