Created
January 29, 2018 14:30
-
-
Save t8g/5d49e70622fbde48ec4485c09e3d0c74 to your computer and use it in GitHub Desktop.
Naïve Observable implementation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 1. une source de données | |
class DataSource { | |
ondata: (data: number) => void = () => { }; | |
interval: number; | |
constructor() { | |
let i = 0; | |
this.interval = setInterval(() => this.emit(++i), 1000); | |
} | |
emit(i: number) { | |
this.ondata(Math.floor(Math.random() * 100)); | |
if (i === 5) this.destroy(); | |
} | |
destroy() { | |
clearInterval(this.interval); | |
} | |
} | |
// 2. Observer | |
interface BasicObserver { | |
next: (value: any) => void; | |
} | |
// 3. Observable | |
class SimpleObservable { | |
constructor(private onsubscribe: (obs: BasicObserver) => void) { } | |
subscribe(obs: BasicObserver) { | |
this.onsubscribe(obs); | |
} | |
map(cb: (data: any) => any) { | |
const o$ = new SimpleObservable((obs: BasicObserver) => { | |
this.subscribe({ | |
next: v => obs.next(cb(v)) | |
}); | |
}); | |
return o$; | |
} | |
filter(cb: (data: any) => any) { | |
const o$ = new SimpleObservable((obs: BasicObserver) => { | |
this.subscribe({ | |
next: v => { | |
if (cb(v)) obs.next(v); | |
} | |
}); | |
}); | |
return o$; | |
} | |
tap(cb: (data: any) => any) { | |
const o$ = new SimpleObservable((obs: BasicObserver) => { | |
this.subscribe({ | |
next: v => { | |
cb(v); | |
obs.next(v); | |
} | |
}); | |
}); | |
return o$; | |
} | |
} | |
// 4. Un Observable de DataSource | |
class DataObservable extends SimpleObservable { | |
constructor() { | |
super((obs: BasicObserver) => { | |
const source = new DataSource(); | |
source.ondata = obs.next; | |
}); | |
} | |
} | |
// 5. testons ça | |
const o$ = new DataObservable() | |
.tap(x => { console.log('tap ', x); }) | |
.filter(x => x > 50) | |
.map(x => `yeah ${ x }`); | |
o$.subscribe({ | |
next: (i) => { console.log('observer 1', i); } | |
}); | |
Delapouite
commented
Jan 29, 2018
// 1. une source de données
class DataSource {
ondata: (data: number) => void = () => { };
interval: number;
constructor() {
let i = 0;
this.interval = setInterval(() => this.emit(++i), 1000);
}
emit(i: number) {
this.ondata(Math.floor(Math.random() * 100));
if (i === 5) this.destroy();
}
destroy() {
clearInterval(this.interval);
}
}
// 2. Observer
interface BasicObserver {
next: (value: any) => void;
}
// 3. Observable
class SimpleObservable {
constructor(private onsubscribe: (obs: BasicObserver) => void) { }
subscribe(obs: BasicObserver) {
this.onsubscribe(obs);
}
map(cb: (data: any) => any) {
const o$ = new (<any>this.constructor)((obs: BasicObserver) => {
this.subscribe({
next: v => obs.next(cb(v))
});
});
return o$;
}
filter(cb: (data: any) => any) {
const o$ = new (<any>this.constructor)((obs: BasicObserver) => {
this.subscribe({
next: v => {
if (cb(v)) obs.next(v);
}
});
});
return o$;
}
tap(cb: (data: any) => any) {
const o$ = new (<any>this.constructor)((obs: BasicObserver) => {
this.subscribe({
next: v => {
cb(v);
obs.next(v);
}
});
});
return o$;
}
}
// 4. Un Observable de DataSource
class DataObservable extends SimpleObservable {
constructor() {
super((obs: BasicObserver) => {
const source = new DataSource();
source.ondata = obs.next;
});
}
hello() {
console.log('hello')
}
}
// 5. testons ça
const o$ = new DataObservable()
.tap(x => { console.log('tap ', x); })
.filter(x => x > 50)
.map(x => `yeah ${ x }`);
o$.subscribe({
next: (i) => { console.log('observer 1', i); }
});
o$.hello();
console.log(o$ instanceof SimpleObservable)
console.log(o$ instanceof DataObservable)
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment