我們今天要接著講 take, first, takeUntil, concatAll 這四個(gè) operators硅则,并且實(shí)作一個(gè)簡(jiǎn)易的拖拉功能厚者。
Operators
take
take 是一個(gè)很簡(jiǎn)單的 operator因宇,顧名思義就是取前幾個(gè)元素后就結(jié)束葛作,范例如下
var source = Rx.Observable.interval(1000);
var example = source.take(3);
example.subscribe({
next: (value) => { console.log(value); },
error: (err) => { console.log('Error: ' + err); },
complete: () => { console.log('complete'); }
});
// 0
// 1
// 2
// complete
這裡可以看到我們的 source
原本是會(huì)發(fā)出無(wú)限個(gè)元素的箭窜,但這裡我們用 take(3)
就會(huì)只取前 3 個(gè)元素膀篮,取完后就直接結(jié)束(complete)嘹狞。
用 Marble diagram 表示如下
source : -----0-----1-----2-----3--..
take(3)
example: -----0-----1-----2|
first
first 會(huì)取 observable 送出的第 1 個(gè)元素之后就直接結(jié)束,行為跟 take(1) 一致誓竿。
var source = Rx.Observable.interval(1000);
var example = source.first();
example.subscribe({
next: (value) => { console.log(value); },
error: (err) => { console.log('Error: ' + err); },
complete: () => { console.log('complete'); }
});
// 0
// complete
用 Marble diagram 表示如下
source : -----0-----1-----2-----3--..
first()
example: -----0|
takeUntil
在實(shí)務(wù)上 takeUntil 很常使用到磅网,他可以在某件事情發(fā)生時(shí),讓一個(gè) observable 直送出 完成(complete)訊息筷屡,范例如下
var source = Rx.Observable.interval(1000);
var click = Rx.Observable.fromEvent(document.body, 'click');
var example = source.takeUntil(click);
example.subscribe({
next: (value) => { console.log(value); },
error: (err) => { console.log('Error: ' + err); },
complete: () => { console.log('complete'); }
});
// 0
// 1
// 2
// 3
// complete (點(diǎn)擊body了
這裡我們一開(kāi)始先用 interval
建立一個(gè) observable涧偷,這個(gè) observable 每隔 1 秒會(huì)送出一個(gè)從 0 開(kāi)始遞增的數(shù)值,接著我們用 takeUntil
速蕊,傳入另一個(gè) observable嫂丙。
當(dāng) takeUntil
傳入的 observable 發(fā)送值時(shí),原本的 observable 就會(huì)直接進(jìn)入完成(complete)的狀態(tài)规哲,并且發(fā)送完成訊息跟啤。也就是說(shuō)上面這段程式碼的行為,會(huì)先每 1 秒印出一個(gè)數(shù)字(從 0 遞增)直到我們點(diǎn)擊 body 為止,他才會(huì)送出 complete 訊息隅肥。
如果畫(huà)成 Marble Diagram 則會(huì)像下面這樣
source : -----0-----1-----2------3--
click : ----------------------c----
takeUntil(click)
example: -----0-----1-----2----|
當(dāng) click 一發(fā)送元素的時(shí)候竿奏,observable 就會(huì)直接完成(complete)。
concatAll
有時(shí)我們的 Observable 送出的元素又是一個(gè) observable腥放,就像是二維陣列泛啸,陣列裡面的元素是陣列,這時(shí)我們就可以用 concatAll
把它攤平成一維陣列秃症,大家也可以直接把 concatAll 想成把所有元素 concat 起來(lái)候址。
var click = Rx.Observable.fromEvent(document.body, 'click');
var source = click.map(e => Rx.Observable.of(1,2,3));
var example = source.concatAll();
example.subscribe({
next: (value) => { console.log(value); },
error: (err) => { console.log('Error: ' + err); },
complete: () => { console.log('complete'); }
});
這個(gè)范例我們每點(diǎn)擊一次 body 就會(huì)立刻送出 1,2,3,如果用 Marble diagram 表示則如下
click : ------c------------c--------
map(e => Rx.Observable.of(1,2,3))
source : ------o------------o--------
\ \
(123)| (123)|
concatAll()
example: ------(123)--------(123)------------
這裡可以看到 source
observable 內(nèi)部每次發(fā)送的值也是 observable种柑,這時(shí)我們用 concatAll 就可以把 source 攤平成 example岗仑。
這裡需要注意的是 concatAll
會(huì)處理 source 先發(fā)出來(lái)的 observable,必須等到這個(gè) observable 結(jié)束聚请,才會(huì)再處理下一個(gè) source 發(fā)出來(lái)的 observable荠雕,讓我們用下面這個(gè)范例說(shuō)明。
var obs1 = Rx.Observable.interval(1000).take(5);
var obs2 = Rx.Observable.interval(500).take(2);
var obs3 = Rx.Observable.interval(2000).take(1);
var source = Rx.Observable.of(obs1, obs2, obs3);
var example = source.concatAll();
example.subscribe({
next: (value) => { console.log(value); },
error: (err) => { console.log('Error: ' + err); },
complete: () => { console.log('complete'); }
});
// 0
// 1
// 2
// 3
// 4
// 0
// 1
// 0
// complete
這裡可以看到 source
會(huì)送出 3 個(gè) observable驶赏,但是 concatAll
后的行為永遠(yuǎn)都是先處理第一個(gè) observable炸卑,等到當(dāng)前處理的結(jié)束后才會(huì)再處理下一個(gè)。
用 Marble diagram 表示如下
source : (o1 o2 o3)|
\ \ \
--0--1--2--3--4| -0-1| ----0|
concatAll()
example: --0--1--2--3--4-0-1----0|
簡(jiǎn)易拖拉
當(dāng)學(xué)完前面幾個(gè) operator 后煤傍,我們就很輕鬆地做出拖拉的功能盖文,先讓我們來(lái)看一下需求
- 首先畫(huà)面上有一個(gè)元件(#drag)
- 當(dāng)滑鼠在元件(#drag)上按下左鍵(mousedown)時(shí),開(kāi)始監(jiān)聽(tīng)滑鼠移動(dòng)(mousemove)的位置
- 當(dāng)滑鼠左鍵放掉(mouseup)時(shí)患久,結(jié)束監(jiān)聽(tīng)滑鼠移動(dòng)
- 當(dāng)滑鼠移動(dòng)(mousemove)被監(jiān)聽(tīng)時(shí)椅寺,跟著修改元件的樣式屬性
第一步我已經(jīng)完成了,大家可以直接到以下兩個(gè)連結(jié)做練習(xí)
第二步我們要先取得各個(gè) DOM 物件蒋失,元件(#drag) 跟 body。
const dragDOM = document.getElementById('drag');
const body = document.body;
要取得 body 的原因是因?yàn)榛笠苿?dòng)(mousemove)跟滑鼠左鍵放掉(mouseup)都應(yīng)該是在整個(gè) body 監(jiān)聽(tīng)桐玻。
第三步我們寫(xiě)出各個(gè)會(huì)用到的監(jiān)聽(tīng)事件篙挽,并用 fromEvent
來(lái)取得各個(gè) observable。
- 對(duì) #drag 監(jiān)聽(tīng) mousedown
- 對(duì) body 監(jiān)聽(tīng) mouseup
- 對(duì) body 監(jiān)聽(tīng) mousemove
const mouseDown = Rx.Observable.fromEvent(dragDOM, 'mousedown');
const mouseUp = Rx.Observable.fromEvent(body, 'mouseup');
const mouseMove = Rx.Observable.fromEvent(body, 'mousemove');
記得還沒(méi)
subscribe
之前都不會(huì)開(kāi)始監(jiān)聽(tīng)镊靴,一定會(huì)等到 subscribe 之后 observable 才會(huì)開(kāi)始送值铣卡。
第四步開(kāi)始寫(xiě)邏輯
當(dāng) mouseDown 時(shí),轉(zhuǎn)成 mouseMove 的事件
const source = mouseDown.map(event => mouseMove)
mouseMove 要在 mouseUp 后結(jié)束
加上 takeUntil(mouseUp)
const source = mouseDown
.map(event => mouseMove.takeUntil(mouseUp))
這時(shí) source 大概長(zhǎng)像這樣
source: -------e--------------e-----
\ \
--m-m-m-m| -m--m-m--m-m|
m 代表 mousemove event
用 concatAll()
攤平 source 成一維偏竟。
const source = mouseDown
.map(event => mouseMove.takeUntil(mouseUp))
.concatAll();
用 map 把 mousemove event 轉(zhuǎn)成 x,y 的位置煮落,并且訂閱。
source
.map(m => {
return {
x: m.clientX,
y: m.clientY
}
})
.subscribe(pos => {
dragDOM.style.left = pos.x + 'px';
dragDOM.style.top = pos.y + 'px';
})
到這裡我們就已經(jīng)完成了簡(jiǎn)易的拖拉功能了!完整的程式碼如下
const dragDOM = document.getElementById('drag');
const body = document.body;
const mouseDown = Rx.Observable.fromEvent(dragDOM, 'mousedown');
const mouseUp = Rx.Observable.fromEvent(body, 'mouseup');
const mouseMove = Rx.Observable.fromEvent(body, 'mousemove');
mouseDown
.map(event => mouseMove.takeUntil(mouseUp))
.concatAll()
.map(event => ({ x: event.clientX, y: event.clientY }))
.subscribe(pos => {
dragDOM.style.left = pos.x + 'px';
dragDOM.style.top = pos.y + 'px';
})
不知道讀者有沒(méi)有感受到踊谋,我們整個(gè)程式碼不到 15 行蝉仇,而且只要能夠看懂各個(gè) operators,我們程式可讀性是非常的高。
雖然這只是一個(gè)簡(jiǎn)單的拖拉實(shí)現(xiàn)轿衔,但已經(jīng)展示出 RxJS 帶來(lái)的威力沉迹,它讓我們的程式碼更加的簡(jiǎn)潔,也更好的維護(hù)害驹!
這裡有完整的成果可以參考鞭呕。
今日小結(jié)
我們今天介紹了四個(gè) operators 分別是 take, first, takeUntil, concatAll,并且完成了一個(gè)簡(jiǎn)易的拖拉功能宛官,我們之后會(huì)把這個(gè)拖拉功能做得更完整葫松,并且整合其他功能!
不知道讀者今天有沒(méi)有收穫底洗?如果有任何問(wèn)題进宝,歡迎在下方留言給我!
如果你喜歡這篇文章枷恕,請(qǐng)至標(biāo)題旁幫我按個(gè) 星星+like党晋,謝謝。