I’m faced with a dilemma. I started a project using Backbone.js and have many many JS files (views, models, controllers, templates, collections), but I didn’t want to have to load them each using the script element in my HTML file.
My idea was to load one file (bootstrap.js) and within that, load all the required JavaScript files for my web app (minus 3rd party libraries, which will get loaded using <script> before bootstrap.js).
Would using the jquery getScript function work to load all the JS files from within bootstrap.js? What’s best practice? I just don’t want to have like 20-30 <script></script> lines in my HTML file when I don’t need to – just trying to keep it nice and clean.
You should concatenate them all before deploying. You can also run YUI Compressor on them for speed and size optimizations.
But my favourite way is keep them separate during development, and 1 big file before deploying. Some server-side script will make this easy.