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 写法就是个合格的后端开发者, 只会返回前端需要的数据.