rxjs学习笔记: 加減法

用 rxjs 实现一个简单的加减法

HTML部分:

<button id="btn1">Add</button>
<span id="display">0</span>
<button id="btn2">Minus</button>

Javascript部分:

import { merge, fromEvent } from 'rxjs';
import { mapTo, scan } from 'rxjs/operators';

const addButton = document.getElementById('btn1');
const minusButton = document.getElementById('btn2');
const state = document.getElementById('display');

const add$ = fromEvent(addButton, 'click').pipe(mapTo(1));
const minus$ = fromEvent(minusButton, 'click').pipe(mapTo(-1));

merge(add$, minus$)
  .pipe(scan((cur, res) => cur + res))
  .subscribe((e) => {
    state.innerHTML = String(e);
  });

在线Demo:

参考:

https://blog.jerry-hong.com/series/rxjs/thirty-days-RxJS-12/