RxJS系列教程(四) Observable

我們知道Observable是個(gè)容器,里面包含著數(shù)據(jù),數(shù)據(jù)從何而來(lái)肛跌?

靜態(tài)數(shù)據(jù)

我們?nèi)粘V囟仁褂玫?code>string和array都屬于此范疇。

動(dòng)態(tài)數(shù)據(jù)

比如我們用ES6中的generator生成斐波那契數(shù)列,比如通過RESTful api調(diào)用返回的數(shù)據(jù)衍慎。

Observables發(fā)送事件转唉,Observer異步地接收事件,這可以讓我們的應(yīng)用在有大量事件產(chǎn)生的時(shí)候保持響應(yīng)能力稳捆。強(qiáng)調(diào)一下赠法,RxJS不是僅面向客戶端js的,在服務(wù)端同樣可以使用乔夯∽┲看下代碼:

Rx.Observable.from(<數(shù)據(jù)源>)
  .operator1(...)
  .operator2(...)
  .operator3(...)
  .subscribe(<處理最終結(jié)果數(shù)據(jù)>)

再?gòu)?qiáng)調(diào)兩個(gè)事情,第一驯嘱,observables是個(gè)不可變數(shù)據(jù)類型镶苞,像string一樣;第二鞠评,observables不僅僅代表了當(dāng)前時(shí)刻的數(shù)據(jù)茂蚓,也代表了未來(lái)某時(shí)刻的數(shù)據(jù)。

何時(shí)何地用RxJS

世間沒有萬(wàn)能藥剃幌,RxJS也一樣聋涨,只在適合它的地方使用它。我們把程序按照兩個(gè)維度劃分成一個(gè)田字表格负乡,橫向是單值牍白,多值,縱向是同步抖棘,異步茂腥。

單值,同步

用Rx.Observable.of來(lái)包裝單值同步數(shù)據(jù):

Rx.Observable.of(2017)

一旦有消費(fèi)者消費(fèi)切省,此值馬上被發(fā)送出去最岗。這種情況下使用RxJS顯得有點(diǎn)重了,除非我們想進(jìn)行合并流的操作朝捆。

多值般渡,同步

用Rx.Observable.from來(lái)包裝多值同步數(shù)據(jù):

Rx.Observable.from([1, 2, 3])

from()函數(shù)可能是RxJS中最常用的之一了。同步在這里是啥意思呢芙盘?就是說1處理完了才能處理2驯用,2處理完了才能處理3。如果1處理得慢儒老,2必須等著蝴乔,以此類推。

單值贷盲,異步

這個(gè)情況其實(shí)就是Promise淘这。RxJS提供了函數(shù)可以無(wú)縫地和Promise整合到一起剥扣。

const one = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(1);
  }, 3000);//模擬3秒延遲
});
//這個(gè)時(shí)候Promise中的代碼已經(jīng)在運(yùn)行了

Rx.Observable.fromPromise(one)
  .map(value => value = value + 1);
  .subscribe(result => {
    console.log(result);
  });

console.log("程序結(jié)束");

由于是異步程序巩剖,一運(yùn)行就會(huì)打印“程序結(jié)束”铝穷,3秒后將打印2。然而用Observable包裝一層有啥意義佳魔?意義在于Promise是無(wú)法重新運(yùn)行的曙聂,而Observable可以,并且還可以讓它運(yùn)行很多次鞠鲜,這是通過內(nèi)嵌Observable來(lái)實(shí)現(xiàn)的宁脊,我們后面會(huì)講到。

多值贤姆,異步

這個(gè)場(chǎng)景就是我們常說的事件驅(qū)動(dòng)的異步編程玖院。比如DOM事件以及NodeJS中的EventEmitter琐鲁。如何使用RxJS包裝DOM事件,如下圖:

包裝DOM事件

這里我用的是https://jsfiddle.net/。點(diǎn)擊span標(biāo)簽摹闽,在控制臺(tái)打印出span標(biāo)簽中的href屬性值。

EventEmitter的包裝在這里我們就暫時(shí)不講了垫挨,以后碰上再說跛溉。感興趣的可以看下RxJS的文檔。

拉模型與推模型

迭代器就是基于拉的獲取數(shù)據(jù)的代表砰碴。最有代表性的示例就是利用ES6中的Generator來(lái)生成斐波那契數(shù)列躏筏。Generator的教程請(qǐng)參見http://es6.ruanyifeng.com/#docs/generator〕释鳎基于拉的獲取數(shù)據(jù)的方式就是我想要數(shù)據(jù)的時(shí)候才去獲取數(shù)據(jù)趁尼,是主動(dòng)的去獲取數(shù)據(jù)。

而Observable是基于推的獲取數(shù)據(jù)方式的猖辫。數(shù)據(jù)會(huì)主動(dòng)推送給我酥泞,我被動(dòng)地接收數(shù)據(jù)做出響應(yīng)。

