javascript - 观察 DOM 属性的变化

Question

我想知道任意对象的某些属性何时发生变化。

我读到了这个问题的答案:“extend setter default object”，它似乎建议使用 getter 和 setter 的解决方案。但是，我尝试使用它来捕获 DOM 对象的 id 和 style 属性的更改，但它不起作用。我观察到的一件奇怪的事情是，一旦我为 id 字段创建 setter，原始 id 字段就会消失，因此尝试读取或写入该值会失败。由于该属性可能是 DOM 属性，有时不是简单的变量，因此我不能简单地创建自己的变量，因为我不能任意重新创建生成该值的任何底层功能。

我真正想做的就是检测属性何时发生更改，并透明地传递更改。

一些进一步的研究使我来到了这个页面presenting a polyfill for Object.watch 。然而，虽然这个监视函数似乎让我看到对象的属性何时发生变化，但实际属性最终根本没有改变。

Answer 1

您可以使用mutation observers观察属性的变化。这对于获取/设置标记属性的 DOM 属性非常有效。与突变事件相比，突变观察者在实际突变发生后运行很长时间，而不是立即运行。我读到突变观察者的表现比突变事件更好。

当您重新定义属性时，您还提出了如何访问原始 getter/setter 的问题。如果您使用突变观察器解决方案，则无需担心这一点。在某些浏览器(例如 Firefox)中，像 id 这样的属性的原始功能也被实现为 getter/setter。例如，如果您运行 Object.getOwnPropertyDescriptor(Element.prototype, 'id').set.call(myElement, 'asdf')，则类似于 myElement.id = 'asdf '，即使 myElement.id 已重新定义。有些浏览器不这样做。例如， Chrome 是 still working关于实现this aspect Web IDL。