javascript - 原生 HTMLElement 属性观察器

Question

希望你们一切都好! 我有一个小问题，也许你们很多人已经考虑过...... 是否有任何解决方案可以监听 native HTMLElement 属性(而不是属性)更新？ 我解释一下:

<input type="text" value="hello" />

当代码库中的某些内容执行此操作时，我希望收到通知:

myInput.value = 'world';

我可以知道属性本身已使用 MutationObserver 或 attributeChangedCallback 函数进行了更新，但当代码库直接通过属性分配值时则不然......

我尝试过做这样的事情:

Object.defineProperty(myInput, 'value', {
   set : (newValue) => {
      console.log('value property updated');
      // I can't do something like this.value = newValue
      // cause it will trigger an infinite loop...
   }
});

问题是现在 myInput.value = 'world'; 的默认行为不再起作用，并且该值在字段内实际上没有改变...

我想将这个概念应用于其他属性，例如“min”，“max”，“placeholder”等......

总之，我只想观察一些属性而不更改其任何默认行为......

有什么想法吗？

提前谢谢大家!

干杯!

Answer 1

您需要原生化 property descriptor第一的。您可以从元素的原型(prototype)中获取一个。

const nativeValueDesc = Object.getOwnPropertyDescriptor(input.constructor.prototype, 'value');

然后您可以在 setter 和 getter 中使用它来反射(reflect) native 行为

Object.defineProperty(input,'value',{
  set(val){
    console.log('value property updated', val);
    // Continue with native behavior
    return nativeValueDesc.set.call(this, val);
  }
  /* ... */
});

实时示例 http://jsbin.com/juqili/6/edit?html,js,console,output

为了能够观察已经观察到的元素，或者只是一个已经提供了自己的描述符的元素，你可以这样做

const nativeValueDesc = Object.getOwnPropertyDescriptor(input, 'value') || Object.getOwnPropertyDescriptor(input.constructor.prototype, 'value');