從命令式到響應式（三）

k00baa 發布于2019-08-23 11:39 / 1608人閱讀

摘要：它有三個方法，用來通知下一個值是什么方法在上產生錯誤時通知觀察者，方法用來通知觀察者當前流上的值已經發射完畢。除此之外在我們不需要訂閱時，觀察者還應該能夠安全的退出。

上次說了響應式中使用的設計模式，今天我們主要來看rxjs中實現響應式的三大件，Observable, subject 和 Subscription;

Observable--可觀測序列

在第一節中介紹過 push 類型的系統和 pull 類型的系統，它們都可以產生值：

	產生單個值	產生多個值
pull	function	iterator
push	promise	？

在es6中promise已經被原生支持了，但是并沒有一種原生的方法來實現push系統中產生多個值，于是Observable添補了這一空白。

// 創建一個observable
const observable = Rx.Observable.create(function(observer) {
    observer.next(1);
    observer.next(2);
    observer.next(3);
    setTimeout(() => {
        observer.next(4);
        observer.complete();
    },1000);
});

console.log("just before subscribe");

// 通過 subscribe 方法來獲取 observable 上的值
observable.subscribe({
    next: x => console.log("got value " + x),
    error: err => console.error("something wrong occurred: " + err),
    complete: () => console.log("done"),
});

