RxJS簡介

成都創(chuàng)新互聯(lián)公司專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于網(wǎng)站設(shè)計制作、網(wǎng)站設(shè)計、蕪湖縣網(wǎng)絡(luò)推廣、微信小程序、蕪湖縣網(wǎng)絡(luò)營銷、蕪湖縣企業(yè)策劃、蕪湖縣品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運營等，從售前售中售后，我們都將竭誠為您服務(wù)，您的肯定，是我們最大的嘉獎；成都創(chuàng)新互聯(lián)公司為所有大學生創(chuàng)業(yè)者提供蕪湖縣建站搭建服務(wù)，24小時服務(wù)熱線：18980820575，官方網(wǎng)址：chinadenli.net

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

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

觀察者模式

Observer Pattern 定義

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

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

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

import { of } from 'rxjs';

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

source$.subscribe(console.log);

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

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

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

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

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

迭代器模式

Iterator Pattern 定義

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

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

const array = [1, 2, 3];

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

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

在ES6中迭代器模式：

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

value屬性獲取當前的值

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

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

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

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

import { interval } from 'rxjs';

const source$ = interval(1000);

source$.subscribe(console.log);

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

退訂Observable

Observable和Observer之間初了通過subscribe將兩者進行聯(lián)系，有時也需要在一定條件下將兩者的關(guān)系進行斷開。在RxJS中，subscribe函數(shù)的返回結(jié)果是subscription對象，調(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對象就是一個數(shù)據(jù)流，可以在一個時間范圍內(nèi)生產(chǎn)一系列數(shù)據(jù)，如果僅有一個Observer的簡單場景無需考慮太多，但是對于存在多個Observer的場景的復(fù)雜場景，尤其是當多個Observer并不是同時訂閱，那就需要考慮兩個傳遞合適產(chǎn)生的數(shù)據(jù)給Observer。兩種選擇：

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

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

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

新聞標題：rxjs核心概念之Observable
新聞來源：http://chinadenli.net/article34/gedsse.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供、外貿(mào)網(wǎng)站建設(shè)、ChatGPT、域名注冊、網(wǎng)站收錄、企業(yè)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)