30 天精通 RxJS 笔记1

什么是 Observable ?

Observer Pattern

class Producer {
  constructor() {
    this.listeners = [];
  }
  addListener(listener) {
    if (typeof listener === 'function') {
      this.listeners.push(listener)
    } else {
      throw new Error('listener 必須是 function')
    }
  }
  removeListener(listener) {
    this.listeners.splice(this.listeners.indexOf(listener), 1)
  }
  notify(message) {
    this.listeners.forEach(listener => {
      listener(message);
    })
  }
}
var egghead = new Producer();

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!!') // 当某件事情发生时，执行

以上代码很好的说明了 Observer Pattern 如何在事件(event)跟监听者(listener)的互动

Iterator Pattern

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);

console.log(newIterator.next()); 
// { value: 4, done: false }
console.log(newIterator.next());
// { value: 5, done: false }
console.log(newIterator.next());
// { value: 6, done: false }
console.log(newIterator.next());
// { value: undefined, done: true }

Iterator 是一个对象，就像是一个指针(pointer)，指向一个数据结构并产生一个序列(sequence)，这个序列会有数据结构中的所有元素(element)。

延迟运算

function* getNumbers(words) {
  for (let word of words) {
    if (/^[0-9]+$/.test(word)) {
        yield parseInt(word, 10);
    }
  }
}

const iterator = getNumbers('30 天精通 RxJS (04)');

console.log(iterator.next());
// { value: 3, done: false }
console.log(iterator.next());
// { value: 0, done: false }
console.log(iterator.next());
// { value: 0, done: false }
console.log(iterator.next());
// { value: 4, done: false }
console.log(iterator.next());
// { value: undefined, done: true }

当我们把一个字符串丢进 getNumbers 函数时，并没有马上运算出字符串中的所有数字，必须等到我们执行 next() 时，才会真的做运算，这就是所谓的延迟运算