rxjs入门4之rxjs模式设计

观察者模式 （Observer Pattern）

观察者模式其实在日常编码中经常遇到，比如DOM的事件监听，代码如下

function clickHandler(event) {
    console.log('user click!');
}
document.body.addEventListener('click', clickHandler)

简而言之：观察者模式就如同上代码，有一个事件源‘dom 的click事件’ 也就是abservable,有一个观察者abserver clickHandler函数，有一个订阅机制（addEventLister）,当dom的click事件触发时候，会通过订阅机制通知abserver 执行函数clickHandler函数。

下面是构建一个观察者模式的简单例子

function Producer() {

    // 这个 if 只是避免使用者不小心把 Producer 当作函式来调用
    if(!(this instanceof Producer)) {
      throw new Error('请用 new Producer()!');
      // 仿 ES6 行为可用： throw new Error('Class constructor Producer cannot be invoked without 'new'')
    }

    this.listeners = [];
}

// 加入监听的方法
Producer.prototype.addListener = function(listener) {
    if(typeof listener === 'function') {
        this.listeners.push(listener)
    } else {
        throw new Error('listener 必须是 function')
    }
}

// 移除监听的方法
Producer.prototype.removeListener = function(listener) {
    this.listeners.splice(this.listeners.indexOf(listener), 1)
}

// 发送通知的方法
Producer.prototype.notify = function(message) {
    this.listeners.forEach(listener => {
        listener(message);
    })
}

接下来建立实例

var egghead = new Producer();
// new 出一个 Producer 实例叫 egghead

function listener1(message) {
    console.log(message + 'from listener1');
}

function listener2(message) {
    console.log(message + 'from listener2');
}

egghead.addListener(listener1); // 注册监听
egghead.addListener(listener2);

egghead.notify('A new course!!') // 当某件事情方法时，执行
//a new course!! from listener1
//a new course!! from listener2

迭代器模式 （Iterator Pattern）

Iterator 是一个物件，它的就像是一个指针(pointer)，指向一个资料结构并产生一个序列(sequence)，这个序列会有资料结构中的所有元素(element)。

迭代者（Iterator，也称为“迭代器”）指的是能够遍历⼀个数据集合的对象，因为数据集合的实现⽅式很多，可以是⼀个数组，也可以是⼀个树形结构，也可以是⼀个单向链表……迭代器的作⽤就是提供⼀个通⽤的接口，让使⽤者完全不⽤关⼼这个数据集合的具体实现⽅式。

自己实现简单的迭代器

function IteratorFromArray(arr) {
    if(!(this instanceof IteratorFromArray)) {
        throw new Error('请用 new IteratorFromArray()!');
    }
    this._array = arr;
    this._cursor = 0;
}

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

补充 - ES6 生成器

生成器是一种返回迭代器的函数，通过function关键字后的星号(*)来表示，函数中会用到新的关键字yield。星号可以紧挨着function关键字，也可以在中间添加一个空格

// 生成器
function *createIterator() {
    yield 1;
    yield 2;
    yield 3;
}
// 生成器能像正规函数那样被调用，但会返回一个迭代器
let iterator = createIterator();
console.log(iterator.next().value); // 1
console.log(iterator.next().value); // 2
console.log(iterator.next().value); // 3

function *createIterator(items) {
    for (let i = 0; i < items.length; i++) {
        yield items[i];
    }
}
let iterator = createIterator([1, 2, 3]);
console.log(iterator.next()); // "{ value: 1, done: false }"
console.log(iterator.next()); // "{ value: 2, done: false }"
console.log(iterator.next()); // "{ value: 3, done: false }"
console.log(iterator.next()); // "{ value: undefined, done: true }"
// 之后的所有调用
console.log(iterator.next()); // "{ value: undefined, done: true }"

Observable 其实就是这两个 Pattern 思想的结合，Observable 具备生产者推送资料的特性，同时能像序列，拥有序列处理资料的方法(map, filter...)！

更简单的来说，Observable 就像是一个序列，裡面的元素会随著时间推送。