监听JavaScript中变量值的变化

Question

我还在学习JavaScript。我试图使一个仪表板像web应用程序，我不能决定一个最好的方式来听取状态的变化，并作出反应。我想到了这样的东西:

const onStateChange = () => {
// Call functions to react to given state's change here
// Change style
// Hide/show something
// etc.
};
const state = {
$value: false,
stateChanged() {
console.log(`State has changed to: ${this.$value}!`);
onStateChange();
},
get value() {
return this.$value;
},
set value(value) {
this.$value = value;
this.stateChanged();
},
};
state.value = true; // State has changed to: true!
state.value = false; // State has changed to: false!

我的想法是自动对变化做出反应，从(例如)'loading = true'到'loading = false'，并使用提供的函数处理它，而无需手动调用它。你认为这样做有意义吗?有什么潜在的问题吗?或者你对如何改进有什么建议吗?

Answer 1

你可以使用Observable模式

阅读这里的理论

，你可以使用已经构建的解决方案，比如RxJS的observer

Answer 2

另一个选择是使用像AngularJS或VueJS这样的Javascript框架。这两种框架都可以很容易地添加如下内容:

<p>The current state is {{stateValue}}.</p>