《深刻淺出rxjs》閱讀

1.觀察者模式

將邏輯分爲發佈者 （負責產⽣事件並通知全部註冊掛上號的觀察者）和觀察者（被註冊上某個發佈者，只管接收到事件以後就處理）

在rxjs中：

• 如何產⽣事件，這是發佈者的責任，在RxJS中是Observable對象的⼯ 做。

• 如何響應事件，這是觀察者的責任，在RxJS中由subscribe的參數來決 定。

• 什麼樣的發佈者關聯什麼樣的觀察者，也就是什麼時候調⽤subscribe

2.迭代器模式

提供⼀個通⽤的接口，讓使⽤者徹底不⽤關⼼這個數據集合的具體實現⽅式。

一般都應該包含這樣⼏個函數：

• ·getCurrent，獲取當前被遊標所指向的元素。

• ·moveToNext，將遊標移動到下⼀個元素，調⽤這個函數以後， getCurrent得到的元素就會不一樣。

• ·isDone，判斷是否已經遍歷完全部的元素。

在rxjs中應用：subscribr以後不斷進行推送。

3.Observable

var theObserver = { //觀察者響應事件
next: item => console.log(item), //表達如今要推送的數據
complete: () => console.log('No More Data'),//推送完結，通常不寫
error: () => {console.log('wrong')}//出錯
}
var onSubscribe = observer => { //發佈者發佈事件
	var number = 1;
	var handle = setInterval(() => {
		observer.next(number++);
	}, 1000)
	return {
	unsubscribe: () => { //退訂
	//clearInterval(handle);
	}
	};
};
var source$ = new Rx.Observable(onSubscribe);
source$.subscribe(theObserver)
setTimeout(() => {
	source$.unsubscribe();
}, 3500);
//Observable產⽣的事件，只有Observer經過subscribe訂閱以後纔會收到，在unsubscribe以後就不會再收到。
複製代碼

1.hot Observable

const producer = new Producer();//獨立一個的生產者
const cold$ = new Observable(observer => {
// 而後讓observer去接受producer產⽣的數據
});
複製代碼

2.Cold Observable

const cold$ = new Observable(observer => {
const producer = new Producer();//對每⼀次subscribe都產⽣⼀個「⽣產者」，
// 而後讓observer去接受producer產⽣的數據
});
複製代碼

4.操做符 根據功能，操做符能夠分爲如下類別：

·建立類（creation）

·轉化類（transformation）

·過濾類（filtering）

·合併類（combination）

·多播類（multicasting）

·錯誤處理類（error Handling）

·輔助⼯具類（utility）

·條件分⽀類（conditional&boolean）

·數學和合計類（mathmatical&aggregate）

常見的操做符：

1.create（類函數）建立 Observable對象

2.map,filter(實例函數)相似於數組的map,filter

使用bind綁定特定Observable對象（不能鏈式調用）， ：：（綁定操做符，鏈式調用）：

const operator = map.bind(source$);
const result$ = operator(x => x * 2);

const result$ = source$::map(x => x * 2).filter(x => x % 3 !== 0);
複製代碼

操做符的實現例如map： 每一個操做符都是⼀個函數，無論實現什麼功能，都必須考慮下⾯這些 功能要點： ·返回⼀個全新的Observable對象。

·對上游和下游的訂閱及退訂處理。

·處理異常狀況。

·及時釋放資源。

咱們以最簡單的map操做符實現來講明上⾯的要點。

function map(project) {
    return new Observable(observer => {
        const sub = this.subscribe({
            next: value => {
            try {
                observer.next(project(value));
            } catch (err) {
                observer.error(err);
            }
        },
            error: err => observer.error(error),
            complete: () => observer.complete(),
        });
    });
}
複製代碼

。。。持續更新中