2. main() 函数及 effects

假定我们的计时器不只想要和 DOM 交互，还想与控制台（console）交互，可以这样写：

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

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

查看示例

但是这么写不太灵活，更好的做法是定义一个 main() 方法输出我们的逻辑，定义若干个 effects 函数接收这个逻辑来和对应的外部对象进行交互：

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

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

function consoleLogEffect(msg$) {
  msg$.subscribe(msg => {
    console.log(msg);
  });
}

const sink = main();
DOMEffect(sink);
consoleLogEffect(sink);

查看示例

sink 翻译过来是 “水槽” 的意思，这个水槽放入不同的外部环境，将引起不同的反应。