1. 隔离逻辑与副作用

我们想在页面中实现一个计时器功能，利用 RxJS，这不难做到：

Rx.Observable.timer(0, 1000)
  .map(i => `Seconds Elapsed ${i}`)
  .subscribe(text => {
    const $app = document.querySelector('#app');
    $app.textContent = text;
  });

查看示例

该代码可以切割成两部分：

• Logic：逻辑部分，这部分与外部世界无关：

Rx.Observable.timer(0, 1000)
  .map(i => `Seconds Elapsed ${i}`)

逻辑部分是 函数式（functional） 的，它通过 map、filter 等运算子（operators）来完成任务。

• Effects：副作用部分，这部分与外部世界打交道，比如 DOM 元素：

  .subscribe(text => {
    const $app = document.querySelector('#app');
    $app.textContent = text;
  });

副作用部分则可以是 命令式（imperative） 的代码。

RxJs 还建议将 Observable 对象的订阅放置在外：

const text$ = Rx.Observable.timer(0, 1000)
  .map(i => `Seconds Elapsed ${i}`);

text$.subscribe(text => {
  const $app = document.querySelector('#app');
  $app.textContent = text;
});

查看示例