rxjs核心概念之Observable

　　RxJS簡(jiǎn)介

　　RxJS 是基于觀察者模式和迭代器模式以函數(shù)式編程思維來實(shí)現(xiàn)的。簡(jiǎn)單來講RxJS的運(yùn)行就是基于Observable和Observer之間的數(shù)據(jù)生產(chǎn)和消費(fèi)的互動(dòng)過程。因此，理解RxJs，首先要對(duì)Observable和Observer有深入的理解。顧名思義，Observable就是可被觀察者，Observer就是觀察者，兩者通過Observable上的sunscribe方法作為橋梁將兩者聯(lián)系起來。

　　RxJS的數(shù)據(jù)流就是Observable對(duì)象，其實(shí)現(xiàn)了觀察者模式(Observer Pattern)和迭代器模式(Iterator Pattern)這兩種設(shè)計(jì)模式。

　　觀察者模式

　　Observer Pattern 定義

　　觀察者模式是軟件設(shè)計(jì)模式的一種。在此種模式中，一個(gè)目標(biāo)對(duì)象管理所有相依于它的觀察者對(duì)象，并且在它本身的狀態(tài)改變時(shí)主動(dòng)發(fā)出通知。這通常透過呼叫各觀察者所提供的方法來實(shí)現(xiàn)。此種模式通常被用來實(shí)時(shí)事件處理系統(tǒng)。----維基百科

　　當(dāng)對(duì)象之間存在一對(duì)多的關(guān)系，就可以使用觀察者模式，比如當(dāng)一個(gè)對(duì)象更新時(shí)通知并更新到給多個(gè)對(duì)象。其中發(fā)布通知的是發(fā)布者，接收通知執(zhí)行更新的是觀察者。觀察者模式屬于行為模式。在RxJS中，Observable就是發(fā)布者，Observer幾件事觀察者，二者通過訂閱subscribe進(jìn)行關(guān)聯(lián)。

　　source$就是一個(gè)Observable對(duì)象，是發(fā)布者，它產(chǎn)生的連續(xù)數(shù)據(jù)通知給console.log這個(gè)觀察者。

　　import { of } from 'rxjs';

　　const source$ = of(1, [2]);

　　source$.subscribe(console.log);

　　觀察者模式就是分而治之的思想。其就是將復(fù)制的問題分隔開，每一部分有獨(dú)立的功能模塊進(jìn)行處理。在RxJS其主要是將復(fù)雜的問題被分解成三個(gè)小問題：

　　如何產(chǎn)生事件，這是發(fā)布者的責(zé)任，在RxJS中是Observable對(duì)象的工作。

　　如何響應(yīng)事件，這是觀察者的責(zé)任，在RxJS中由subscribe的參數(shù)來決定。

　　如何將發(fā)布者與觀察者進(jìn)行關(guān)聯(lián)，也就是何時(shí)調(diào)用subscribe。

　　由此可見觀察者模式的治的思想，就是將邏輯分為發(fā)布者(Publisher)和觀察者(Observer)，其中發(fā)布者只管負(fù)責(zé)產(chǎn)生事件，產(chǎn)生數(shù)據(jù)時(shí)通知所有注冊(cè)掛的觀察者，而不關(guān)心這些觀察者如何處理這些事件，相對(duì)的，觀察者可以被注冊(cè)到某個(gè)發(fā)布者，只管接收到事件之后就處理，而不關(guān)心這些數(shù)據(jù)是如何產(chǎn)生的。觀察者模式帶來的好處很明顯，這個(gè)模式中的兩方都可以專心做一件事，而且可以任意組合。

　　迭代器模式

　　Iterator Pattern 定義

　　在 面向?qū)ο缶幊汤?，迭代器模式是一種設(shè)計(jì)模式，是一種最簡(jiǎn)單也最常見的設(shè)計(jì)模式。它可以讓用戶透過特定的接口巡訪容器中的每一個(gè)元素而不用了解底層的實(shí)現(xiàn)。此外，也可以實(shí)現(xiàn)特定目的版本的迭代器。----維基百科

　　迭代器(Iterator)模式，又叫做游標(biāo)(Cursor)模式。提供一個(gè)通用的接口對(duì)數(shù)據(jù)集合進(jìn)行遍歷，而不需要關(guān)系數(shù)據(jù)集合的內(nèi)部實(shí)現(xiàn)。就像是一個(gè)移動(dòng)的指針一樣，從集合中一個(gè)元素移到另一個(gè)元素，完成對(duì)整個(gè)集合的遍歷。

　　const array = [1, 2, 3];

　　const iterator = array[Symbol.iterator]();

　　iterator.next(); // {value: 1, done: false}

　　在ES6中迭代器模式：

　　next方法將游標(biāo)移動(dòng)到下一個(gè)元素

