- RxJS官方教程（一） 概覽
- RxJS官方教程（二） Observable
- RxJS官方教程（三） Observable剖析
- RxJS官方教程（四） Observer和Subscription
- RxJS官方教程（五） Subject
- RxJS官方教程（六） 算子
介紹
RxJS是一個(gè)使用可觀察序列組成異步和基于事件的程序的庫(kù)盒让。它提供了一種核心類型，Observable告唆，廣播類型（Observer域携，Schedulers簇秒，Subjects）和受Array＃extras（map，filter秀鞭，reduce趋观，every等）啟發(fā)的運(yùn)算符，允許將異步事件作為集合處理锋边。
ReactiveX將Observer模式與Iterator模式和函數(shù)編程與集合相結(jié)合皱坛，以滿足管理事件序列的理想方式的需求。
RxJS中解決異步事件管理的基本概念是：
- Observable：可觀察對(duì)象豆巨，表示可以調(diào)用的未來(lái)值或事件集合的想法剩辟。
- Observer：觀察者，是一組回調(diào)函數(shù)往扔，處理Observable提供的值贩猎。
- Subscription：訂閱關(guān)系，表示Observable的執(zhí)行萍膛，主要用于取消執(zhí)行融欧。
- Operators：算子，是純粹的函數(shù)卦羡，用函數(shù)式編程風(fēng)格處理值或事件集合噪馏，map麦到，filter，concat欠肾，flatMap等瓶颠。
- Subject：主題，相當(dāng)于EventEmitter刺桃，是將值或事件廣播到多個(gè)Observer的唯一方法粹淋。
- Scheduler：控制并發(fā)的集中調(diào)度器，使我們能夠協(xié)調(diào)發(fā)生在setTimeout或requestAnimationFrame或其他的事件瑟慈。
第一個(gè)例子
通常桃移，您注冊(cè)事件偵聽(tīng)器。
var button = document.querySelector('button');
button.addEventListener('click',() => console.log('Clicked!'));
使用RxJS可以創(chuàng)建一個(gè)observable葛碧。
var button = document.querySelector('button');
Rx.Observable.fromEvent(button, 'click')
.subscribe(() => console.log('Clicked!'));
Purity 純粹性
RxJS的強(qiáng)大之處在于它能夠使用純函數(shù)生成值借杰。這意味著您的代碼不容易出錯(cuò)。
通常你會(huì)創(chuàng)建一個(gè)不純的函數(shù)进泼，其中你的代碼的其他部分可能會(huì)搞亂你的狀態(tài)蔗衡。
var count = 0;
var button = document.querySelector('button');
button.addEventListener('click', () => console.log(`Clicked ${++count} times`));
使用RxJS可以隔離狀態(tài)。
var button = document.querySelector('button');
Rx.Observable.fromEvent(button,'click')
.scan(count => count + 1, 0)
.subscribe(count => console.log(`Clicked ${count} times`))
scan操作符就像數(shù)組的reduce函數(shù)乳绕，回調(diào)函數(shù)接受一個(gè)參數(shù)绞惦，初始值為0，返回的值作為下一個(gè)回調(diào)函數(shù)的入?yún)ⅰ?/p>
Flow 流
RxJS擁有一系列操作符洋措，可幫助您控制事件如何流經(jīng)您的可觀察對(duì)象济蝉。
這是使用純JavaScript的每秒最多允許一次點(diǎn)擊的方式：
var count = 0;
var rate = 1000;
var lastClick = Date.now() - rate;
var button = document.querySelector('button');
button.addEventListener('click', () => {
if (Date.now() - lastClick >= rate){
console.log(`Clicked ${++count} times`);
lastClick = Date.now();
}
});
使用RxJS：
var button = document.querySelector('button');
Rx.Observable.fromEvent(button,'click')
.throttleTime(1000)
.scan(count => count + 1, 0)
.subscribe(count => console.log(`Clicked ${count} times`));
其他的流控制符： filter, delay, debounceTime, take, takeUntil, distinct, distinctUntilChanged。
Value 值
您可以轉(zhuǎn)換通過(guò)您的observable傳遞的值菠发。
以下是在純JavaScript中為每次點(diǎn)擊添加當(dāng)前鼠標(biāo)x位置的方法：
var count = 0;
var rate = 1000;
var lastClick = Date.now() - rate;
var button = document.querySelector('button');
button.addEventListener('click', (event) => {
if (Date.now() - lastClick >= rate) {
count += event.clientX;
console.log(count)
lastClick = Date.now();
}
});
使用RxJS：
var button = document.querySelector('button');
Rx.Observable.fromEvent(button, 'click')
.throttleTime(1000)
.map(event => event.clientX)
.scan((count, clientX) => count + clientX, 0)
.subscribe(count => console.log(count));
其他產(chǎn)生值得操作符：pluck, pairwise, sample堆生。
官網(wǎng) http://reactivex.io/rxjs/manual/overview.html#introduction
