javascript - 为什么引入 `ResizeObserver` 来监听调整大小的变化而不是更简单的 Element.prototype.addEventListener ('resize' ，回调)

Question

我有点惊讶，为了监听元素尺寸(不是窗口对象)的变化，我们必须使用一个名为 ResizeObserver 的新接口(interface)。虽然它似乎做得很好；这似乎与其他元素相关的事件有点不同，这些事件只需添加一个监听器即可使用。

例如添加一个事件监听器来监听鼠标悬停事件

document.querySelector('#ele').addEventListener('mouseover', callback);

为什么不简单地向元素上的调整大小事件添加一个新的监听器？

document.querySelector('#ele').addEventListener('resize', callback);

是为了避免和window resize事件冲突吗？如果是这样，为什么不换个名字呢

document.querySelector('#ele').addEventListener('elementResize', callback);

我知道创建辅助方法来简化 ResizeObserver 的使用很容易。类似的东西可以像原始的 addEventListener 方法一样简单易用

export const getResizeObserver = ( ele, onResize ) => {
  let obs;

  const observerInterface = {
    stop: () => { obs.unobserve( ele ); obs.disconnect() },
  };

  obs = new ResizeObserver( entries => {
    for ( const entry of entries ) {
      onResize && onResize( entry.contentRect );
    }
  } );

  obs.observe( ele );

  return observerInterface;
};

// usage to add the listener
const obs = getResizeObserver(document.querySelector('#ele'), callback);
// later to remove the listener
obs.stop();

在任何情况下，除了 api 首选项和几个元素可以共享观察者实例之外，还有什么理由使 ResizeObserver 方法比 addEventListener 更好 方法？

Answer 1

有讨论in this PR其中 W3C 技术架构组试图定义何时在 EventTarget 上使用观察者模式。 .此讨论的输出记录在案 here ，我引用了第一个声明:

In general, use EventTarget and notification Events, rather than an Observer pattern, unless an EventTarget can’t work well for your feature.

与 EventTarget 相比，使用观察者模式的优势如下:

1. Instances can be customized at observation time or at creation time. The constructor for an Observer, or its observe() method, can take options allowing authors to customize what is observed for each callback. This isn’t possible with addEventListener().

2. It’s easy to stop listening on multiple callbacks using the disconnect() or unobserve() method on the Observer object.

3. You have the option to provide a method like takeRecords(), which immediately fetches the relevant data instead of waiting for an event to fire.

4. Because Observers are single-purpose, you don’t need to specify an event type.

具体谈论ResizeObserver，在我看来:

• 第二点和第四点不太相关。它不会添加或采取任何重要的事情，我认为 resize 事件在这里会更好。

• 它仍然没有实现 takeRecords() 方法，所以 3d 点无关紧要

它使我们能够在创建和观察时对其进行自定义，并允许稍后更改这些自定义 API 而无需更改 Event模型。

此外，还可能存在性能问题或 an unavoidable recursion ，但我没有找到关于它们的任何测量值或解释。