What are some good techniques to organize JS includes for a large website?

Should each page have its own .js, with reusable features (live search, drop-down menus开发者_高级运维) being included in some kind of all.js for each page? Not sure what the best way to structure this is. Thanks for your input!

I create js files according to functionality. Dropdown menu in one, livevalidation in another, search in another, etc.

Let's say your page header includes menu, livevalidation and jquery. I create a header.php or .html page with all of the necessary ordered .js includes, then include that page using php/asp/whatever's include function.

As far as individaul pages go, it's up to you. I personally don't have that many, so I just lumped them into "pagesAjax.js" and "pages.js" and plan to expand on that in the future as more javascript "categories" arise. Keeps the source pretty clean.

Full disclosure. This worked for a while, but I'm working on an embedded project that's extremely bandwidth limited. I minify and compress all javascript/css files to one all.js and one all.css file. I then have an includes.html that I #include to point to those two files. I did some caching tricks to have clients only download the js and css file once per file revision.