RxJS - map 操作符用法

获取鼠标点击坐标

1. 常规写法:

document.addEventListener("click", (e) => {
  console.log([e.clientX, e.clientY]);
});

2. RxJS 写法(使用 map 操作符):

import { fromEvent, map } from "rxjs";

fromEvent(document, "click")
  .pipe(
    map((e) => {
      const { clientX, clientY } = e as MouseEvent;
      return [clientX, clientY];
    })
  )
  .subscribe((position) => {
    console.log(position);
  });

这么看, Rx 的写法并不比传统写法更简洁. 但实际上, Rx 却更加优雅. 原因是参数 e 并不会全部暴露出来. 传统做法里, e 是整个暴露给后续代码的. 而 Rx 是将 e 捕获后只取其中的 clientX 和 clientY, 再发送给订阅者. 这样订阅者所获得的数据会更加的具体.
可以打个比方: 传统写法就像一个差的后端开发者, 写的接口数据全返回给前端, 就算前端不要的也返回. 而 RxJS 写法就是个合格的后端开发者, 只会返回前端需要的数据.