Quisiera saber cómo puedo incluir la funcionalidad de un archivo .js desde otro archivo .js sin utilizar jQuery. Ya que he visto algunas soluciones pero haciendo uso de jQuery, y lo que me interesa es saber si puedo importarlo con JavaScript puro.
6 respuestas
Cuando un script de JS se carga junto con otros en una página HTML, tiene acceso a las variables y métodos de los demás scripts.
Es por eso que tú puedes importar una biblioteca como JQuery
<script src="jquery.js"></script>
Y en otro script (miarchivo.js
) que has creado escribir:
$("div").hide(); // cualquier código que use JQuery
Esto sin tener que hacer un "import" o algo similar, esto se debe a que los scripts se cargan globalmente. Pero también hay que considerar que si tu programa depende de otro script, esa dependencia se debe cargar primero.
En ES6 apareció una nueva característica de JavaScript que son los módulos, estos te permiten exportar el código con las funcionalidades que desees y que puedan ser cargadas en otros programas, aquí un ejemplo:
//------ lib.js ------
export const sqrt = Math.sqrt;
export function square(x) {
return x * x;
}
export function diag(x, y) {
return sqrt(square(x) + square(y));
}
//------ main.js ------
import { square, diag } from 'lib';
console.log(square(11)); // 121
console.log(diag(4, 3)); // 5
Esta forma tiene la ventaja de incluir encapsulamiento, es decir que solo expones lo necesario y no todo el código, permite la creación de bibliotecas y facilita el manejo de las dependencias en una aplicación.
-
La sintaxis de import y export de módulos de ES6 no resuelve el problema de cargar el módulo (module loading). Si la pregunta es sobre cargado dinámico de módulos probablemente se refiera a algo como require.js que perfectamente podría combinarse con ES6 para cargar un archivo/módulo dinámicamente. Commented el 18 dic. 2015 a las 18:52
Una solución rápida aunque fea: escribe el archivo directamente en el documento usando el comando document.write()
. Si el script que lo llama se ejecuta de forma síncrona no habría problema (porque si haces un document.write()
cuando la página se ha cargado, el contenido de la página se reemplazará con lo que escribas).
Por ejemplo: imagina que tienes los ficheros codigo1.js, codigo2.js y codigo3.js; entonces podrías crear un fichero más incluir.js que los incluya todos:
document.write('<script src="codigo1.js"></script>');
document.write('<script src="codigo2.js"></script>');
document.write('<script src="codigo3.js"></script>');
Y se ejecutarán de manera secuencial (codigo3.js tendría el código que quieres ejecutar y que usa las funciones/variables/etc. de codigo1.js y codigo2.js).
Una forma más bonita sería crear tu propia función sin preocuparte de si se llama de manera síncrona o asíncrona:
function importarScript(nombre) {
var s = document.createElement("script");
s.src = nombre;
document.querySelector("head").appendChild(s);
}
Y llamar a la función cada vez que quieras importar:
importarScript("codigo1.js");
importarScript("codigo2.js");
importarScript("codigo3.js");
Estas soluciones son sencillas, pero tienen un problema: los métodos y variables del fichero importado no están disponibles en el fichero que los importa (aunque sí en los siguientes). Por ejemplo, si tienes incluir.js con este código:
x = 4;
importarScript("codigo1.js");
console.log(x);
Y en codigo1.js tienes:
x = 5;
El resultado en la consola de JavaScript será "4", aunque seguramente esperabas que fuera "5". Para solucionar esto, lo que puedes hacer es envolver el código dentro de una función y pasarla como parámetro para hacerle un callback cuando el fichero se haya cargado.
En ese caso el código de importarScript
cambiaría un poco:
function importarScript(nombre, callback) {
var s = document.createElement("script");
s.onload = callback;
s.src = nombre;
document.querySelector("head").appendChild(s);
}
Y el código en incluir.js pasaría a ser:
x = 4;
importarScript("codigo1.js", scriptCargado);
function scriptCargado() {
console.log(x);
}
Ahora el código de incluir.js no se ejecuta hasta que codigo1.js se ha cargado (porque se llama en el método onload
del script) y el resultado en la consola de JavaScript es "5".
Incluir un archivo javascript dentro de otro archivo javascript, sin usar la libreria de jquery, puedes usar esta función de solo javascript.
function loadScript(url, callback){
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
script.onreadystatechange = callback;
script.onload = callback;
head.appendChild(script);
}
Donde url es la ruta del archivo y callback, es la función con el código javascript que quieres ejecutar, después de que haya cargado.
La llamada seria asi:
loadScript("MiArfchivoJavascript.js", MiArchivoCargado);
y la función algo así:
function MiArchivoCargado(){
alert('MiArchivoJavascript.js ya ha sido cargado');
}
-
1me parece que esta sería la respuesta correcta a la pregunta, ya que usa javascript puro para importar archivos. Commented el 3 mar. 2017 a las 15:52
Solución "simple":
Si el javascript forma parte de un documento HTML, puedes simplemente usar la etiqueta con la propiedad src.
<SCRIPT src="archivo.js"></SCRIPT>
Para insertar codigo externo en medio de otro codigo, simplemente cierra y vuelve a habrir la etiqueta.
<SCRIPT>
Codigo...
</SCRIPT>
<SCRIPT src="archivo.js">
</SCRIPT>
<SCRIPT>
Codigo...
</SCRIPT>
No es muy elegante pero es la mas simple, la añado solo porque nadie lo ha hecho. De todas maneras te recomiendo leer la respuesta de Alvaro Montoro.
Con este código: $.getScript("script.js");
incluyes un .js dentro del otro .js
-
1Esta solución utiliza jQuery, cuando en la pregunta se aclara explícitamente que no se use.– MarianoCommented el 3 oct. 2016 a las 3:47
El método señalado por Bernar Spain, bien realiza la tarea que pides, desde javascript puro
Pero tienes que precisar, que requieres, pues, si la importación, la haces desde tu aplicación hacia otro archivo en tu server, sería suficiente, pero si tienes que traer archivos js que viven en otro servidor y existe riesgo de indisponibilidad, y ademas si precisas, carga asíncrona, y codificar el evento de "carga finalizada exitosamente" para archivos que quizas podrían demorar, entonces ya necesitas una librería que implemente el patrón ADM, como RequireJS, o el inbuilt de las nuevas versiones de JS que todavía a la fecha no están soportadas como in built en la mayoría de los navegadores
import
creo que modificare la pregunta por importar. por ejemplo para utilizar una función que tengo en mi archivouno.js
en mi archivodos.js
.uno.js
ydos.js
) en los script tags de tú página no tendrás problemas accediendo al código de uno desde el otro. Si te refieres a cargar el archivo dinámicamente entonces necesitas considerar algo comorequire.js
, y si te refieres a la declaración estática de dependencias entonces necesitas considerar algo como AMD o CommonJS para resolver tu problema.