13 Mar 2015
You know what I love? Refactoring.
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.
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 now everything is inside the closure, we can move the objects in.