No hay importación / incluir / requerir en javascript, pero hay dos formas principales de lograr lo que desea:
1 - Puede cargarlo con una llamada AJAX y luego usar eval.
Esta es la forma más directa, pero está limitada a su dominio debido a la configuración de seguridad de Javascript, y el uso de eval abre la puerta a errores y piratas informáticos.
2 - Agregue una etiqueta de script con la URL del script en el HTML.
Definitivamente el mejor camino a seguir. Puede cargar el script incluso desde un servidor externo, y está limpio a medida que usa el analizador del navegador para evaluar el código. Puede poner la etiqueta en el encabezado de la página web o en la parte inferior del cuerpo.
Ambas soluciones se discuten e ilustran aquí.
Ahora, hay un gran problema que debes conocer. Hacer eso implica que cargue el código de forma remota. Los navegadores web modernos cargarán el archivo y seguirán ejecutando su script actual porque cargan todo de forma asincrónica para mejorar el rendimiento.
Significa que si usa estos trucos directamente, no podrá usar su código recién cargado la siguiente línea después de que solicitó que se cargue, porque todavía se cargará.
Por ejemplo: my_lovely_script.js contiene MySuperObject
var js = document.createElement("script");
js.type = "text/javascript";
js.src = jsFilePath;
document.body.appendChild(js);
var s = new MySuperObject();
Error : MySuperObject is undefined
Luego vuelve a cargar la página presionando F5. ¡Y funciona! Confuso...
Entonces, ¿qué hacer al respecto?
Bueno, puedes usar el truco que sugiere el autor en el enlace que te di. En resumen, para las personas que tienen prisa, usa un evento para ejecutar una función de devolución de llamada cuando se carga el script. Para que pueda poner todo el código usando la biblioteca remota en la función de devolución de llamada. P.EJ :
function loadScript(url, callback)
{
// adding the script tag to the head as suggested before
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
// then bind the event to the callback function
// there are several events for cross browser compatibility
script.onreadystatechange = callback;
script.onload = callback;
// fire the loading
head.appendChild(script);
}
Luego escribe el código que desea usar DESPUÉS de que el script se carga en una función lambda:
var myPrettyCode = function() {
// here, do what ever you want
};
Entonces ejecutas todo eso:
loadScript("my_lovely_script.js", myPrettyCode);
Ok, lo tengo Pero es un dolor escribir todo esto.
Bueno, en ese caso, puede usar como siempre el fantástico framework jQuery gratuito, que le permite hacer lo mismo en una línea:
$.getScript("my_lovely_script.js", function() {
alert("Script loaded and executed.");
// here you can use anything you defined in the loaded script
});