Javascript file organization and design

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.

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

I would split the classes up into modular JS files, matching your domain. Use YUI compressor or other tools to compress JS files and minify them.

One large JS file is really not that "bad" compared to using multiple JS files.

You can compress it on the server if your worried about band width, look into gzip or deflate.