javascript - MutationObserver 使用的一些实际例子是什么？

Question

这个 API 中最令人困惑的事情是对我来说使用它的原因。我知道 ReactJS 和 RxJS，当视图对数据变化做出反应时，我已经习惯了这个概念。因此，观察 DOM 的变化，这肯定是在数据发生一些突变之后发生的，我看不出它有多大意义。所以我的问题是什么时候（不）使用它？

Answer 1

您正在考虑的问题是您已经领先一步的情况。如果您使用React/RxJS那么实际值MutationObserver很可能非常小。

然而，即使在此范围内，也有明显的可能性利用这一点。假设你试图在你的 React 应用程序中使用一个没有为它显式构建的库，并以某种方式修改 DOM，但想要进一步扩展它或从中捕获一些东西。最好的例子是进一步增强FancyGrid。

目前，在一个组件中，您可以在 中调用这样的库componentDidMount，与构建上述组件的方式相同。然而，这只是一劳永逸——你不知道它何时执行完毕，你甚至不知道“外部”发生了什么。

输入MutationObserver。有了它，在将此类库绑定到元素之前，您可以使用观察者来通知元素何时创建、跟踪它们并跟踪属性更改。最简单的用例是在（特别是加载时耗时）网格上方制作微调器。