¿Es posible cargar múltiples archivos JavaScript desde uno solo?

Seguro. Puede hacer que el script del cargador cree dinámicamente más elementos y establezca sus atributos src para obtener lo que desea.

 /** * Takes an array of script URLs and generates  tags to include them. */ function loadComponents(scriptUrls) { var script, components = document.createDocumentFragment(); for (var i = 0, len = scriptUrls.length; i < len; i++) { script = document.createElement('script'); script.src = scriptUrls[i]; components.appendChild(script); } document.body.appendChild(components); } 

Agregué algunas optimizaciones (como el fragmento de documento) pero la idea básica sigue siendo la misma. Si necesita administrar dependencias o controlar el orden en que se cargan las cosas, debe deshacerse de esa función y consultar una biblioteca elegante de carga de scripts como require.js. [1] [2]

¿O necesito unificar manualmente todos estos scripts en un solo archivo?

• ¿Tiene sentido comenzar un nuevo proyecto web en PHP?
• ¿Se permite el anidamiento de selectores en CSS?
• ¿Cómo hago que el formulario de inicio de sesión responda en Django?
• ¿Cuál es la mejor manera de construir su cartera de HTML y CSS mientras los aprende?
• ¿Puede un desarrollador web de WordPress ganar 10.000 $ al mes?

No tiene que hacerlo, pero reducir la cantidad de solicitudes HTTP hará que su página de destino se cargue más rápido. Dependiendo de su situación, tal vez podría apuntar la etiqueta de script que se le permite tener en un controlador del lado del servidor que combina sus componentes cuando se los llama en lugar de cargarlos con Javascript. Eso también evitaría algunos dolores de cabeza de dependencia.

¿Es posible que yo los proteja de alguna manera para que no entren en conflicto con el código JS en el sitio remoto?

La forma más fácil es envolverlo en una expresión de función que mantenga sus cosas fuera del alcance global.

 // Before var so, manyVariables, lookAtAllTheseVariables, thisWillDefinitely, clobberSomething; function ohWellShipIt() { fail(); } // After (function() { var so, manyVariables, lookAtAllTheseVariables, thisWillDefinitely, clobberSomething; function ohWellShipIt() { lessFail(); } })(); 

Si quieres ponerte elegante, hay otras técnicas (más poderosas) como el patrón de módulo [2] que pueden hacer lo que quieras.

También vea la respuesta de Ethan Winters para algo sutil pero importante que me perdí. El uso de require.js lo evitará, pero aún debe echar un vistazo.

—-
[1] http://requirejs.org
[2] O busca async y defer : http://davidwalsh.name/html5-async
[3] http://www.yuiblog.com/blog/2007…