Rxjs響應(yīng)式編程

關(guān)于Rxjs的現(xiàn)狀

鑒于響應(yīng)式編程近幾年才開始真正流行,而且響應(yīng)式的理念也并不是在所有領(lǐng)域都深得人心,對于不是特別喜歡追求新概念新技術(shù)的公司或程序員來說,不排除有確實沒聽說過的可能。

對于聽說過的人來說,可能也并不是都理解響應(yīng)式編程的理念,可能只是把 Rx 當成和 Promise、Async 類似的用來替代 Callback 的異步方案,但是可能自己的需求用 Promise 等已經(jīng)足夠解決,所以沒有足夠的意愿和時間來了解 Rx。

對于了解 Rx 的響應(yīng)式編程及其優(yōu)勢的人來說,可能出于實際項目中團隊合作的需要,并不經(jīng)常能夠使用 Rx。并且目前大部分類庫還是基于回調(diào)或者 Promise 的,要使用 Rx 的話需要一些膠水代碼來封裝,對于異步邏輯不是足夠復(fù)雜的可能在 Glue 上也需要一些額外的成本。

對于用 ES5 的開發(fā)人員來說,由于沒有 Lambda 所以 Rx 在寫法上可能也較為復(fù)雜。

Rx 的一個問題就是它其實是一個 paradigm,侵入性很強。你如果要用 Rx 寫東西,最好就整個系統(tǒng)都是以 Rx 為核心來設(shè)計。(比如 Cycle.js)對于已經(jīng)用傳統(tǒng)范式開發(fā)了一定時間的項目來說,引入 Rx 會比較尷尬。

另外單就前端來說,很多場景并沒有復(fù)雜到需要 Rx,這種時候用 Rx 反而成本變高了。

Rxjs是什么

RxJS全名Reactive Extensions for JavaScript : Javascript的響應(yīng)式擴展
Rxjs是一個基于JavaScript的庫
還有支持其他語言的庫,比如:Rxjava

什么是響應(yīng)式編程(RP: Reactive programming)

響應(yīng)式的思路:是把隨時間不斷變化的數(shù)據(jù)、狀態(tài)、事件等等轉(zhuǎn)成可被觀察的序列(Observable Sequence),然后訂閱序列中那些Observable對象的變化,一旦變化,就會執(zhí)行事先安排好的各種轉(zhuǎn)換和操作。
響應(yīng)式編程是使用異步數(shù)據(jù)流進行編程

由誰發(fā)明的?

微軟出品

為什么要使用(它解決了什么問題)

有人這樣說 :

RxJS是一個解決異步問題的JS開發(fā)庫.它起源于 Reactive Extensions 項目,它帶來了觀察者模式和函數(shù)式編程的相結(jié)合的最佳實踐.觀察者模式是一個被實踐證明的模式,基于生產(chǎn)者(事件的創(chuàng)建者)和消費者(事件的監(jiān)聽者)的邏輯分離關(guān)系.

知乎上這樣說:

RxJS/Cycle.js解決的是數(shù)據(jù)流的問題,為什么有數(shù)據(jù)流的問題,是因為更傾向于或者受限于使用單向數(shù)據(jù)綁定,核心其實解決的是State管理的問題。偏向于Redux或者Flux架構(gòu)會有全局State的困擾

Rxjs的原理,核心

Rxjs核心概念之Observable
對觀察者模式的實現(xiàn)才是Rxjs的核心,但這僅僅是RxJS旅程的開始,豐富的擴展 才是RxJS的威力所在。
Observable(可觀察對象)是基于推送(Push)運行時執(zhí)行(lazy)的多值集合

就 RxJS 來說,可以把 JavaScript 工程師分為以下幾個層次:

沒聽說過 RxJS 的;
聽說過但是不會的;
會的但是不常用的;
會的并且經(jīng)常用的。

下面就來說說說它的用法

Rxjs的用法

RxJS的基本用法:
Rx.Observable.*創(chuàng)建一個Observable對象當它發(fā)生變化時,以流式的方式觸發(fā)各種轉(zhuǎn)換(如有需要可以對變化的值做合并、映射、過濾等操作),最后傳到訂閱回調(diào)拿到處理后的最終結(jié)果。

  • 數(shù)據(jù)的轉(zhuǎn)換

Rxjs將數(shù)據(jù)分為兩種類型:

  • 普通數(shù)據(jù) - 比如:數(shù)組,字符串,json對象之類的
  • 可觀測對象 - 比如使用Rx.Observable.create()方法獲得的對象


    數(shù)據(jù)轉(zhuǎn)換的過程

就像普通數(shù)據(jù)可以進行加、減、乘、除等運算一樣,RxJS提供了相當多的 擴展方法來擴展對Observable對象的操作能力。
比如你可以使用from()方法將普通的數(shù)據(jù)變換到Observable域,或者 使用to()方法將Observable還原為普通數(shù)據(jù):

var a = Rx.Observable.from([1,2,3,4]); 
var b = a.toArray();
  • create()方法的使用

使用create方法從零開始創(chuàng)建一個可觀測序列/Observable
create方法的參數(shù)是一個封裝數(shù)據(jù)生成邏輯的函數(shù),其參數(shù)為觀測者/Observer

var generator = function(observer){
    //數(shù)據(jù)生成邏輯
}
Rx.Observable.create(generator);

在函數(shù)generator的實現(xiàn)中,通過調(diào)用參數(shù)對象observer的三個方法,實現(xiàn)數(shù)據(jù) 的生成、錯誤的通知和結(jié)束聲明:

  • onNext(data)* - 向觀測者傳送新的數(shù)據(jù)data

  • onError(err)* - 通知觀測者有錯誤發(fā)生,并且終止當前序列

  • onCompleted()* - 通知觀測者當前序列已結(jié)束

  • 簡單擴展方法的使用:

或者將多個可觀測對象使用concat()方法拼接起來:

//a:1 2 3 
//b: 4 5 6
//c: 7 8 9 
a.concat(b,c); //結(jié)果: 1 2 3 4 5 6 7 8 9

或者對Observable對象生成的數(shù)據(jù)使用sum()方法求和:

//a: 1 2 3
a.sum(); //結(jié)果:6

或者對Observable對象生成的每個數(shù)據(jù)進行映射處理:

//a: 1 2 3
a.map(function(d,i){ return d*10 }) //結(jié)果: 10 20 30

這些擴展的方法,RxJS稱之為操作符/Operator,一個操作符通常返回的 是另一個新的Observable對象,這意味著它還處于Observable域,從而 可以將多個操作符鏈接起來,構(gòu)成一條對Observable進行處理的流水線:

Rx.Observable.of(1,2,3)                 // 1 2 3
    .map(function(d){ return d*10;})    // 10 20 30 
    .concat(Rx.Observable.from([4,5,6])) // 10 20 30 4 5 6
    .subscribe(
        function(d){ console.log(d);},
        function(e){ console.log(e);},
        function(){ console.log("done");}
    )
參考學(xué)習(xí)網(wǎng)址:

官網(wǎng)
segmentfault- Observable
segmentfault- Subject

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容