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 模式

Read the theory here

并且您可以使用已经构建的解决方案，例如 RxJS's observer

Answer 2

另一种选择是使用 Javascript 框架，如 AngularJS 或 VueJS。这些框架中的任何一个都可以让添加这样的东西变得非常简单：

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

监听 JavaScript 中的变量值变化

2 个答案: