Question

I have acquired the task of updating some horribly outdated JavaScript code which I did not write, full of hacks and pitfalls, sparse in comments. In addition to making the change work, I’d like to make the script easier to understand and more robust (e.g. not using global variables).

I think I’ve been able to wrap my mind around most of its execution, so I think I’m ready to begin making changes on it.

My question is: which limited time, which pieces should I prioritize changing? Should I first try to encapsulate everything in namespaces? Should I create classes for all of my objects? Should I replace all .innerHTML calls with their DOM equivalents? Should I “use jQuery”? Which pieces do you think are most important to have in order to maximize the improvements to the code?

Answer 1

1. Get cross browser hacks out of your code. It doesn’t matter which library you use for that, but they’re going to do it better than you. The most important here is probably cross browser event handling, but there are some other DOM issues, and using something like jQuery can really get rid of some boilerplate stuff.
2. If the code is using innerHTML, then it’s probably also generating html strings. innerHTML is really not a bad thing as much as generating the html for it can be very ugly. Look into a simple JS templating solution.
3. Along the way towards doing the first two, you’ll probably find that it makes sense to make the code more object-oriented/namespaced, and you can probably do it as you go. If there’s anything left, though, you can do it when the others are done.