RxJS API解析（四）

Rx*(Observable.combineLatest)方法

方法定義

Rx.Observable.combineLatest(...args, [resultSelector])

做用

經過處理函數老是將指定的可觀察對象序列中最新發射的值合併爲一個可觀察對象。

參數

1. args (arguments | Array): 一系列可觀察對象或可觀察對象的數組。

2. [resultSelector] (Function): 在全部可觀察對象都發射值後調用的處理函數。

返回值

(Observable): 由傳入的可觀察序列通過處理函數合併後的結果組成的可觀察序列。

寶珠圖

Observable.combineLastest()函數，老是合併序列中最新發射的值。寶珠圖中的顏色球發射顏色，空白的圖形發射待染色圖形，處理函數對待染色對象進行染色：老是用戶最新發射的顏色或者對最新發射的待染色對象。

假設顏色序列僅發射了第一個寶珠淺紫色且後續再也不發射，那麼結果街將會是一個由淺紫色組成的染色後對象的序列。

使用官方可拖動寶珠圖，能夠幫助理解，拖動序列中的寶珠，觀察輸出序列的變化。

實例

var colors = ["紫色","黃色","藍色","黑色"];
var shapes = ["小星星","圓形","三角形","正方形","心形","五邊形"];
var source1 = Rx.Observable.interval(3000)
  .map(()=>colors.pop());
var source2 = Rx.Observable.interval(2000)
  .map(()=>shapes.pop());

var combined = Rx.Observable.combineLatest(source1, source2, function(x, y){
  return x + "的" + y;
}).take(8);

combined.subscribe((shaped)=>console.log(shaped));

實例模擬第一個寶珠圖，點擊進入可運行實例。其中列1發射顏色值，序列2發射形狀。結果輸出染色後的形狀：

"黑色的五邊形"
"黑色的心形"
"藍色的心形"
"藍色的正方形"
"藍色的三角形"
"黃色的三角形"
"黃色的圓形"
"紫色的圓形"

還有一個很是好的實例在前面的文章中，是combineLatest()在緩存數據方面的應用，若是你想深刻理解combineLatest()不妨看一下。

題外話

寫這個專題的時候，對Rx的抽象能力讚歎不已。

你們一般把編寫一個框架的工做稱做「造輪子」。
「輪子」是一個針對某一類問題的解決方案，一般是因爲反覆解決某一個工程問題而產生的。某種程度上，輪子能夠一勞永逸，同時輪子的使用能夠大大地提升生產的效率(試想一想你在使用如Rails這類有 ORM特性框架時的感覺)。

Rx彷佛從另外一個方面而不是實際問題進行抽象——數學，是一個函數式編程模式。從數學而不是工程做爲起點，創造的工具的威力_可能_更強大，可是學習成本(使用成本)_可能_會更高。

任何程序設計語言在講解遞歸特性時，基本都會舉漢諾塔、斐波拉契數列的例子。沒錯，請你對比一下斐波拉契數列和combineLatest()定義的類似之處：

def fibo(i):  
   if i==0 or i==1:  
       return 1  
   else:  
       return fibo(i-1)+fibo(i-2)

Oops！遞歸完成後產生值的過程就是combineLatest()的過程。

在學習Rx的操做符時，請反覆地理解操做符的做用、限制。最好的理解方法是構建一個場景。

在combineLatest()中，咱們不妨將場景限定爲擁有兩個可觀察對象的可觀察序列，而且對象A老是較低頻率地發射新值，而對象B比較頻繁地發射：

A ----*----------------*---------->
B -----@---@---@---@---@----@----->

那麼對象A在實際中多是什麼？緩存後的http請求後的數據、異步獲取的配置文件...
對象B天然能夠是，與服務器的實時同步、用戶上傳圖片的實時上傳、用戶在列表中執行的翻頁操做...

前面的文章中緩存Github用戶的就是上面提到的場景。

劇終