Controling Document and Window events via array

I have recently taken on a task to rewrite some very old javascript / jquery and many of the issues are dozens of JS files with onready, onload, onscroll events everywhere and in no logical order! It truly looks like dozens of different developers over many years just sticking whatever code in whatever file.

Moving forward in my re-writes I will get away from this, but I have so many different JavaScript files that for right now the task of cleaning them up and unifying a common functions, $.fn's , prototypes and plugins structure will take me months to organize.

So, knowing I have a long road ahead of me here is what I implemented so incremental deployments would still be possible and to help me organize the code into logical groups for the eventual mass cleanup ahead. The code below is very stable and surprisingly fast, but am I headed in a strange direction?

-
Define an object I can organize the events into.

myObj = {
    doc: {
        ready:[],
        custom: []
    },
    win: {
        load: [],
        scroll: [],
        resize: [],
        resizestop: [],
    }
}

-
Push all the code into the logical array that organizes the events.

//for dom ready events
myObj.doc.ready.push(function(){
    alert("document ready")
})

//for window load events
myObj.win.load.push(function(){
    alert("window loaded")
})

//for custom events
myObj.doc.custom.push({
    name:"myCustomName",
    func: function(){
        alert("custom event")
    }
})

-
Loop through the arrays of the object and execute the stored function.

```
$(document).on({
ready:function(){for(var i = 0; i < myObj.doc.ready.length; i++){ myObj.doc.ready[i]() }}
});

$(window).on({
load:function(){for(var i = 0; i < myObj.win.load.length; i++){ myObj.win.load[i]() }},
scroll:function(){for(var i = 0; i < myObj.win.scroll.length; i++){ myObj.win.scroll[i]() }},
resize:function(){for(var i = 0; i < myObj.win.resize.length; i++){ myObj.win.resize[i]() }},
resiz

The code below is very stable and surprisingly fast, but am I headed in a strange direction?

I would say, it's a good first step to bring the code base into some kind of controlled state. It's also a good way of understanding the application and going through all the source files.


It truly looks like dozens of different developers over many years just sticking whatever code in whatever file.

Actually most of old applications out there looks like this, some CMS driven backend, where people are trying to fix the DOM after its rendered.

However, I would make a HOF to generate the functions:

function createStackCaller(array) {
  return function() {
    for (var i = 0; i < array.length; i++) {
      if (typeof array[i] === 'function')
        array[i]();
    }
  }
}

$(window).on({
    load: createStackCaller(myObj.win.load),
    scroll: createStackCaller(myObj.win.scroll),
    resize: createStackCaller(myObj.win.resize),
    resizestop: createStackCaller(myObj.win.resizestop),
});

StackExchange Code Review Q#157373, answer score: 2