¿Cómo incluir un archivo js en otro archivo js? [duplicar]

¿Cómo puedo incluir un archivo js en otro archivo js, ​​para mantener el Principio SECO y evitar la duplicación de código.

preguntado el 08 de enero de 11 a las 15:01

Esta historia de parece ser la elección canónica de los tontos ahora. -

4 Respuestas

Solo puede incluir un archivo de secuencia de comandos en una página HTML, no en otro archivo de secuencia de comandos. Dicho eso, tu enlatado escriba JavaScript que carga su secuencia de comandos "incluida" en la misma página:

var imported = document.createElement('script');
imported.src = '/path/to/imported/script';
document.head.appendChild(imported);

Sin embargo, es muy probable que su código dependa de su secuencia de comandos "incluida", en cuyo caso puede fallar porque el navegador cargará la secuencia de comandos "importada" de forma asincrónica. Su mejor opción será simplemente usar una biblioteca de terceros como jQuery o YUI, que resuelve este problema por usted.

// jQuery
$.getScript('/path/to/imported/script.js', function()
{
    // script is now loaded and executed.
    // put your dependent JS here.
});

Respondido 24 Feb 13, 22:02

Solo puedo repetir: en caso de uso $.getScript se iniciará la carga del segundo script dependiente después de que se cargue y ejecute el primero. Es secuencial en lugar de carga paralela. Además, si alguien incluye por <script> tal loader.js archivo, que carga alguna biblioteca de JavaScript (piense en la interfaz de usuario de jQuery, por ejemplo), que uno no puede simplemente cargar el main.js que usan la biblioteca en el próximo <script>. Por lo tanto, el uso de la biblioteca de JavaScript no será tan fácil como de costumbre. Para entender: Me gustaría usar la forma, pero se debería sugerir algunas más para que sea factible. - Oleg

En caso de su primera sugerencia, debe usar imported.onload para poner en cascada los guiones. Pero en el caso seguimos teniendo los mismos problemas que describí. - Oleg

Si va a utilizar "Cronogramas" de las herramientas para desarrolladores de Google Chrome, por ejemplo, puede verificar que ok-soft-gmbh.com/jqGrid/iedeveloper.htm usado document.writeln carga scripts en paralelo y ejecuta (evalúa) en el mismo orden correcto. La página es XHTML y, por lo tanto, las primeras declaraciones de stackoverflow.com/questions/802854/… también están mal. Entonces no encontré y razón (que pude verificar) ¿ por qué es malo de usar document.writeln dentro de <script> colocado en el <head>. Me gustaría que alguien me envíe uno. - Oleg

Según esta documentación developer.mozilla.org/en-US/docs/Web/HTML/Element/script con HTML5 puede especificar async = "false" al usar document.createElement () para forzar que la carga sea sincrónica. Esto parecería resolver el problema con el uso de este método. - Steve Waring

Sin embargo, cuando probé esto con una alerta después de appendChild y una alerta como la primera línea del script insertado, la alerta del script insertado salió en segundo lugar, por lo que no fue una carga sincrónica. - Steve Waring

No estoy de acuerdo con el document.write técnica (ver sugerencia de Vahan Margaryan). Me gusta document.getElementsByTagName('head')[0].appendChild(...) (consulte sugerencia de Matt Ball), pero hay un problema importante: el orden de ejecución del script.

Recientemente, he pasado mucho tiempo reproduciendo un problema similar, e incluso el conocido complemento jQuery usa la misma técnica (ver src Aquí) para cargar los archivos, pero otros también han informado del problema. Imagine que tiene una biblioteca de JavaScript que consta de muchos scripts y uno loader.js carga todas las partes. Algunas partes dependen unas de otras. Imagina que incluyes otro main.js guión por <script> que utiliza los objetos de loader.js inmediatamente después del loader.js. El problema era que a veces main.js se ejecuta antes de que todos los scripts sean cargados por loader.js. El uso de $(document).ready(function () {/*code here*/}); dentro de main.js el guión no ayuda. El uso de cascada onload controlador de eventos en el loader.js hará que la carga del script sea secuencial en lugar de paralela, y dificultará su uso main.js script, que debería ser una inclusión en algún lugar después loader.js.

