阅读 190

Rx之基本介绍

1,概述

It extends the observer pattern to support sequences of data and/or events and adds operators that allow you to compose sequences together declaratively while abstracting away concerns about things like low-level threading, synchronization, thread-safety, concurrent data structures, and non-blocking I/O.
它扩展了观察者模式以支持data和(或)event序列,并添加了操作符使你以声明的方式组合序列,并抽象出一些事务的问题,如: low-level threading, synchronization, thread-safety, concurrent data structures, and non-blocking I/O等。
主要成员:
  • Observable:流的源头,数据的生产者
  • Observer:流的消费者
  • Subscriber:连接observer和observable
  • Operator:可以在数据流的流向中对流进行各种处理
  • Subject:既是observable也是Observer
  • Schedulers:用来控制并发并且是中央集权的调度员,允许我们在发生计算时进行协调。如:setTimeout或者是requestAnimationFrame等

2,实现的基础

1,设计模式结合,观察者模式+迭代器模式;

1.1,观察者模式:

class Producer {
    constructor() {  //ES6中的构造函数
        this.listeners = [];
    }
    addListener(listener) { //添加listener
        if(typeof listener === 'function') {
            this.listeners.push(listener)
        } else {
            throw new Error('listener 必须是 function')
        }
    }
    removeListener(listener) { //移除listener
        this.listeners.splice(this.listeners.indexOf(listener), 1)
    }
    notify(message) { //发送通知
        this.listeners.forEach(listener => {
            listener(message);
        })
    }
}复制代码
使用的时候,先new一个Producer,再添加监听事件,然后再调用notify发送变更通知,从而形成一个完整的观察者模式。
1.2,迭代器模式
迭代器主要是让用户通过特定的接口访问容器的数据,而不需要了解容器内部的数据结构。
它主要有next方法(返回下一个item),若数据结束则返回null。

class IteratorFromArray {
    constructor(arr) {
        this._array = arr;
        this._cursor = 0;  //在迭代器内部起指针作用,类似于数组for循环中的下标i
    }

    next() {
        return this._cursor < this._array.length ?
        { value: this._array[this._cursor++], done: false } :
        { done: true };
    }
}复制代码
迭代器模式优点:
1,数据的获取是渐进式,可以用来做延迟计算;
2,迭代器本身是序列,可以用做所有遍历方法,如filter、map、reduce等。
如:

class IteratorFromArray {
    constructor(arr) {
        this._array = arr;
        this._cursor = 0;
    }

    next() {
        return this._cursor < this._array.length ?
        { value: this._array[this._cursor++], done: false } :
        { done: true };
    }

    map(callback) {
        const iterator = new IteratorFromArray(this._array);
        return {
            next: () => {
                const { done, value } = iterator.next();
                return {
                    done: done,
                    value: done ? undefined : callback(value)
                }
            }
        }
    }
}

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 }复制代码
代码中的上面的两点都涉及到了,当构建完map时,所有的结果不是都执行出来了,而是等到调用(next)时才会真正执行,这就是延迟计算。类似于ES6中的生成器。
1.3,总结:从第一、二段代码处得知观察者模式主要是生产端发出通知从而让消费端得到通知,而迭代器模式主要是消费端去主动获取事务从而得到变化。而Observable综合了二者的优点,即可以主动推送事务,同时又拥有序列的特性。

2,函数式编程+纯函数

2.1,函数式编程
特点:函数作为一等公民,允许把函数本身作为参数传入另一个函数,还允许返回一个函数!
2.2,纯函数
特点:不改变任何全局变量,所有的操作都在函数内部进行。同样的输入在任何时候都会得到同样的输出。