In order to have a page that can be dynamically updated before being rendered (With logged in user name or something like that) it is common practice to insert javascript directly under (or close to) the elements that you wish to update. Having all js files imported at the bottom and using the .ready of jquery is not ideal for this because that update can be delayed until after the first render.
Currently the only way I have found around this is to add Custom Code and insert JS into it, however I would prefer to have the code in regular .js files that I can see and edit easily and have them injected into the correct locations. Possibly having some JS files include others so you can keep your code clean without adding lots of additional Custom Code elements everywhere. The latter becomes a bit of a maintenance nightmare if you have lots of pages needing multiple Custom Code elements at various loactions.