Como incluir um arquivo JavaScript em outro arquivo JavaScript

Enquanto desenvolve sites, o desenvolvedor cria mais de um arquivo JavaScript para diferentes funcionalidades que ajudam a melhorar o desempenho ou aplicativo geral de um site. Além disso, pode ser organizado e gerenciado mais facilmente. Ao incluir um arquivo JavaScript em outro arquivo, o código dentro desse arquivo pode ser reutilizado em vários lugares. Por exemplo, às vezes, os programadores precisam chamar qualquer função de outro arquivo ou acessar algumas variáveis, o que pode ajudar a evitar conflitos de nomeação variável.

Este artigo demonstrará os métodos para incluir/adicionar um arquivo JS em outro arquivo JS.

Como incluir um arquivo JavaScript em outro arquivo JavaScript?

Para incluir/adicionar um arquivo JavaScript em outro arquivo JavaScript, use as seguintes maneiras:

• Usando "" marcação
• Usando "importar" Declaração

Método 1: Inclua um arquivo JavaScript em outro arquivo JavaScript usando a tag ""

Antes dos módulos ES6, os arquivos JavaScript foram adicionados a outros arquivos JavaScript, criando um “roteiro”Elemento no arquivo JavaScript e usando o“src”Atributo para adicionar o caminho/localização do arquivo.

Exemplo

Em um arquivo html, crie um parágrafo usando o “

”Tag atribuindo um ID“texto”Para imprimir o texto na página do JavaScript:

Crie um arquivo JavaScript “JSFILE.JS”Isso será adicionado ao arquivo JavaScript principal. Neste arquivo, escreva um código para imprimir o texto na página da web usando o “Innerhtml" propriedade:

documento.getElementById ("texto").INNERHTML = 'Olá, estou JSFILE.JS Adicionado no arquivo JavaScript principal usando roteiro marcação';

No "”Tag no arquivo html ou no arquivo JavaScript principal, primeiro crie uma variável“roteiro”:

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

Agora, adicione o caminho do arquivo usando o “src”Atributo/propriedade e depois adicione -o quando criança ao“cabeça" marcação:

roteiro.src = "./Jsfile.js ";
documento.cabeça.appendChild (script);

Pode -se ver que o “JSFILE.JS”É adicionado no arquivo JavaScript principal, pois imprime o texto na página da web:

Método 2: Inclua um arquivo JavaScript em outro arquivo JavaScript usando a instrução "importar"

Nos módulos ES6, a declaração de importação/exportação é introduzida para adicionar o arquivo em outro arquivo JavaScript. Este é um método moderno suportado pela maioria dos navegadores modernos. Ele permite que você importe um arquivo JavaScript como um módulo, que pode ser usado no arquivo de importação.

Exemplo

Importar o “JSFILE.JS”No arquivo JavaScript principal ou no“” tag em um arquivo html usando o “importarPalavra -chave:

Saída

Às vezes, os programadores precisam importar apenas uma função em vez de um arquivo completo, para isso, confira nossa outra posta.

Observação: Para incluir um arquivo em outro arquivo no nó.JS, o “requer () ” o método é usado. Ele permite importar um arquivo JavaScript como um módulo, que pode ser usado no arquivo de importação da seguinte maneira:

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

Trata -se de incluir o arquivo JavaScript em outro arquivo.

Conclusão

Para incluir um arquivo JavaScript em outro arquivo JavaScript, use o “”Tag criando um novo elemento“ script ”em JavaScript usando o“CreateElementAtributo ou o “importar" declaração. Os navegadores modernos suportam a declaração "importar", enquanto a tag "Script" é um método antigo para incluir um arquivo JavaScript em outro arquivo. Este artigo demonstrou os métodos para incluir/adicionar um arquivo JS em outro arquivo.