Question

如何监视类变量在其实例中的更改？

我可以用setInterval()来达到目标，但是代码根本变得不可读。

let calibrator = new Calibrator("hardwareName");
calibrator.connect();

let monitoring = setInterval(() => {
    if (calibrator.getState()) { // calibrator.getState() will become true when there's response from hardware.
        clearInterval(monitoring);
        // lots of logic here
    } else {
        // lots of logic here
    }
}, 0);

我希望任何人只要简单地阅读代码就可以很容易地知道我正在尝试监视类变量。但是，就高级逻辑而言，clearInterval()与此无关。

所以我想要一种更好的方法。

Answer 1

是的。 Mutation Observer有一个API。您可以在这里阅读更多内容：

https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

// The DOM node to observe
const target = document.getElementById("your-id");

// Callback function when changes occurs
function callback(mutationRecord, observer) {}

// Create a new instance of MutationObserver with callback in params
const observer = new MutationObserver(callback);

// Setup config
const config = {
  childList: true
};

// When everything is ready, we just observe our target
observer.observe(target, config);

Answer 2

您可以使用Proxy：

class Foo {
  constructor() {
    this.bar = 0;
  }
  incrementBar() {  
    this.bar++;
  }
}

const handler = {
  set: (target, prop, val) => {
    console.log('prop:', prop, ' changed to:', val);
    target[prop] = val;
    return true;
  }
}


const obj = new Proxy(new Foo(), handler);

for(let i = 0; i < 5; i++){
  obj.fooo = i;
  obj.incrementBar();
}

有没有比使用setInterval（）检测JavaScript中的类变量更改更好的方法了？

2 个答案: