如何将 ResizeObserver 用于多种行为

Question

似乎ResizeObserver 最适合在您有一个实例管理许多元素的行为时使用（正如"ResizeObserver one vs multiple performance" 中的one of the sources 中指出的那样）：

在 2 秒的宽度/高度动画期间观察 126 个 div 的大小。

1. 所有元素都由单个 ResizeObserver 观察。

   总观察时间：69ms

2. 每个元素都由单独的 ResizeObserver 观察。

   总观察时间：585ms

但是，据我所知，您只能为ResizeObserver 的实例真正指定一个行为，然后针对它所观察的任何元素运行该行为。 我应该如何观察具有不同行为的多个元素？据我所知，我可以：

• 使用ResizeObserver 的单个实例并在运行时确定应该对给定元素使用什么行为（这似乎不必要的复杂，而且我不知道比较元素引用在生产中的可靠性如何），或者
• 使用ResizeObserver 的多个实例，这会使行为更简单，但理论上会降低性能。

另外，使用多个ResizeObserver 实例的性能损失是否甚至是我应该担心的中小型规模？

Answer 1

...在运行时找出应该对给定元素使用什么行为（这似乎不必要地复杂，而且我不知道比较元素引用在生产中的可靠性如何）...

我认为这不需要特别复杂。

您可以拥有一组行为，每个行为都有一个predicate 函数和一个handler 函数。谓词确定它是否适用于给定元素，并且处理程序执行该行为。 （如果你有成千上万的行为，这可能不是超级性能，但我假设你没有。）

类似的东西？

const behaviors = [
  {
    predicate: element => element.classList.contains('first'),
    handler: element => {
      // do stuff
    }
  },
  {
    predicate: element => element.classList.contains('second'),
    handler: element => {
      // do other stuff
    }
  },
];

const observer = new ResizeObserver((entries) => {
    for (let entry of entries) {
      // for single behavior
      behaviors.find(b => b.predicate(entry))?.handler(entry);
      
      // or every applicable behavior
      behaviors
        .filter(b => b.predicate(entry))
        .forEach(b => b.handler(entry);
    }
})