Javascript file organization and design

Question

Really getting into web development and in particular JS so I was wondering what were the best practices in terms of JS file organization and delegation of responsibilities. I ask this because it would make sense to me to have this kind of structure:

• MAIN PAGE (PHP) (Includes a reference to a central JS file)
• MAIN Javascript File (Includes a reference to one file containing only error codes in a namespace or a class of B)

While this makes sense to me, I am wondering if I am wrong in my view considering the fact that you can't naturally include a JS file into another unless you do a couple tricks (no, not talking about jQuery). Tricks may mean that this isn't done simply because it doesn't fit with the best of practices for a language but it's not always the case in terms of cross-domain issues. So before I go too deep into sloppy design, I was just curious how you guys divided up the responsibilities or just slopped everything together into one file.

Answer 1

The best way to handle multiple JavaScript files is to design them like modules. One main JavaScript file should act as a sort of bootloader which kicks off things by setting up your "namespace" (quoted since JavaScript doesn't have classes). Example:

var myNamespace = {};

In each of your modules, you extend the "namespace". This has two benefits:

• Minimizes globals. In this case, you will have a single global.
• Easy to mix and match (and reuse) modules, if designed correctly.

Also see this for implementation details: https://stackoverflow.com/a/3722845/221061