Rxjs學(xué)習(xí)之路
1、小貼士
這篇文章是我的Angular Rxjs Series中的第篇三文章，在繼續(xù)閱讀本文之前，您至少應(yīng)該熟悉系列中的第一篇基礎(chǔ)文章：
// 圖譜
// ----- 代表一個(gè)Observable
// -----X 代表一個(gè)Observable有錯(cuò)誤發(fā)生
// -----| 代表一個(gè)Observable結(jié)束
// (1234)| 代表一個(gè)同步Observable結(jié)束
// 特別提示：以下的操作符介紹均采用rxjs6的寫法?。。?2、take
take就是取前幾個(gè)元素后就結(jié)束
/**
* 例如： interval(1000).pipe(take(4))
* source: -----0-----1-----2-----3-----4--..
* take(4)
* newest -----0-----1-----2-----3|
*/
const takeObservable = interval(1000).pipe(
take(4)
);
takeObservable.subscribe({
next: (value) => { console.log('=====table操作符: ', value); },
error: (err) => { console.log('=====table操作符: Error: ', err); },
complete: () => { console.log('=====table操作符: complete!'); }
});
3、first
first就是取第一個(gè)元素后結(jié)束
/**
* 例如： interval(1000).pipe(first())
* source: -----0-----1-----2-----3--..
* first()
* newest: -----0|
*/
const firstObservable = interval(1000).pipe(
first()
);
firstObservable.subscribe({
next: (value) => { console.log('=====first操作符: ', value); },
error: (err) => { console.log('=====first操作符: Error: ', err); },
complete: () => { console.log('=====first操作符: complete!'); }
});
4、takeUntil
takeUntil就是等到某一件事情【Observable形式的】發(fā)生的時(shí)候，讓當(dāng)前O1bservable 直送出完成(complete)信號(hào)
/**
* 例如： interval(1000).pipe(takeUntil(click))
* source: -----0-----1-----2-----3--..
* click: --------------------c-----
* takeUntil(click)
* newest: -----0-----1-----2--|
*/
const clickObservable = fromEvent(
document.getElementById('game'),
'click'
);
const takeUnitlObservable = interval(1000).pipe(
takeUntil(clickObservable)
);
takeUnitlObservable.subscribe({
next: (value) => { console.log('=====takeUntil操作符: ', value); },
error: (err) => { console.log('=====takeUntil操作符: Error: ', err); },
complete: () => { console.log('=====takeUntil操作符: complete!'); }
});
5、concatAll
有的時(shí)候我們的Observable里的元素還是Observable（Observable<Observable<T>>）,可以類似數(shù)組里邊的元素還是數(shù)組（[[1,2], [3, 4]]）,這個(gè)時(shí)候我們希望是二維變成一維（[1, 2, 3, 4]），即：Observable<T>，concatAll就是用來攤平的。
/**
* 必須先等前一個(gè)observable完成(complete)，才會(huì)繼續(xù)下一個(gè)
* 例如：Observable里邊還是Observable
* click: ------------c------------c-----...
* map(e => of(1,2,3))
* source: ------------o------------o-----...
* \ \
* (1,2,3)| (1,2,3)|
* concatAll()
* newest: ------------(1,2,3)------(1,2,3)--..
*/
const eventObservable = fromEvent
document.getElementById('egg'),
'click'
);
const mapObservable = eventObservable.pipe(
map(x => of(1, 2, 3))
);
const concatAllObservable = mapObservable.pipe(
concatAll()
);
concatAllObservable.subscribe({
next: (value) => { console.log('=====concatAll操作符: ', value); },
error: (err) => { console.log('=====concatAll操作符: Error: ', err); },
complete: () => { console.log('=====concatAll操作符: complete!'); }
});
完整的例子
例子里邊有一個(gè)拖拉的example，將上一篇文章的map以及本文的takeUntil、concatAll結(jié)合起來的綜合例子，可以參考
import { Component, OnInit, OnDestroy, Renderer2 } from '@angular/core';
import { Subscription, interval, fromEvent, of } from 'rxjs';
import { take, first, takeUntil, map, concatAll } from 'rxjs/operators';
@Component({
selector: 'app-rxjs-demo',
template: `
<h3>Rxjs Demo To Study! -- Operators操作符(take, first, takeUntil, concatAll)</h3>
<button (click)="takeHandler()">take</button>
<button class="mgLeft" (click)="firstHandler()">first</button>
<button class="mgLeft" (click)="takeUntilHandler()">takeUntil</button>
<button class="mgLeft" (click)="concatAllHandler()">concatAll</button>
<button class="mgLeft" id="game">click me end Game</button>
<button class="mgLeft" id="egg">click egg</button>
<div class="drag" id="drag">drag me</div>
<app-back></app-back>
`,
styles: [`
.mgLeft {
margin-left: 20px;
}
.drag {
width: 70px;
height: 24px;
font-size: 12px;
text-align: center;
background: #EEE;
line-height: 24px;
cursor: default;
border-radius: 4px;
position: absolute;
left: 580px;
top: 155px;
}
`]
})
export class RxjsDemoComponent implements OnInit, OnDestroy {
takeSubscription: Subscription;
firstSubscription: Subscription;
takeUnitlSubscription: Subscription;
concatAllSubscription: Subscription;
dragSubscription: Subscription;
constructor(
private renderer: Renderer2
) { }
ngOnInit(): void {
// 圖譜
// ----- 代表一個(gè)Observable
// -----X 代表一個(gè)Observable有錯(cuò)誤發(fā)生
// -----| 代表一個(gè)Observable結(jié)束
// (1234)| 代表一個(gè)同步Observable結(jié)束
// 簡易拖拉
const mouseDown = fromEvent(document.getElementById('drag'), 'mousedown');
const mouseMove = fromEvent(document.body, 'mousemove');
const mouseUp = fromEvent(document.body, 'mouseup');
const drag = mouseDown.pipe(
map(_ => mouseMove.pipe(takeUntil(mouseUp))),
concatAll(),
map((event: MouseEvent) => ({x: event.clientX, y: event.clientY}))
);
this.dragSubscription = drag.subscribe({
next: (value) => {
console.log('=====drag: ', value);
const dragDom = document.getElementById('drag');
console.log('dragDom', dragDom);
// 第一種寫法：angular封裝
// this.renderer.setStyle(
// dragDom,
// 'top',
// `${value.y}px`
// );
// this.renderer.setStyle(
// dragDom,
// 'left',
// `${value.x}px`
// );
// 第二種寫法：原生JS支持
dragDom.style.left = value.x + 'px';
dragDom.style.top = value.y + 'px';
},
error: (err) => { console.log('=====drag: Error: ', err); },
complete: () => { console.log('=====drag: complete!'); }
});
}
takeHandler() {
/**
* 例如： interval(1000).pipe(take(4))
* source: -----0-----1-----2-----3-----4--..
* take(4)
* newest -----0-----1-----2-----3|
*/
const takeObservable = interval(1000).pipe(take(4));
this.takeSubscription = takeObservable.subscribe({
next: (value) => { console.log('=====table操作符: ', value); },
error: (err) => { console.log('=====table操作符: Error: ', err); },
complete: () => { console.log('=====table操作符: complete!'); }
});
}
firstHandler() {
/**
* 例如： interval(1000).pipe(first())
* source: -----0-----1-----2-----3--..
* first()
* newest: -----0|
*/
const firstObservable = interval(1000).pipe(first());
this.firstSubscription = firstObservable.subscribe({
next: (value) => { console.log('=====first操作符: ', value); },
error: (err) => { console.log('=====first操作符: Error: ', err); },
complete: () => { console.log('=====first操作符: complete!'); }
});
}
takeUntilHandler() {
/**
* 例如： interval(1000).pipe(takeUntil(click))
* source: -----0-----1-----2-----3--..
* click: --------------------c-----
* takeUntil(click)
* newest: -----0-----1-----2--|
*/
const clickObservable = fromEvent(document.getElementById('game'), 'click');
const takeUnitlObservable = interval(1000).pipe(takeUntil(clickObservable));
this.takeUnitlSubscription = takeUnitlObservable.subscribe({
next: (value) => { console.log('=====takeUntil操作符: ', value); },
error: (err) => { console.log('=====takeUntil操作符: Error: ', err); },
complete: () => { console.log('=====takeUntil操作符: complete!'); }
});
}
concatAllHandler() {
/**
* 必須先等前一個(gè)observable完成(complete)，才會(huì)繼續(xù)下一個(gè)
* 例如：Observable里邊還是Observable
* click: ------------c------------c-----...
* map(e => of(1,2,3))
* source: ------------o------------o-----...
* \ \
* (1,2,3)| (1,2,3)|
* concatAll()
* newest: ------------(1,2,3)------(1,2,3)--..
*/
const eventObservable = fromEvent(document.getElementById('egg'), 'click');
const mapObservable = eventObservable.pipe(map(x => of(1, 2, 3)));
const concatAllObservable = mapObservable.pipe(concatAll());
this.concatAllSubscription = concatAllObservable.subscribe({
next: (value) => { console.log('=====concatAll操作符: ', value); },
error: (err) => { console.log('=====concatAll操作符: Error: ', err); },
complete: () => { console.log('=====concatAll操作符: complete!'); }
});
}
ngOnDestroy() {
if (this.takeSubscription) {
this.takeSubscription.unsubscribe();
}
if (this.firstSubscription) {
this.firstSubscription.unsubscribe();
}
if (this.takeUnitlSubscription) {
this.takeUnitlSubscription.unsubscribe();
}
if (this.concatAllSubscription) {
this.concatAllSubscription.unsubscribe();
}
if (this.dragSubscription) {
this.dragSubscription.unsubscribe();
}
}
}
Marble Diagrams【寶珠圖】
1. 這個(gè)Marble Diagrams【寶珠圖】可以很靈活的表現(xiàn)出每個(gè)操作符的使用
2. 下面是超鏈接傳送門