　　value屬性獲取當(dāng)前的值

　　done屬性判斷是否已經(jīng)遍歷完所有的元素

　　在RxJS中，是看不到類似上面的代碼，RxJs作為迭代器的使用者，并不需要主動(dòng)去從Observable中“拉”取生產(chǎn)的數(shù)據(jù)進(jìn)行消費(fèi)，僅需要subscribe上Observable對(duì)象之后，自然就能夠收到消息的推送，這就是觀察者模式和迭代器兩種模式結(jié)合的優(yōu)勢(shì)之處。

　　創(chuàng)建Observable鄭州婦科醫(yī)院 http://www.ytsgfk120.com/

　　創(chuàng)建Observable已經(jīng)很簡(jiǎn)單，RxJS提供了很多創(chuàng)建類操作符。

　　import { interval } from 'rxjs';

　　const source$ = interval(1000);

　　source$.subscribe(console.log);

　　Observable對(duì)象調(diào)用觀察者next傳遞出數(shù)據(jù)的動(dòng)作，實(shí)際上可以在subscribe橋梁方法中傳入一個(gè)觀察者對(duì)象類似{next(){}, complete(){}, error(){}}，分別對(duì)Observable對(duì)象傳遞對(duì)數(shù)據(jù)、完結(jié)狀態(tài)、錯(cuò)誤進(jìn)行處理。也可以分別傳遞三個(gè)函數(shù)參數(shù)。需要注意的是，Observable對(duì)象只有一種終結(jié)狀，完結(jié)(complete)，要么是出錯(cuò)(error)，一旦進(jìn)入出錯(cuò)狀態(tài)，這個(gè)Observable對(duì)象也就終結(jié)了，再不會(huì)調(diào)用對(duì)應(yīng)Observer的next函數(shù)，也不會(huì)再調(diào)用Observer的complete函數(shù);同樣，如果一個(gè)Observable對(duì)象進(jìn)入了完結(jié)狀態(tài)，也不能再調(diào)用Observer的next和error。

　　退訂Observable

　　Observable和Observer之間初了通過subscribe將兩者進(jìn)行聯(lián)系，有時(shí)也需要在一定條件下將兩者的關(guān)系進(jìn)行斷開。在RxJS中，subscribe函數(shù)的返回結(jié)果是subscription對(duì)象，調(diào)用了subscription上的unsubscribe函數(shù)就可以退訂Observable。

　　import { interval } from 'rxjs';

　　const source$ = interval(1000);

　　const subscription = source$.subscribe(console.log);

　　setTimeout(() => subscription.unsubscribe(), 3000); // 3秒后退訂

　　hot & cold

　　Think of a hot Observable as a radio station. All of the listeners that are listening to it at this moment listen to the same song.A cold Observable is a music CD. Many people can buy it and listen to it independently.by Nickolay Tsvetinov

　　Observable對(duì)象就是一個(gè)數(shù)據(jù)流，可以在一個(gè)時(shí)間范圍內(nèi)生產(chǎn)一系列數(shù)據(jù)，如果僅有一個(gè)Observer的簡(jiǎn)單場(chǎng)景無需考慮太多，但是對(duì)于存在多個(gè)Observer的場(chǎng)景的復(fù)雜場(chǎng)景，尤其是當(dāng)多個(gè)Observer并不是同時(shí)訂閱，那就需要考慮兩個(gè)傳遞合適產(chǎn)生的數(shù)據(jù)給Observer。兩種選擇：

　　A：Cold Observable，不能錯(cuò)過，需要獲取Observable產(chǎn)生的所有數(shù)據(jù)。

　　B：Hot Observable，可以錯(cuò)過，獲取訂閱開始的時(shí)間算起Observable產(chǎn)生的所有數(shù)據(jù)。

　　Hot Observable無論是否被訂閱，事件一直發(fā)生數(shù)據(jù)也一直產(chǎn)生。當(dāng)Hot Observable有多個(gè)訂閱者時(shí)，Hot Observable 與每一個(gè)訂閱者共享信息，與訂閱著是一對(duì)多的關(guān)系。Cold Observable只有被訂閱時(shí)，才開始執(zhí)行發(fā)射數(shù)據(jù)流的代碼。并且Cold Observable和 訂閱者是一對(duì)一的關(guān)系，當(dāng)有多個(gè)不同的訂閱者時(shí)，消息是重新完整發(fā)送的。也就是說對(duì) Cold Observable 而言，有多個(gè)訂閱者時(shí)，他們各自的事件是獨(dú)立的。對(duì)于是使用Hot Observable還是Cold Observable，不同的場(chǎng)景可以有不同期望值。而RxJS同時(shí)提供這這種需求場(chǎng)景。并且也提供了hot與cold之間的互相轉(zhuǎn)換。