Al reproducir el problema en mi entorno, puedo ver que ** el orden de ejecución de los scripts en Internet Explorer 8 puede diferir en la inclusión de JavaScript *. Es un tema muy difícil si necesita incluir scripts que dependen unos de otros. El problema se describe en Cargando archivos Javascript en paralelo, y la solución alternativa sugerida es utilizar document.writeln:

document.writeln("<script type='text/javascript' src='Script1.js'></script>");
document.writeln("<script type='text/javascript' src='Script2.js'></script>");

Entonces, en el caso de "los scripts se descargan en paralelo pero se ejecutan en el orden en que se escriben en la página", después de cambiar de document.getElementsByTagName('head')[0].appendChild(...) técnica para document.writeln, Ya no había visto el problema.

Así que te recomiendo que uses document.writeln.

ACTUALIZADO: Si alguien está interesado, puede intentar cargar (y volver a cargar) la página en Internet Explorer (la página utiliza el document.getElementsByTagName('head')[0].appendChild(...) técnica), y luego comparar con la versión fija usado document.writeln. (El código de la página está relativamente sucio y no es mío, pero se puede usar para reproducir el problema).

contestado el 15 de mayo de 20 a las 00:05

Necesita escribir un objeto document.write:

document.write('<script type="text/javascript" src="file.js" ></script>');

y colóquelo en su archivo javascript principal

Respondido 04 Oct 19, 23:10

Ugh, por favor hazlo no es abogar por el uso document.write(). - Matt Ball

@ Matt Ball: tienes razón, pero como Vahan es nuevo aquí, quizás quieras explicar por qué. - Konerak

+1 No estoy de acuerdo con la crítica de document.write. Escribo más información en mi respuesta a la pregunta. - Oleg

@Matt: es curioso que la respuesta más votada a esa pregunta aboga por el uso de document.write para cosas simples como cargar un script. - fretje

No es posible directamente. También puede escribir algún preprocesador que pueda manejar eso.

Si lo entiendo correctamente, a continuación se muestran las cosas que pueden ser útiles para lograrlo:

  • Utilice un preprocesador que se ejecutará a través de sus archivos JS, por ejemplo, buscando patrones como "@import somefile.js" y reemplácelos con el contenido del archivo real. Nicholas Zakas (Yahoo) escribió una de esas bibliotecas en Java que puede usar (http://www.nczonline.net/blog/2009/09/22/introducing-combiner-a-javascriptcss-concatenation-tool/)

  • Si está utilizando Ruby on Rails, puede probar el empaquetado de activos de Jammit, utiliza el archivo de configuración assets.yml donde puede definir sus paquetes que pueden contener varios archivos y luego referirlos en su página web real por el nombre del paquete.

  • Intente usar un cargador de módulos como RequireJS o un cargador de scripts como LabJs con la capacidad de controlar la secuencia de carga y aprovechar la descarga paralela.

Actualmente, JavaScript no proporciona una forma "nativa" de incluir un archivo JavaScript en otro como CSS (@import), pero todas las herramientas / formas mencionadas anteriormente pueden ser útiles para lograr el principio DRY que mencionaste. Puedo entender que puede que no se sienta intuitivo si usted es del lado del servidor, pero así son las cosas. Para los desarrolladores de aplicaciones para el usuario, este problema suele ser un "problema de implementación y empaquetado".

Espero eso ayude.

Respondido el 08 de enero de 11 a las 19:01

¿puede dar un ejemplo? - Aditya Shukla

Edité mi respuesta para explicar mejor lo que tengo en mente. Espero que esta vez sea lo suficientemente claro. - Arnab

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.