以上說了那么多住册,想表明一件事就是婶博,RxJS可以用同樣的方式來(lái)處理同步和異步編程,并且把如何產(chǎn)生數(shù)據(jù)和如何消費(fèi)數(shù)據(jù)各自獨(dú)立出來(lái)荧飞。

我們可以把一切東西都轉(zhuǎn)換成Observable凡人,但是應(yīng)該不應(yīng)該就要視情況而定了。比如轉(zhuǎn)換字符串大小寫叹阔,直接用string的方法就可以了挠轴。RxJS中的任何操作都會(huì)有性能損失。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末耳幢,一起剝皮案震驚了整個(gè)濱河市岸晦,隨后出現(xiàn)的幾起案子欧啤,更是在濱河造成了極大的恐慌,老刑警劉巖启上,帶你破解...
    沈念sama閱讀 212,816評(píng)論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件邢隧,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡冈在,警方通過查閱死者的電腦和手機(jī)倒慧,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,729評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)包券,“玉大人纫谅,你說我怎么就攤上這事〗蹋” “怎么了付秕?”我有些...
    開封第一講書人閱讀 158,300評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)侍郭。 經(jīng)常有香客問我询吴,道長(zhǎng),這世上最難降的妖魔是什么励幼? 我笑而不...
    開封第一講書人閱讀 56,780評(píng)論 1 285
  • 正文 為了忘掉前任汰寓,我火速辦了婚禮,結(jié)果婚禮上苹粟,老公的妹妹穿的比我還像新娘有滑。我一直安慰自己,他們只是感情好嵌削,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,890評(píng)論 6 385
  • 文/花漫 我一把揭開白布毛好。 她就那樣靜靜地躺著,像睡著了一般苛秕。 火紅的嫁衣襯著肌膚如雪肌访。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 50,084評(píng)論 1 291
  • 那天艇劫,我揣著相機(jī)與錄音吼驶,去河邊找鬼。 笑死店煞,一個(gè)胖子當(dāng)著我的面吹牛蟹演,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播顷蟀,決...
    沈念sama閱讀 39,151評(píng)論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼酒请,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了鸣个?” 一聲冷哼從身側(cè)響起羞反,我...
    開封第一講書人閱讀 37,912評(píng)論 0 268
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤布朦,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后昼窗,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體是趴,經(jīng)...
    沈念sama閱讀 44,355評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,666評(píng)論 2 327
  • 正文 我和宋清朗相戀三年膏秫,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了右遭。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片做盅。...
    茶點(diǎn)故事閱讀 38,809評(píng)論 1 341
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡缤削,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出吹榴,到底是詐尸還是另有隱情亭敢,我是刑警寧澤,帶...
    沈念sama閱讀 34,504評(píng)論 4 334
  • 正文 年R本政府宣布图筹,位于F島的核電站帅刀,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏远剩。R本人自食惡果不足惜扣溺,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 40,150評(píng)論 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望瓜晤。 院中可真熱鬧锥余,春花似錦、人聲如沸痢掠。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,882評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)足画。三九已至雄驹,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間淹辞,已是汗流浹背医舆。 一陣腳步聲響...
    開封第一講書人閱讀 32,121評(píng)論 1 267
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留象缀,地道東北人蔬将。 一個(gè)月前我還...
    沈念sama閱讀 46,628評(píng)論 2 362
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像攻冷,于是被迫代替她去往敵國(guó)和親娃胆。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,724評(píng)論 2 351

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

  • 官方中文版原文鏈接 感謝社區(qū)中各位的大力支持等曼,譯者再次奉上一點(diǎn)點(diǎn)福利:阿里云產(chǎn)品券里烦,享受所有官網(wǎng)優(yōu)惠凿蒜,并抽取幸運(yùn)大...
    HetfieldJoe閱讀 8,677評(píng)論 0 29
  • 特別說明,為便于查閱胁黑,文章轉(zhuǎn)自https://github.com/getify/You-Dont-Know-JS...
    殺破狼real閱讀 647評(píng)論 0 3
  • 你不知道JS:異步 第三章:Promises 接上篇3-1 錯(cuò)誤處理(Error Handling) 在異步編程中...
    purple_force閱讀 1,391評(píng)論 0 2
  • 介紹 RxJS是一個(gè)異步編程的庫(kù)废封,同時(shí)它通過observable序列來(lái)實(shí)現(xiàn)基于事件的編程。它提供了一個(gè)核心的類型:...
    泓滎閱讀 16,590評(píng)論 0 12
  • 特別說明丧蘸,為便于查閱漂洋,文章轉(zhuǎn)自https://github.com/getify/You-Dont-Know-JS...
    殺破狼real閱讀 221評(píng)論 0 0