如何使用观察者来模拟事件？答案

【问题标题】：How can I use an observer to simulate an event?如何使用观察者来模拟事件？
【发布时间】：2021-08-20 19:41:12
【问题描述】：

我最初使用let foo = Subject<void> 来模拟一个事件。我创建了一个主题并简单地将其命名为foo.next()。每个订阅者都收到了消息，一切都很好。

今天我了解到这种技术有效，但不适合使用。正如this article 所述，这是初学者造成的误解……举手……有罪。

底线是，“这不是真正的“Rx 方式””。因此，我查看了Observable。下面给出简单的代码示例：

var observable = Rx.Observable.create(function (observer) {
  observer.next(1);
  observer.next(2);
  observer.next(3);
  setTimeout(() => {
    observer.next(4);
    observer.complete();
  }, 1000);
});

console.log('just before subscribe');
observable.subscribe({
  next: x => console.log('got value ' + x),
  error: err => console.error('something wrong occurred: ' + err),
  complete: () => console.log('done'),
});
console.log('just after subscribe');

上面的这个例子很简单，但我不明白如何使用它来模拟事件。我只看到在发送1、2、...的范围内使用的观察者。

我如何将它连接到例如按钮或点击事件？我应该在可观察对象之外使用传递的observer 实例吗？

【问题讨论】：

这能回答你的问题吗？ How do you get an Observable of a Event?
感谢分享！不幸的是，我正在寻找一个更一般的解释 Observable 是如何工作的。主题完全按照我假设的方式工作。 Observable 实际上没有什么不同，我不明白为什么

标签： javascript typescript rxjs observable

【解决方案1】：

如果你想从一个 DOM 事件创建一个Observable，你应该使用fromEvent 操作符，它的第一个参数是对 DOM 节点的引用，第二个参数是事件名称。

使用示例：

const element = document.getElementById(...); // Or any other code that returns a DOM node

const obs = fromEvent(element, 'click');

【讨论】：

谢谢！我已经看过fromEvent，我的问题确实围绕着这个话题。但我的目标是大致了解 Observables 的使用或行为。 Subject 完全按照我的假设工作。另一方面，Observable 则没有（尽管它们都是相关的）。
一个 observable 与一个主题没有什么不同，它只是它的可订阅部分。通常，您不应该尝试创建主题，而是从您正在使用的框架和库中检索 observables，或者像 fromEvent 这样的 rxjs 运算符