如何从订户执行dom操作而没有副作用RxJS？

Question

方案

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

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

问题

• 为什么会这样？
• 如何定义清除订阅而不会对其他订阅者产生副作用？

代码

＆＃13;

＆＃13;

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);
  }
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

预期产出

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;

我做了两处修改：

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

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