如何告诉 javascript Web 应用程序始终关注变量状态的变化？ [复制]答案

【问题标题】：how to tell a javascript web app to always watching to the change of state of a variable? [duplicate]如何告诉 javascript Web 应用程序始终关注变量状态的变化？ [复制]
【发布时间】：2020-07-23 12:47:32
【问题描述】：

我正在尝试学习反应式编程。我正在模拟布尔变量的时间变化。这个想法是，我不知道它什么时候会改变，但我希望应用程序执行一个 console.log 说变量是真的，每次它从false 更改为true。我这样做了：

let x = false

setInterval(function(){ 
   x = !x;
 }, 3000);

我无法弄清楚告诉应用程序在x 变量的状态和每次x == true 时触发console.log("now it's true") 的方法。

实现它的最简单方法是什么？我想我可以使用 observables 来做到这一点，但是，我有点卡住了。

感谢您的帮助。

【问题讨论】：

标签： javascript reactive-programming

【解决方案1】：

首先，你应该明白，没有人用纯 js 写来使用“反应式编程” :) 有很多库，例如 React、Vue、Angular，它们实现了反应性。

我认为有一些基本方法，JS 中的每个反应性实现都基于这些方法：

制作一个包装器，例如这样：

  const obj = {
    x: true,
    setX(value) {
      this.x = value;
      // You can track x value here
    },
  };

  obj.setX(false);

使用 es5 规范中的 getter 和 setter，下面是一个示例：

const obj = {
  _x: 5,
  get x() {
    return this._x;
  },
  set x(value) {
    this._x = value;
    // You can track x value here
  },
};

obj.x = 6;

使用 es6 规范中的代理 - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy；

【讨论】：

你能给我提供一个工作 sn-p 的例子吗？
你是什么意思？在我的回答中，我已经做到了。您可以将这些代码片段粘贴到任何 JS 操场上并查看结果 :) 如果您想要代理示例，那么在 mdn 上它们是存在的。如果您想成为一名真正的技能程序员，您应该提高处理任何类型文档的技能。

【解决方案2】：

我也是响应式编程的新手。

我会说你使用 observable 是正确的。而不是你的 setInterval 只是设置 x = !x，让它做这样的事情

例如我没有运行它。

private xSubject = new ReplaySubject<any> (bufferSize:1);
private xReadySubject: Observable<any> = this.xSubject.asObservable();

...
// In the setInterval 
this.xSubject.next(!x);

xReadySubject.subscribe(argX => {
 console.log("Value of x: " + argX
});

【讨论】：

【解决方案3】：

我发现它正在工作

let x = false

setInterval(function(){ 
   x = !x;
console.log(x);
 }, 1000);

【讨论】：