rxjs入門4之rxjs模式設計

觀察者模式其實在日常編碼中經常遇到，比如dom的事件監聽，**如下

function clickhandler(event) 
document.body.addeventlistener('click', clickhandler)

簡而言之：觀察者模式就如同上**，有乙個事件源『dom 的click事件』也就是abservable,有乙個觀察者abserver clickhandler函式，有乙個訂閱機制（addeventlister）,當dom的click事件觸發時候，會通過訂閱機制通知abserver 執行函式clickhandler函式。

下面是構建乙個觀察者模式的簡單例子

function producer() 
this.listeners = ;
}// 加入監聽的方法
producer.prototype.addlistener = function(listener) else 
}// 移除監聽的方法
producer.prototype.removelistener = function(listener) 
// 傳送通知的方法
producer.prototype.notify = function(message) )
}

接下來建立例項

var egghead = new producer(); 
// new 出乙個 producer 例項叫 egghead
function listener1(message) 
function listener2(message) 
egghead.addlistener(listener1); // 註冊監聽
egghead.addlistener(listener2);
egghead.notify('a new course!!') // 當某件事情方法時，執行
//a new course!! from listener1
//a new course!! from listener2

iterator 是乙個物件，它的就像是乙個指標(pointer)，指向乙個資料結構並產生乙個序列(sequence)，這個序列會有資料結構中的所有元素(element)。

迭代者（iterator，也稱為「迭代器」）指的是能夠遍歷⼀個資料集合的物件，因為資料集合的實現⽅式很多，可以是⼀個陣列，也可以是⼀個樹形結構，也可以是⼀個單向鍊錶……迭代器的作⽤就是提供⼀個通⽤的介面，讓使⽤者完全不⽤關⼼這個資料集合的具體實現⽅式。

自己實現簡單的迭代器

function iteratorfromarray(arr) 
this._array = arr;
this._cursor = 0; 
}iteratorfromarray.prototype.next = function() :;}

生成器是一種返回迭代器的函式，通過function關鍵字後的星號(*)來表示，函式中會用到新的關鍵字yield。星號可以緊挨著function關鍵字，也可以在中間新增乙個空格

// 生成器
function *createiterator() 
// 生成器能像正規函式那樣被呼叫，但會返回乙個迭代器
let iterator = createiterator();
console.log(iterator.next().value); // 1
console.log(iterator.next().value); // 2
console.log(iterator.next().value); // 3
function *createiterator(items) 
}let iterator = createiterator([1, 2, 3]);
console.log(iterator.next()); // ""
console.log(iterator.next()); // ""
console.log(iterator.next()); // ""
console.log(iterator.next()); // ""
// 之後的所有呼叫
console.log(iterator.next()); // ""

observable 其實就是這兩個 pattern 思想的結合，observable 具備生產者推送資料的特性，同時能像序列，擁有序列處理資料的方法(map, filter...)！

更簡單的來說，observable 就像是乙個序列，裡面的元素會隨著時間推送。

rxjs入門4之rxjs模式設計

RxJS入門（4）深入Sequence

Rxjs 學習入門

譯 RxJS 排程器入門

rxjs入門4之rxjs模式設計

RxJS入門（4） 深入Sequence

Rxjs 學習入門

譯 RxJS 排程器入門

相關推薦

RxJS入門（4）深入Sequence