How do you stay on top of a complex JavaScript project?

Question

I'm using Firebug to help figure out what's going on in my JavaScript (+JQuery) code. I'm mainly using it to print out tons of console.log statements. This is probably not the most efficient way to stay on top of the project. As it has grown from just a few functions to over a hundred I am starting to get confused about how everything fits together. I mean, it works somehow but when I look at the code now I almost feel like someone else wrote it because it's so confusing.

Now I have a crazy amount of console.log statements appearing in the console whenever I run my app in Firebug and I've been leaving it there because I always end up recreating it whenver I take some of it out. This is making things even more confusing, I think, than if I had no logging at all. I never really explored real debugging - breakpoints, watch variables, etc - would that be a good way to regain control of this project or are there any other tools that might help?

I've thought about trying to draw a diagram of all of my CSS and try to map out the classes and IDs to the corresponding functions in my JavaScript. This project uses a lot of rich interaction and show/hide functionality based on a complex set of combinations of application states, closer to what you would find in a Flash/Flex application perhaps.

Any suggestions for tools or approaches that might help to regain control of this project would be appreciated. When I started this project I felt really good about it because it looked so good and people would give me compliments on how cool it was but now it just feels like a failure because I don't think I could even explain how it works in a job interview if I had to.

Answer 1

Keep your code organized. Use namespaces to break it down into logical modules. It might also be wise to look for common interaction patterns and develop generic reusable code.

I try to write every new feature as a jQuery plugin. That forces me to write reusable code that is not so coupled with the style and markup.