Javascript 如何从订阅服务器执行dom操作而不产生副作用RxJS？ 脚本

我有一个web组件，其中DOM操作是在内部处理的，不会暴露于外部世界。外部世界可以访问web组件提供的流

每当web组件发出有效值时，它应该在内部清除输入组件中的值。然而，这似乎对流有副作用

问题

• 为什么会发生这种情况
• 如何定义clear subscription而不对其他订阅服务器产生副作用

代码

const logExternally=createFakeComponentStream（）
.认购（logValue）；
函数createFakeComponentStream（）{
const inputStream=Rx.Observable.fromEvent(
document.querySelector（“[name='input']”），
"keyup")
.filter（event=>/enter/i.test（event.key））；
const valueStream=inputStream
.pluck（'src元素'，'value'）；
const logInternally=valueStream.subscribe（logValue）；
常量clearOnInput=inputStream
.pluck（'src元素'）
.订阅（clearInput）；
返回值流；
}
函数clearInput（输入）{
input.value=''；
}
函数logValue（值）{
如果（值）{
log（'Success:'，值）；
}否则{
console.log（'Failed:'，值）；
}
}

---

您正在通过可观察流传递DOM元素，并且您的一个订阅者正在修改DOM元素，因此当第二个观察者收到通知并检查DOM元素的值时，它已经被修改

为了避免这种情况，您需要在清除输入之前捕获值。大概是这样的：

const inputStream = Rx.Observable.fromEvent(
      document.querySelector("[name='input']"),
      'keyup')
    .filter(event => /enter/i.test(event.key))
    .map(event => ({ srcElement: event.srcElement, value: event.srcElement.value }))
    .share();

const valueStream = inputStream.pluck("value");
const logInternally = valueStream.subscribe(logValue);
const clearOnInput = inputStream.pluck("srcElement").subscribe(clearInput);
return valueStream;

我做了两个改变：

我使用

map

在流的早期捕获DOM元素的值

我使用

share

，以便将捕获的值与输入流的所有后续订阅共享

---

这两个更改将保护

valueStream

订户免受clearInput突变的影响。

我从原始代码中获取，可观察到的不是多播，因此每个流将独立评估输入的值。这是正确的吗？它在将元素传递给变异订户之前没有捕获值。还需要多播，以便只捕获一次值，而不是每个订户捕获一次。