Skip to content

Instantly share code, notes, and snippets.

@msociety

msociety/rx.js

Last active August 28, 2022 21:01
Download ZIP

Revisions

  1. msociety revised this gist May 2, 2018. 1 changed file with 5 additions and 1 deletion.
    6 changes: 5 additions & 1 deletion rx.js
    View file
    Original file line number Diff line number Diff line change
    @@ -52,13 +52,17 @@ function delay(period) {

    function createObservable(subscribe) {
    return {
    subscribe: subscribe,
    subscribe: subscribe, // "subscribe" === "giveMeSomeData"
    map: map,
    filter: filter,
    delay: delay
    };
    }

    // Using it:
    // ---------

    // "Observable" === "stream of events"
    const arrayObservable = createObservable(function subscribe(ob) {
    [10, 20, 30].forEach(ob.next);
    ob.complete();
  2. msociety revised this gist May 2, 2018. 1 changed file with 4 additions and 3 deletions.
    7 changes: 4 additions & 3 deletions rx.js
    View file
    Original file line number Diff line number Diff line change
    @@ -23,8 +23,9 @@ function filter(conditionFn) {
    const outputObservable = createObservable(function subscribe(outputObserver) {
    inputObservable.subscribe({
    next: function(x) {
    const y = conditionFn(x);
    outputObserver.next(y);
    if (conditionFn(x)) {
    outputObserver.next(x);
    }
    },
    error: e => outputObserver.error(e),
    complete: () => outputObserver.complete()
    @@ -64,7 +65,7 @@ const arrayObservable = createObservable(function subscribe(ob) {
    });

    const clickObservable = createObservable(function subscribe(ob) {
    document.addEventListener("click", ob.next());
    document.addEventListener("click", ob.next);
    });

    const observer = {
  3. msociety revised this gist May 2, 2018. 1 changed file with 3 additions and 0 deletions.
    3 changes: 3 additions & 0 deletions rx.js
    View file
    Original file line number Diff line number Diff line change
    @@ -15,6 +15,7 @@ function map(transformFn) {
    complete: () => outputObserver.complete()
    });
    });
    return outputObservable;
    }

    function filter(conditionFn) {
    @@ -29,6 +30,7 @@ function filter(conditionFn) {
    complete: () => outputObserver.complete()
    });
    });
    return outputObservable;
    }

    function delay(period) {
    @@ -44,6 +46,7 @@ function delay(period) {
    complete: () => outputObserver.complete()
    });
    });
    return outputObservable;
    }

    function createObservable(subscribe) {
  4. msociety created this gist May 2, 2018.
    88 changes: 88 additions & 0 deletions rx.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,88 @@
    /*
    * André Staltz (@andrestaltz): You will learn RxJS at ng-europe 2016
    * https://www.youtube.com/watch?v=uQ1zhJHclvs
    */

    function map(transformFn) {
    const inputObservable = this;
    const outputObservable = createObservable(function subscribe(outputObserver) {
    inputObservable.subscribe({
    next: function(x) {
    const y = transformFn(x);
    outputObserver.next(y);
    },
    error: e => outputObserver.error(e),
    complete: () => outputObserver.complete()
    });
    });
    }

    function filter(conditionFn) {
    const inputObservable = this;
    const outputObservable = createObservable(function subscribe(outputObserver) {
    inputObservable.subscribe({
    next: function(x) {
    const y = conditionFn(x);
    outputObserver.next(y);
    },
    error: e => outputObserver.error(e),
    complete: () => outputObserver.complete()
    });
    });
    }

    function delay(period) {
    const inputObservable = this;
    const outputObservable = createObservable(function subscribe(outputObserver) {
    inputObservable.subscribe({
    next: function(x) {
    setTimeout(() => {
    outputObserver.next(x);
    }, period);
    },
    error: e => outputObserver.error(e),
    complete: () => outputObserver.complete()
    });
    });
    }

    function createObservable(subscribe) {
    return {
    subscribe: subscribe,
    map: map,
    filter: filter,
    delay: delay
    };
    }

    const arrayObservable = createObservable(function subscribe(ob) {
    [10, 20, 30].forEach(ob.next);
    ob.complete();
    });

    const clickObservable = createObservable(function subscribe(ob) {
    document.addEventListener("click", ob.next());
    });

    const observer = {
    next: function nextCallback(data) {
    console.log(data);
    },
    error: function errorCallback(data) {
    console.log(data);
    },
    complete: function completeCallback(data) {
    console.log("done");
    }
    };

    arrayObservable
    .map(x => x / 10)
    .filter(x => x !== 2)
    .subscribe(observer);

    clickObservable
    .map(ev => ev.clientX)
    .filter(x => x > 200)
    .delay(2000)
    .subscribe(observer);