3
\$\begingroup\$

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?

  1. Define an object I can organize the events into.

    myObj = {
        doc: {
            ready:[],
            custom: []
        },
        win: {
            load: [],
            scroll: [],
            resize: [],
            resizestop: [],
        }
    }
    
  2. 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")
        }
    })
    
  3. 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]() }},
        resizestop:function(){for(var i = 0; i < myObj.win.resizestop.length; i++){ myObj.win.resizestop[i]() }}
    })
    
    //bind custom document events
    for(var i = 0; i < myObj.doc.custom.length; i++){
        var c = myObj.doc.custom[i];
        $(document).on(c.name, c.func);
    }
    
\$\endgroup\$

1 Answer 1

2
\$\begingroup\$

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),
});
\$\endgroup\$
2
  • \$\begingroup\$ I agree, I have a object with several small functions that check type and return function, string, integer, array and object. I will definitely run it through a check for function before just calling arr[i]() just so I don't throw any exceptions. For the sake of space I didn't include the additional just, just curious of proof of concept. Thank you for your insight! \$\endgroup\$
    – googabeast
    Commented Mar 10, 2017 at 1:42
  • \$\begingroup\$ hope it helps, good luck with your project ;) \$\endgroup\$
    – webdeb
    Commented Mar 10, 2017 at 14:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.