How to refactor javascript when you have too many files
13 Mar 2015
Reading time: 2 minutes
You know what I hate? Having to maintain a codebase of thousands of inter-connected javascript files that have layers upon layers of dependencies. Somewhere along the line we thought “It’s good to separate concerns” - but I guess not everyone understood what “separate” means.
You know what I love? Refactoring.
Here is my step by step list of refactoring just one javascript file in a sea of interconnected files.
Firstly I will show an example javascript file.
Add a closure
It’s really hard to see in this function which functions are being used and where.
The very first thing I always do is wrap the whole file into a closure.
Now if you put this through jsHint it will tell you that none of the functions are being used, and can all be removed. So either this file is not needed (unlikely) or we need to search all the other files for missing javascript variable.
Search for each object in the global scope
Firstly, let’s move everything back into the global scope and move them in one by one.
You need to select each global variable and function. First is “imageCount”. This is not found in any other files, we can safely delete all references.
Searching for imageList gets found in another file “imageProcessing.js”…
So to “fix” this, let’s expose it as a function in the closure.
Run your pages - everything should still work. Yes - some things are still in the global scope, but we will move them when we are ready. Next, search for lastId. This too isn’t found, but getLastId() is, so do the same refactor…
Next - we search for addImage(). We discover it hidden in a click event of an html anchor tag.
We can easily clean this up… HTML needs just the data
And bind the event in the javascript…
And now everything is inside the closure, we can move the objects in.