Cómo incluir un archivo JavaScript en otro archivo JavaScript

Mientras desarrolla sitios web, el desarrollador crea más de un archivo de JavaScript para diferentes funcionalidades que ayudan a mejorar el rendimiento o la aplicación general de un sitio web. Además, se puede organizar y manejar más fácilmente. Al incluir un archivo JavaScript en otro archivo, el código dentro de ese archivo se puede reutilizar en varios lugares. Por ejemplo, a veces, los programadores deben llamar a cualquier función desde otro archivo o acceder a algunas variables, lo que puede ayudar a prevenir conflictos de nombres variables.

Este artículo demostrará los métodos para incluir/agregar un archivo JS en otro archivo JS.

Cómo incluir un archivo JavaScript en otro archivo JavaScript?

Para incluir/agregar un archivo JavaScript en otro archivo JavaScript, use las siguientes formas:

• Usando "" etiqueta
• Usando "importar" Declaración

Método 1: incluya un archivo JavaScript en otro archivo JavaScript usando la etiqueta ""

Antes de los módulos ES6, los archivos JavaScript se agregaron a otros archivos JavaScript creando un "guionElemento "en el archivo JavaScript y usando el"SRC"Atributo para agregar la ruta/ubicación del archivo.

Ejemplo

En un archivo HTML, cree un párrafo usando el "

"Etiqueta asignando una ID"texto"Para imprimir el texto en la página de JavaScript:

Crea un archivo JavaScript "Jsfile.js"Eso se agregará al archivo JavaScript principal. En este archivo, escriba un código para imprimir el texto en la página web utilizando el "innerhtml" propiedad:

documento.getElementById ("texto").innerhtml = 'Hola, soy Jsfile.js agregado en el archivo JavaScript principal utilizando guion etiqueta';

En el ""Etiqueta en el archivo HTML o el archivo JavaScript principal, primero cree una variable"guion":

var script = documento.createElement ('script');

Ahora, agregue la ruta del archivo usando el "SRC"Atributo/propiedad y luego agréguelo cuando era niño al"cabeza" etiqueta:

guion.src = "./Jsfile.JS ";
documento.cabeza.appendChild (script);

Se puede ver que el "Jsfile.js"Se agrega en el archivo JavaScript principal, ya que imprime el texto en la página web:

Método 2: incluya un archivo JavaScript en otro archivo JavaScript utilizando la instrucción "import"

En los módulos ES6, se introduce la declaración de importación/exportación para agregar el archivo a otro archivo de JavaScript. Este es un método moderno respaldado por la mayoría de los navegadores modernos. Le permite importar un archivo JavaScript como un módulo, que luego se puede usar en el archivo de importación.

Ejemplo

Importar el "Jsfile.js"En el archivo JavaScript principal o el"" etiqueta en un archivo html usando el "importarPalabra clave:

Producción

A veces, los programadores necesitan importar solo una función en lugar de un archivo completo, para eso, consulte nuestra otra publicación dedicada "Función de exportación en JavaScript".

Nota: Incluir un archivo en otro archivo en el nodo.JS, el "requerir()" se utiliza el método. Permite importar un archivo JavaScript como un módulo, que luego se puede usar en el archivo de importación de la siguiente manera:

const módulo = requirir ('./Jsfile.js ');

Se trata de incluir el archivo JavaScript en otro archivo.

Conclusión

Para incluir un archivo JavaScript en otro archivo JavaScript, use el ""Etiqueta creando un nuevo elemento de" script "en JavaScript usando el"creación"Atributo o el"importar" declaración. Los navegadores modernos admiten la instrucción "importar", mientras que la etiqueta "script" es un método antiguo para incluir un archivo javaScript en otro archivo. Este artículo demostró los métodos para incluir/agregar un archivo JS a otro archivo.