rxjs核心概念之Observable

  RxJS簡介

  RxJS 是基於觀察者模式和迭代器模式以函數式編程思維來實現的。簡單來講RxJS的運行就是基於Observable和Observer之間的數據生產和消費的互動過程。因此,理解RxJs,首先要對Observable和Observer有深入的理解。顧名思義,Observable就是可被觀察者,Observer就是觀察者,兩者通過Observable上的sunscribe方法作爲橋樑將兩者聯繫起來。

  RxJS的數據流就是Observable對象,其實現了觀察者模式(Observer Pattern)和迭代器模式(Iterator Pattern)這兩種設計模式。

  觀察者模式

  Observer Pattern 定義

  觀察者模式是軟件設計模式的一種。在此種模式中,一個目標對象管理所有相依於它的觀察者對象,並且在它本身的狀態改變時主動發出通知。這通常透過呼叫各觀察者所提供的方法來實現。此種模式通常被用來實時事件處理系統。----維基百科

  當對象之間存在一對多的關係,就可以使用觀察者模式,比如當一個對象更新時通知並更新到給多個對象。其中發佈通知的是發佈者,接收通知執行更新的是觀察者。觀察者模式屬於行爲模式。在RxJS中,Observable就是發佈者,Observer幾件事觀察者,二者通過訂閱subscribe進行關聯。

  source$就是一個Observable對象,是發佈者,它產生的連續數據通知給console.log這個觀察者。

  import { of } from 'rxjs';

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

  source$.subscribe(console.log);

  觀察者模式就是分而治之的思想。其就是將複製的問題分隔開,每一部分有獨立的功能模塊進行處理。在RxJS其主要是將複雜的問題被分解成三個小問題:

  如何產生事件,這是發佈者的責任,在RxJS中是Observable對象的工作。

  如何響應事件,這是觀察者的責任,在RxJS中由subscribe的參數來決定。

  如何將發佈者與觀察者進行關聯,也就是何時調用subscribe。

  由此可見觀察者模式的治的思想,就是將邏輯分爲發佈者(Publisher)和觀察者(Observer),其中發佈者只管負責產生事件,產生數據時通知所有註冊掛的觀察者,而不關心這些觀察者如何處理這些事件,相對的,觀察者可以被註冊到某個發佈者,只管接收到事件之後就處理,而不關心這些數據是如何產生的。觀察者模式帶來的好處很明顯,這個模式中的兩方都可以專心做一件事,而且可以任意組合。

  迭代器模式

  Iterator Pattern 定義

  在 面向對象編程裏,迭代器模式是一種設計模式,是一種最簡單也最常見的設計模式。它可以讓用戶透過特定的接口巡訪容器中的每一個元素而不用瞭解底層的實現。此外,也可以實現特定目的版本的迭代器。----維基百科

  迭代器(Iterator)模式,又叫做遊標(Cursor)模式。提供一個通用的接口對數據集合進行遍歷,而不需要關係數據集合的內部實現。就像是一個移動的指針一樣,從集合中一個元素移到另一個元素,完成對整個集合的遍歷。

  const array = [1, 2, 3];

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

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

  在ES6中迭代器模式:

  next方法將遊標移動到下一個元素

  value屬性獲取當前的值

  done屬性判斷是否已經遍歷完所有的元素

  在RxJS中,是看不到類似上面的代碼,RxJs作爲迭代器的使用者,並不需要主動去從Observable中“拉”取生產的數據進行消費,僅需要subscribe上Observable對象之後,自然就能夠收到消息的推送,這就是觀察者模式和迭代器兩種模式結合的優勢之處。

  創建Observable鄭州婦科醫院 http://www.ytsgfk120.com/

  創建Observable已經很簡單,RxJS提供了很多創建類操作符。

  import { interval } from 'rxjs';

  const source$ = interval(1000);

  source$.subscribe(console.log);

  Observable對象調用觀察者next傳遞出數據的動作,實際上可以在subscribe橋樑方法中傳入一個觀察者對象類似{next(){}, complete(){}, error(){}},分別對Observable對象傳遞對數據、完結狀態、錯誤進行處理。也可以分別傳遞三個函數參數。需要注意的是,Observable對象只有一種終結狀,完結(complete),要麼是出錯(error),一旦進入出錯狀態,這個Observable對象也就終結了,再不會調用對應Observer的next函數,也不會再調用Observer的complete函數;同樣,如果一個Observable對象進入了完結狀態,也不能再調用Observer的next和error。

  退訂Observable

  Observable和Observer之間初了通過subscribe將兩者進行聯繫,有時也需要在一定條件下將兩者的關係進行斷開。在RxJS中,subscribe函數的返回結果是subscription對象,調用了subscription上的unsubscribe函數就可以退訂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對象就是一個數據流,可以在一個時間範圍內生產一系列數據,如果僅有一個Observer的簡單場景無需考慮太多,但是對於存在多個Observer的場景的複雜場景,尤其是當多個Observer並不是同時訂閱,那就需要考慮兩個傳遞合適產生的數據給Observer。兩種選擇:

  A:Cold Observable,不能錯過,需要獲取Observable產生的所有數據。

  B:Hot Observable,可以錯過,獲取訂閱開始的時間算起Observable產生的所有數據。

  Hot Observable無論是否被訂閱,事件一直髮生數據也一直產生。當Hot Observable有多個訂閱者時,Hot Observable 與每一個訂閱者共享信息,與訂閱着是一對多的關係。Cold Observable只有被訂閱時,纔開始執行發射數據流的代碼。並且Cold Observable和 訂閱者是一對一的關係,當有多個不同的訂閱者時,消息是重新完整發送的。也就是說對 Cold Observable 而言,有多個訂閱者時,他們各自的事件是獨立的。對於是使用Hot Observable還是Cold Observable,不同的場景可以有不同期望值。而RxJS同時提供這這種需求場景。並且也提供了hot與cold之間的互相轉換。


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章