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