对于开发前端页面，经常需要对元素进行调整大小并相应地对页面布局进行调整。resize-observer-lite 是一个基于 ResizeObserver 并支持桌面和移动设备的轻量级 JavaScript 库，可以帮助我们实现元素大小的观察。
安装和使用
可以通过 npm 进行安装：
npm install resize-observer-lite
安装完成后，在你的项目中引入该库：
import ResizeObserverLite from 'resize-observer-lite';
接着，你可以创建一个 ResizeObserver 的实例：
const myRo = new ResizeObserverLite((entries) => {
entries.forEach((entry) => {
console.log(
`${entry.target} changed size to ${entry.contentRect.width}px x ${entry.contentRect.height}px`
);
});
});在这个实例中，我们通过一个回调函数进行处理，将观察到的元素大小信息打印在控制台中。
接着，我们需要关联需要观察的元素：
myRo.observe(document.querySelector('div'));这里我们使用了 querySelector 来获取需要观察的元素。你也可以使用其他选择器来获取你需要的元素。
最后，当不需要观察该元素时，可以使用 unobserve 方法来停止观察：
myRo.unobserve(document.querySelector('div'));API
ResizeObserverLite 支持如下 API：
ResizeObserverLite(callback)创建一个 ResizeObserver 的实例。callback：一个回调函数，当观察到需要观察的元素大小改变时，将被执行。该回调函数有一个参数，即观察到的元素信息ResizeObserverEntry[]。
observe(target)观察一个元素。需要观察的元素必须是 DOM 元素。target：需要观察的元素。
unobserve(target)停止观察一个元素。target：需要停止观察的元素。
disconnect()停止观察所有元素，并释放所有资源。
示例代码
下面是一个完整的示例代码：
-- -------------------- ---- -------
------
---- ------------------
------- --------------
------ ------------------ ---- -----------------------
----- ---- - --- ---------------------------- -- -
----------------------- -- -
------------
---------------- ------- ---- -- ---------------------------- - ------------------------------
--
---
---
--------------------------------------------
---------
-------在这个示例代码中，我们创建了一个 div 元素，并使用 querySelector 获取该元素。接着，我们使用 ResizeObserverLite 创建了一个 ResizeObserver 的实例，并将该实例关联到了该 div 元素。最后，当该元素大小发生变化时，我们将观察到该信息并将其打印在控制台中。
结论
通过使用 resize-observer-lite，我们可以轻松地监测元素大小的变化。这对于前端页面布局调整等需求非常有用。在使用该库时，请确保你的项目支持 ResizeObserver，否则可以使用 polyfill 进行支持。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/resize-the-observer-lite