Módulos, Importar e Exportar declarações em JavaScript | Explicado com exemplos

Os módulos são usados ​​em JavaScript para implementar o conceito de modularidade que é, em seu núcleo, o processo de dividir uma solução em componentes menores, compactos e mais significativos. No JavaScript, a modularidade é alcançada usando as palavras -chave de exportação e importações. Quando o JavaScript é usado como um script modular com uma página da web html, a palavra -chave “módulo”É adicionado como o tipo de tag de script

Por que usar módulos

Evite repetir as palavras. “Com a passagem do tempo, os aplicativos da Web foram alterados de programas muito pequenos para programas grandes e complexos para realizar tarefas complicadas. Para criar aplicativos da Web maiores/complexos, o ES6 JavaScript veio com a capacidade de dividir scripts em componentes menores e gerenciáveis ​​com o uso do Recurso de exportação e a recurso de importação.

Configurando uma página HTML

Entre no seu editor de texto preferido e crie uma página HTML, basta colocar as seguintes linhas de código dentro da etiqueta do corpo:

Módulos JS explicados

Em vez de manipular os elementos HTML em uma página da web, vamos exibir e verificar a saída usando o console. Portanto, não precisamos de elementos sofisticados em nossa página da web html.

Execute o arquivo e você verá a seguinte saída:

Configurando arquivos de script

Agora, enquanto permanece no mesmo diretório em que seu arquivo html está, crie dois “.JS”Arquivos como:

• Mainscript.JS: Este arquivo será vinculado à página da web html.
• CompScript.JS: Este arquivo conterá algumas funções de componentes.

Bem assim:

Agora, em seu html, vincule o mainscript.JS usando o seguinte comando:

Como você pode ver, diferentemente das tags de script normais, não estamos apenas passando no link de origem, mas também o tipo que está definido como “módulo”, Para notificar o navegador de que este script está em forma modular.

Adicionando função dentro do arquivo componente

Agora, para exibir modularidade, você criará algumas variáveis/funções no arquivo de script componente “CompScript.JS”E exportá -los dentro do Mainscript.JS.

Dentro de CompScript.JS Crie a seguinte função que imprimirá 5 números:

função printnumbers (num)
para (vamos i = num; i <= num+5 ; i++)
console.log (i);

Seu arquivo de script componente ficará assim:

Recursos de exportação e importação

Agora para acessar esta função dentro do Mainscript.JS arquivo que você precisa exportar esta função do compScript.arquivo js. Você pode fazer isso colocando a exportação de palavras -chave para trás da função assim:

Agora, para usá -lo dentro do mainscript.JS, precisamos pegar isso exportar usando o importar função. Você pode fazer isso usando a seguinte sintaxe:

importar function-name de "scriptsoruce.JS;

No nosso caso, essa linha se transformaria em:

importar printnumbers de "./Compscript.js ";

Agora, para usar essa função em nosso arquivo de script principal, você pode simplesmente chamar a função como chamamos qualquer outra função no JavaScript:

PrintNumbers (5);

O Mainscript.JS vai ficar assim:

Salve o arquivo e atualize o HTML e acesse o console do desenvolvedor e você verá a seguinte saída:

E se você prestar muita atenção à saída dentro do console, verá:

Mesmo que você só vincule o mianscript.JS Com a página HTML, nosso componente foi executado com sucesso. Portanto, você pode dizer que implementou com sucesso o conceito de modularidade componencial.

Mas espere, há mais!

Imagine que você está exportando várias funções como:

Função de exportação PrintNumbers (num)
para (vamos i = num; i <= num + 5; i++)
console.log (i);


Função de exportação namePrinter ()
console.log ("John Doe")

exportar const AGE = 22;
Função de exportação printjob ()
console.log ('auditor');

Escrevendo a palavra -chave exportar Com todos os elementos que você deseja exportar, não é uma boa abordagem, o que você pode fazer é estar no final do arquivo, escrever um comando de uma linha, que exportará as funções e as variáveis ​​que você deseja.

Você faz isso escrevendo a seguinte linha:

export printNumbers, nameprinter, idade, printjob;

Seu CompScript.JS vai ficar assim:

Da mesma forma, para importar todas as funções e variáveis ​​com a palavra -chave de exportação de um arquivo, você pode usar o símbolo do asterisco "*", como mostrado abaixo:

importar * como comp de "./Compscript.js ";

O símbolo de asterisco " *" significa que você deseja importar todas as exportações do arquivo sob o nome “comp”,

Para usar a função e as variáveis ​​que acabamos de importar, use o operador de pontos junto com o nome da função/variável:

comp.Nameprinter ();

Se você usasse todas as exportações do CompScript.JS Arquivo, você usará o seguinte código:

importar * como comp de "./Compscript.js ";
comp.Nameprinter ();
console.log ("A idade é:" + comp.idade);
comp.printjob ();
comp.PrintNumbers (2);

Então você Mainscript.JS vai ficar assim:

Salve os arquivos e atualize a página da web e você verá a saída dentro do console como

Como você pode ver, utilizamos com sucesso todas as exportações do CompScript.JS dentro do nosso Mainscript.JS arquivo.

Conclusão

Os módulos nos ajudam a dividir nossos aplicativos da Web em peças menores, concisas e gerenciáveis; A modularidade em JavaScript é alcançada dividindo o script em vários componentes e usando o importar e exportar características opção introduzida no ES6. Para demonstrar isso, configuramos uma página básica HTML, criamos dois arquivos de script diferentes e demos alguns recursos dentro do arquivo componente. Depois, nós os usamos dentro do nosso arquivo de script principal. Também aprendemos maneiras diferentes de exportar vários recursos e importar todos os recursos de uma só vez.