如何在没有副作用 RxJS 的情况下从订阅者执行 dom 操作？

Question

场景

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

每次 Web 组件发出有效值时，它都应该在内部清除输入组件中的值。但是，这似乎对流有副作用。

问题

为什么会这样？
如何在不对其他订阅者产生副作用的情况下定义清晰的订阅？

代码

const logExternally = createFakeComponentStream()
  .subscribe(logValue);

function createFakeComponentStream() {
  const inputStream = Rx.Observable.fromEvent(
      document.querySelector("[name='input']"),
      'keyup')
    .filter(event => /enter/i.test(event.key));

  const valueStream = inputStream
    .pluck('srcElement', 'value');
    
  const logInternally = valueStream.subscribe(logValue);

  const clearOnInput = inputStream
    .pluck('srcElement')
    .subscribe(clearInput);

  return valueStream;
}


function clearInput(input) {
  input.value = '';
}

function logValue(value) {
  if (value) {
    console.log('Success:', value);
  } else {
    console.log('Failed:', value);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.4.2/Rx.js"></script>
<input type="text" name="input" value="" />

预期输出

Success: asdf
Success: asdf

实际输出

Success: asdf
Failed:

Answer 1

您正在通过可观察流传递 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;

我做了 2 处更改：

我使用 map 在流的早期捕获 DOM 元素的值
我使用 share 以便此捕获的值与输入流的所有后续订阅共享

这两项更改将使 valueStream 订阅者免受 clearInput 突变的影响。

如何在没有副作用 RxJS 的情况下从订阅者执行 dom 操作？

How to execute dom manipulation from a subscriber without side effect RxJS?

javascript

reactive-programming

rxjs

rxjs5

场景

问题

代码

预期输出

实际输出