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的很多问题就很容易学习了。