使用一个例子来研究 map 操作符的工作原理。
推荐阅读本文之前，先浏览这篇文章RxJs fromEvent 工作原理分析以了解相关知识。
源代码：
import { Component, OnInit, Inject } from '@angular/core';
import { fromEvent, combineLatest } from 'rxjs';
import { mapTo, startWith, scan, tap, map } from 'rxjs/operators';
import { DOCUMENT } from '@angular/common';
@Component({
selector: 'app-combine-latest',
templateUrl: './combine-latest.component.html'
})
export class CombineLatestComponent implements OnInit {
readonly document: Document;
constructor(
// https://github.com/angular/angular/issues/20351
@Inject(DOCUMENT) document: any) {
this.document = document as Document;
}
redTotal:HTMLElement;
blackTotal: HTMLElement;
total:HTMLElement;
test:HTMLElement;
ngOnInit(): void {
this.redTotal = this.document.getElementById('red-total');
this.blackTotal = this.document.getElementById('black-total');
this.total = this.document.getElementById('total');
this.test = this.document.getElementById('test');
combineLatest(this.addOneClick$('red'),
this.addOneClick$('black')).subscribe(([red, black]: any) => {
this.redTotal.innerHTML = red;
this.blackTotal.innerHTML = black;
this.total.innerHTML = red + black;
});
fromEvent(this.test, 'click').pipe(map( event => event.timeStamp)).subscribe((event) => console.log(event));
}
addOneClick$ = id =>
fromEvent(this.document.getElementById(id), 'click').pipe(
// map every click to 1
mapTo(1),
// keep a running total
scan((acc, curr) => acc + curr, 0),
startWith(0)
);
} 
先缕一缕顺序：
- 首先执行fromEvent，返回一个 Observable 对象。
- 执行 map 操作符，其结果作为输入，传入 pipe
- 只是返回一个新的 Observable 对象，其 source 属性指向调用 lift 操作的原始 Observable 对象，而 operator 属性指向 new MapOperator 返回的结果，后者是 project 的 wrapper.
如此一来，调用 subscribe 方法注册应用程序监听函数的 Observable 对象，再也不是 fromEvent 返回的原始 Observable 对象，而是前者调用了 pipe，接收了 map 指定的 project 之后，由 source.lift( new MapOperator) 返回的新 Observable 对象。
这段代码，定义了 fromEvent，以什么样的方式，emit 何种类型的数据。
- 什么样的方式？addEventListener，每次 eventTarget 定义的 HTMLElement 发生 click 事件时，emit 数据
- emit 的数据格式为 MouseEvent.
- 至此 Observable 相关的 setup 执行完毕。
点击按钮，触发之前通过 addListener 注册的 handler 函数。fromEvent.js 此处 subscriber 不是原始的 subscriber，而是 MapSubscriber，其 destination 属性的 _next, 指向了应用程序指定的订阅处理逻辑。Emit 的数据是 MouseEvent.
