Javascript 给定的ResizeObserver可以观察到哪些元素？

摘要：有没有办法获取给定用户当前观察到的元素列表

假设现有的ResizeObserver观察某些元素

let observer = new ResizeObserver(_ => _.forEach(_ => console.log(_.contentBoxSize[0])));
observer.observe(document.getElementById('my-element-1');
observer.observe(document.getElementById('my-element-2');

有没有办法获得ResizeObserver观察到的元素

observer.getObservedElements() === [ // this API does not exist
  document.getElementById('my-element-1'),
  document.getElementById('my-element-2')
];

我会使用这样一个API的用例（可能还有更多）：

• 考虑一个在整个应用程序中共享的通用ResizeObserver，它对所有观察到的元素执行相同的操作（例如，触发框架内部的“元素调整大小”事件）。没有人知道已经观察到了哪些元素。但是我必须确保没有已经观察到的元素被再次观察到（否则我会得到两次“调整大小事件”）
• 出于测试目的，我需要断言一个元素被观察到。模拟ResizeObserver需要花费大量精力，并且可能会干扰其他需要真正ResizeObserver的组件

---

我是不是错过了什么？我只看到

observe（）

，

unobserve（）

和

disconnect（）

，这样一个API的问题是，它会阻止观察到的元素被垃圾回收，即使实现（至少是Chrome）目前不服务于其他地方没有引用的目标元素。 如果他们必须公开正在观察的元素，他们需要将其保留在列表中，并伴随着潜在的内存泄漏

尽管对于您自己的测试用例，您可能会覆盖

observe

和

unobserve

方法来更新附加到观察者的集合：

（函数（）{
const targets=new WeakMap（）；
Object.defineProperty（ResizeObserver.prototype，“targets”，{
得到（）{
让插槽=目标[此]；
如果（！插槽）{
插槽=新设置（）
目标[此]=插槽；
}
返回槽；
}
} );
const original_observe=resizeobservator.prototype.observe；
const original_unobserve=ResizeObserver.prototype.unobserve；
ResizeObserver.prototype.observe=函数（元素，…参数）{
此.targets.add（elem）；
返回原始的观察调用（this，elem，…args）；
};
ResizeObserver.prototype.unobserve=函数（元素，…参数）{
此.targets.delete（elem）；
返回原始的观察调用（this，elem，…args）；
};
})();
const observer=new ResizeObserver（（条目）=>console.log（“大小更改”）；
observer.observe（document.getElementById（“target1”））；
observer.observe（document.getElementById（“target2”））；
observer.unobserve（document.getElementById（“target1”）；
console.log（[…observer.targets]）；//#target2

[id^=“target”]{边框：1px实体；高度：计算（50%-4px）；}
.可调整大小的容器{
宽度：50vw；
高度：50vh；
调整大小：两者；
溢出：自动；
}