understanding Javascript's window dispatcher on event

Question

I have a the following code:

var EventOne = "Event_Created"; 
var myFunction = function(){//codes};
var dispatcher = window.dispatcher;
dispatcher.on( EventOne, myFunction() );

So the event is a string instead of the normal event. I don't understand the concept of the dispatcher. How can an event listener listen to a string and execute a function?

Answer 1

I'll try to explain it. I hope its succinct enough, and is what you need. I was initially gonna explain the native method "CustomEvent", but that is not ultimately what you want to understand. Keep in mind that below you could create a new Class or Function (same), but I'll just go with a simple object for explanation purposes.

var EventOne = "Event_Created"; var myFunction = function(){//codes}; var dispatcher = window.dispatcher; dispatcher.on( EventOne, myFunction() );

Let me give you a VERY LIMITED/SCALED DOWN version. This is by no means production ready, but I will use it for explanation purposes.

--> Lets create a global object that will contain our behavior.

var dispatcher = {} || window.dispatcher 

--> Lets create our ".on" method. This will create our "association" or "key: action" pair. In your example you have "EventOne, myFunction()"

var dispatcher = {
      actions: {},
      on: function(key, action) {
        // you could add your new actions to an array,
        // lets just overwrite for simplicity sake
        this.actions[key] = action
      }
}

--> Real simple so far. We have a "dispatcher" object that has an ".on" method that takes a key and action, and then applies that association to the actions obj.

--> Lets add a ".trigger" method to be able call our 'events' at will. So, you will see that when this method is called it just asks for the value/action of the key we pass in. Since they are functions, we just fire them... ala this.actionskey

var dispatcher = {
      actions: {},
      on: function(key, action) {
        // you could add your new actions to an array,
        // lets just overwrite for simplicity sake
        this.actions[key] = action
      },
     trigger: function(key) {
       if(this.actions[key]) {
          this.actions[key]()
       }
     }
}

---> lets test it

function testit() {
   console.log("TEST IT FUNCTION CALLED")
}

function testit2() {
   console.log("CALLING TESTIT2 FUNCTION NOW")
}

dispatcher.on('test1', function() {
    setTimeout( function() {
      testit()
    }, 2000)
})

dispatcher.on('test2', testit2)

So, what you are showing in your OP is probably some pattern that mimics the one I did above, or lets say - my code mimics some other much more robust solution. Basically assigning a key, to actions/events which in my case are functions via the ".on" method. And then at a later time, calling them with ".trigger" by passing in a string, then referencing the object I set up "actions" with that "string" ... ala, its key.

So, if we literally used your code above, it would look like this.

var EventOne = "Event_Created"; 
var myFunction = function(){ console.log("MyFunction Called")};
var dispatcher = window.dispatcher;
dispatcher.on( EventOne, myFunction() );