JSFiddle - React, Tailwind, and code Playground

by Jerry Hong

HTML

<script src="https://unpkg.com/@reactivex/[email protected]/dist/global/Rx.umd.js"></script>

Babel + JSX

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(); 
// egghead 同時具有 註冊監聽者及移除監聽者 兩種方法

Rx.Observable
  .fromEventPattern(
    (handler) => egghead.addListener(handler), 
    (handler) => egghead.removeListener(handler)
  )
  .subscribe(console.log)

egghead.notify('Hello! Can you hear me?');