console.log("just after subscribe);

這段代碼執行后將會得到如下結果：

just before subscribe
got value 1
got value 2
got value 3
just after subscribe
got value 4
done

從結果可以看出通過一次訂閱我們就可以拿到一個observable上所有推送過來的值，另外請注意看輸出的順序，1，2，3在 after之前，而4在after之后，這說明observable發出的值不一定都是異步或都是同步，什么時間可以取到值完全取決于以哪種方式發出。

上面代碼中還有幾個地方可能需要解釋下：

create：它實際上是Observable 的構造函數的別名，換句話說可以用 new Rx.Observable(...) 取代。

observer：觀察者，顧名思義，這個東西就是我們上一節講過的觀察者模式中的觀察者，這里它是由rxjs負責給我們傳遞進來，實際上它就是我們在subscribe()中傳入的那個對象。它有三個方法，next用來通知下一個值是什么；error 方法在 observable 上產生錯誤時通知觀察者，complete方法用來通知觀察者當前流上的值已經發射完畢。

subscribe: 它就是Observable類提供的方法，用來獲取可觀測序列上發出的值，接收一觀察者作為參數。當然，上面的代碼可以寫成:

observable.subscribe(

x => console.log("got value " + x),
err => console.error("something wrong occurred: " + err),
() => console.log("done"),

);

第一個參數處理next通知，第二個參數處理error通知，第三個參數處理complete通知，我們還可以選擇是否處理 error 通知和 complete通知，也就是說第二，三個參數還可以省略。當然rxjs內部還會把我們傳入的參數處理成那個觀察者對象。

以上代碼中，我們實際已完成了observable 的創建（通過create），訂閱（通過subscribe），執行（調用 next 和 complete）過程。除此之外在我們不需要訂閱時，觀察者還應該能夠安全的退出。

subscription

這就是我們取消訂閱時的所要用到的東西，上面的訂閱代碼完整的寫法應該是：

const subscription = observable.subscribe({...});

它是我們訂閱一個observable后獲取到的，也就是subscribe方法的返回值，它上面有3個重要的方法。

unsubscribe 顧名思義，取消訂閱。

add 添加另外一個subscription。在有多個subscription時我們可以通過這個方法將它們都鏈接起來，這樣取消時只需要取消一個，而不必調用每個 subscription 的unsubscribe 方法。

remove 當然能添加必然可以移除。從當前的 subscription 上移除另一個 subscription

// 取消之前的訂閱
subscription.unsubscribe();

//重新訂閱之前我們創建的observable，取消訂閱時逐個調用它們的unsubscribe方法
const subscription1 = observable.subscribe({...});
const subscription2 = observable.subscribe({...});
const subscription3 = observable.subscribe({...});

//重新訂閱之前我們創建的observable，取消訂閱時只調用一次unsubscribe
const sub$$ = observable.subscribe({...})

.add(observable.subscribe({...}))
.add(observable.subscribe({...}));

subject

它即是observable，也是observer，所以它即可以被 subscribe 又可以通過next，error，complete發射值。下面的例子中，我們給 Subject 添加了兩個觀察者，然后給它添加一些值：

const subject = new Rx.Subject();

subject.subscribe({
    next: v => console.log("observerA: " + v)
});

subject.subscribe({
    next: v => console.log("observerB: " + v)
});

subject.next(1);
subject.next(2);

執行后的輸出：

observerA: 1
observerB: 1
observerA: 2
observerB: 2
由于 Subject 也是一個 Observer ，所以你可以把他傳遞給一個 Observable 的subscribe方法：

var subject = new Rx.Subject();

subject.subscribe({
    next: v => console.log("observerA: " + v)
});

subject.subscribe({
    next: v => console.log("observerB: " + v)
});

var observable = Rx.Observable.from([1,2,3]);

observable.subscribe(subject); // 通過 Subject 來訂閱這條 Observable

執行后輸出：

observerA: 1
observerB: 1
observerA: 2
observerB: 2
observerA: 3
observerB: 3

通過上面的方法，我們基本上就借助 Subject 把一個單播的 Observable 轉換成了多播的。這個示例僅僅是演示了一種將一個執行上下文分享給多個觀察者的方法。

上面代碼中有一個from方法，它的作用就是來創建一個可觀測序列，類似于之前的create方法，但更加簡潔，在rxjs中，它有個專門的名稱叫個操作符，通過各種各樣的操作符我們就可以實現可觀測序列的創建，以及對序列中的數據進行各種各樣的轉換，可以說使用rxjs時我們大部分的時候都在使用各種各樣的操作符。

云服務器 GPU云服務器響應式響應式布局響應式網站響應式設計

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/97263.html

從命令式到響應式（一）

摘要：響應式命令式這兩種編程風格的思維方式是完全相反的。第二種方式是工人主動去找工人索取生產手機所要的零件，然后生產一臺完整的手機，這兩種方式就對應的響應式和命令式。 angular2中內置了rxjs，雖然框架本身并沒有強制開發者使用響應式風格來組織代碼，但是從框架開發團隊的角度可以看出他們必然是認同這種編程風格的。rxjs本質是基于函數式編程的響應式風格的庫，函數式相對于面向對象來說更加抽...

JayChen 2019-08-23 11:39 評論0 收藏0
javascript 函數式編程思想

摘要：今天這篇文章主要介紹函數式編程的思想。函數式編程通過最小化變化使得代碼更易理解。在函數式編程里面，組合是一個非常非常非常重要的思想。可以看到函數式編程在開發中具有聲明模式。而函數式編程旨在盡可能的提高代碼的無狀態性和不變性。最開始接觸函數式編程的時候是在小米工作的時候，那個時候看老大以前寫的代碼各種 compose，然后一些 ramda 的一些工具函數，看著很吃力，然后極力吐槽函數式...

YPHP 2019-08-23 14:09 評論0 收藏0
響應式設計個人的一些總結

摘要：所以一個網，甚至是響應式設計，在兩個平臺上都會損害您整體的。三響應式與如果把網站作為一個單獨的網站，如果網站的內容與桌面版的內容相對缺少，導致用戶回到桌面端的網站，會記錄這種選擇，使搜索排名降低，國內百度就不知道會怎樣。一、為什么需要響應式設計（responsible web design） 1. 響應式發展背景 1、屏幕尺寸的快速變化，iphone為320x480，分辨率在未來可以...

LeoHsiun 2019-08-01 15:32 評論0 收藏0
從命令式到響應式（六）

摘要：從這個系列的第一章開始到第五章，基于的響應式編程的基礎知識基本上就介紹完了，當然有很多知識點沒有提到，比如，等，不是他們不重要，而是礙于時間精力等原因沒辦法一一詳細介紹。從這個系列的第一章開始到第五章，基于rxjs的響應式編程的基礎知識基本上就介紹完了，當然有很多知識點沒有提到，比如 Scheduler, behaviorSubject，replaySubject等，不是他們不重要，...

sanyang 2019-08-23 11:39 評論0 收藏0
攻克前端javascript面試:什么是函數式編程？

摘要：僅在幾年以前，僅有少數的程序員知道函數式編程是什么。函數式編程是聲明性的而不是命令式的應用狀態流經純函數中。函數式編程是一種編程模式。在理解軟件是如何使用函數式編程構建時，理解函數組合是非常重要的一步。不可變性是函數式編程的核心概念。函數式編程已然變成了一個javascript語言中一個非常熱門的話題。僅在幾年以前，僅有少數的js程序員知道函數式編程是什么。但是在過去三年中，我所見過...

wslongchen 2019-08-23 10:41 評論0 收藏0