javascript - 如何从订阅者执行 dom 操作而不产生 RxJS 副作用？

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 处更改:

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

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