I use Drupal a lot for projects and in doing so, I've become addicted to using it's configuration file (i.e. - <theme>.info file) to force each theme to use a "custom.js" file for all my jQuery modifications. I use this to implement certain UI aspects, like adding dimension CSS classes to the body based on window size, modifying CSS classes that are otherwise only modifiable through hacking away at core files, adding scroll or click events; whatever. Doing it all this way affords me the required tweaks I need to create interfaces that are much more useable by the end-users.

But here's the deal: I want to avoid jQuery spaghetti! It's not really there yet, but it's creeping... So I'm not sure if I should've posted this in the CMS section but I posted here because my primary question at the moment boils down to demarcating snippets of jQuery... What's a general rule of thumb for doing this? I suppose this might be where frameworks come into play but if so, what's a good one to use for jQuery?

I've read in various places that one approach to achieve this need I have (at least for keeping variables in a healthy scope) is by putting everything in individual function blocks, like "(function(){...});", but I suppose much of this depends on what's being done in the code.

Up until now, I've always started my custom file with the following:


...whereby I then throw my actual mods inside this block to ensure that everything is processed only after the page has loaded. Specifics aside, this has worked well for me but I'm curious if anyone around here has some suggestions or insight about how they organize their jQuery code...? It would be especially beneficial if someone who uses Drupal had some insight into this... I seem to be assigning things to elements where necessary and while this also works okay, I can see this leading to issues in the future in terms of organization and potentially, efficiency. The code is beginning to look sporadic and I want to avoid this in the future if possible.

Thanks in advance.