RxJS的學習之路二（觀察者模式和迭代器模式）

學習RxJS，其實就是學習一種觀察者模式（Observer Pattern）和迭代器模式（Iterator Pattern）結合下的流式編程，那麼首先要學的，也是很重要的一點就是理解這兩種模式。

---

觀察者模式（Observer Pattern）

觀察者模式咱們常常能夠碰見，最多見的例子就是js中添加事件監聽的api就是用了觀察者模式

document.body.addEventListener('click', callBack)
複製代碼

這樣的模式就是建立了一個監聽器，在所監聽事件發生時，執行callBack函數。學習的最好方式就是本身寫一遍，因此咱們能夠用ES6語法寫一個觀察者模式的對象。

class MyObserable {
  constructor(){
    this.listeners = [];
  }
  //加入監聽
  addListener(func) {
    if(typeof func === 'function') {
      this.listeners.push(func)
    } else {
      throw new Error('參數必須爲函數')
    }
  }
  // 移除監聽
  removeListener(func) {
    this.listeners.splice(this.listeners.indexOf(func), 1)
  }
  // 觸發監聽
  notify(message) {
    this.listeners.forEach(func => {
      func(message)
    })
  }
}
複製代碼

實例化這個對象就能夠建立一個最簡單的監聽器

var listener = new MyObserable()
listener.addListener(mes => console.log('一號監聽器獲取信息：'+ mes))
listener.addListener(mes => console.log('二號監聽器獲取信息：'+ mes))

listener.notify('rua!!')
複製代碼

能夠打印出信息

一號監聽器獲取信息：rua!!
二號監聽器獲取信息：rua!!
複製代碼

這個簡單的例子咱們能夠看到，在觀察者模式中，事件和監聽分離，作到了很好的去耦合。

迭代器模式（Iterator Pattern）

迭代器模式的例子就是ES6語法中自帶的迭代器Iterator 在ES6中創建Iterator的方法

var arr = [1, 2, 3];

var iterator = arr[Symbol.iterator]();

iterator.next();
// { value: 1, done: false }
iterator.next();
// { value: 2, done: false }
iterator.next();
// { value: 3, done: false }
iterator.next();
// { value: undefined, done: true }
複製代碼

ES6的迭代器中只有一個next方法，next返回兩種結果：

1. 在最後一個元素前： { done: false, value: elem }
2. 在最後一個元素及以後： { done: true, value: undefined }

在瞭解規則後，咱們一樣能夠寫一個簡單的迭代器

class IteratorFromArr {
  constructor(arr) {
    this.array = arr;
    this.index = 0;
  }

  next() {
    return  this.index < this.array.length ? 
            {value: this.array[this.index++], done: false} :
            {done: true}
  }
}
複製代碼

迭代器的原理不難，它的優點有兩個：

• 它能夠漸進地獲取數據，實現懶運算或者懶加載
• 它自己輸出一個序列，因此可使用各類數組的方法

var iterator = new IteratorFromArray([1,2,3]);
var newIterator = iterator.map(value => value + 3);

newIterator.next();
// { value: 4, done: false }
newIterator.next();
// { value: 5, done: false }
newIterator.next();
// { value: 6, done: false }
複製代碼

瞭解了觀察者模式和迭代器模式，RxJS的Observable就是基於這二者實現的，咱們能夠更好地去理解，而理解了Observable，RxJS的不少問題就很容易學習了。