Creating a modular and organized javascript heavy website

Question

I'm looking for some general tips on how to keep my Javascript organized and modular.

The latest javascript heavy project i've worked on looks like [the following][1] (formatted http://jsfiddle.net/wdkZd/)

As you can i see i try to namespace my javascript and build quite some seperate functions. Still, when i need to implement features afterwards i can still get lost in my own code sometimes. And i'm getting the idea i can do better on organizing my code.

Any general pointers based on what u can see here?

Answer 1

For the past 2 years i have been working on a project with a rather large (10000+ lines) javascript codebase, involving, more than 30 active javascript developers.

As such you can probably imagine we have had our share of misery trying to keep the code up to shape and it all making sense and easily maintainable (it's a highly agile environment, where specifications change weekly if not more often)

Some of the ways we have tried to tackle the structure problems are as follows:

• namespacing is a must.
• build your application in layers, for instance we have the following defined layers in our code: transport, data, businesslogic, control & ui
• build your layers around common reusable selfcontained unittested components/modules, like: state, selection,templates,storage,events,etc
• use patterns, read up on the various ones, understand when to use them, and start doing it, if you don't :)
• keep the coding style consistent, don't deviate unless you absolutely have to - code needs to be self explanatory, comments are an evil that should only be necessary in extreme cases
• try to think in terms like: use before reuse, simplicity and maintainability before elegance - give yourself mantras and stick to them

Answer 2

Some practices I follow for keeping my Javascript Organized:

1. Minify all libraries into a single file
2. Load page specific JS in page footers unless required otherwise
3. Merge all global JS into a single file. {minify only when at production stage}

and looking at your JS, it seem to be pretty organized. Since you are developing plugin, it would be a good option to have ability to cherry pick modules while downloading your plugin. Something similar to Jquery UI