用 Observable 包裹 function 以创建热监听器

Question

Few things before hand:

This is going to be long and precise cause I really want to make my problem clear

I've read the RXJS docs I've seen this Wrap an API function in an RxJs Observable post. I've seen several other posts. none, unfortunately, helped me out.

I'm writing in Vue 2.6

I've created a wrapper to easily manage RXJS in my Vue application I've instantiated an RXJS instance as a singletone object in my application

Vue.prototype.$rx = Rxjs;

I've also stored this instance of my RXJS in my VUEX

store.commit('setProperty', {key: 'rx', value: Vue.prototype.$rx})

So that I can utilise RXJS in my VUEX store

my RXJS object is just a wrapper

export const Rxjs = {
    create(namespace, subjectType = 'subject') {
        this[namespace] = new RxjsInstance(subjectType)
    }
}

which instantiates a new RXJS class for each namespace in my application based on my VUEX namespaced modules

So for a "Homepage" screen I've got both a Homepage VUEX module an now an RXJS (if is needed - they do not instantiate automatically) instance to hold homepage's subscriptions based on this class:

export class RxjsInstance {
    constructor(subjectType) {
        this.subscriptions = new Subscription();
        switch (subjectType) {
            case 'subject':
                this.subject = new Subject();
                break;
            case 'asyncSubject':
                this.subject = new AsyncSubject();
                break;
            case 'behaviorSubject':
                this.subject = new BehaviorSubject(null);
                break;
            case 'replaySubject':
                this.subject = new ReplaySubject();
                break;
        }
    }

    next(data) {
        this.subject.next(data);
    }

    asObservable() {
        return this.subject.asObservable();
    }

    set add(subscription) {
        this.subscriptions.add(subscription);
    }

    subscribe(subscriber, callback) {
        if (!subscriber) {
            throw 'Failed to subscribe. Please provide a subscriber'
        }
        subscriber = this.asObservable().subscribe(data => {
            callback(data)
        });
        this.subscriptions.add(subscriber)
    }

    unsubscribe() {
        this.subscriptions.unsubscribe();
    }
}

In short - this class literally returns a barebone RXJS functionality with the added value of having the subscriptions automatically saved in a local array of the instance for easier control and prevention of memory leaks - nothing fancy - just simplification for my team.

So as it stands I've got a gloal RXJS object that sits everywhere in my application - that I can access from every component and allows me to transmit data from point A to point B without having to use several 'props' and an equal amount of emits between parent and child component. all that without touching my VUEX state (which unlike Redux is not an immutable) So that when I do mutate my state - Its clean and controlled data.

NOW for my problem.

I'm trying to figure out a way to use RXJS to wrap an existing function with an observable so that I can subscribe to it whenever the function is called.

Lets say I've got a alertUser(msg) function which just appends the 'msg' arg to a

element in my DOM.

I'd like to 'subscribe' to this function - without changing it at all! by wrapping it with an observable or assigning one to it. I'm not sure that's doable - because all I've seen RXJS doing is creating an observable that performs the function and then subbing to it. but because I'm integrating RXJS into an already existing application - I can't refactor everything to an observable.

So my end goal is

alertUser(msg){
    this.appendToPElement(msg)
}

this.localVariable = ObservThatFunction(){
\\ this is where I want the magic to happen and listen to the alertMsg func and make this an observable i can subscribe to
}

this.sub = this.localvariable.subscribe(data=>{console.log(data)})

is this even possible?

EDIT: the observable doesn't have to pass the function's data - just emit a value (even a bool value) when the function is called

so for example when this.alertUser() is called i want the observable to called - and my subscriber can now update the notification service that a new msg has been sent - regardless of what that message is

Answer 1

TL;DR: It is simply impossible.

In short, you want to spy over a particular method. The only way to reliably spy/stub in JavaScript is using ES Proxy . But proxy is like a wrapper around a method. If this function is part of object which you are exporting, then Proxy would have worked. But that is not the case. Also, you need to call the proxied function and not the original one directly. Another way is to use JavaScript [Decorators][2] but they are not yet standard and useful in the class/method context only.

But, as a workaround, you can modify the function without changing the semantics and wrapping it into observable. The idea is to create a global Subject and call it from the alertUser() :

window.messageQueue = new Subject();

alertUser(msg){
  this.appendToPElement(msg);

  // This is non-destructive.
  window.messageQueue.next(msg);
}

// Usage
window.messageQueue.subscribe(() => { /* next */});

Answer 2

Just guessing here, but maybe a Proxy could be helpful.

    const handler = {
      apply: function(target, thisArg, argumentsList) {
        obs.next(true);
        return target(argumentsList);
      }
    };

   function observeFn(fn) {
     return new Proxy(fn, handler);
   }

Then you could just wrap your original function like this: observeFn(alertUser) and obs should notify any call to that function.