Módulos JavaScript

Neste tutorial, você aprenderá sobre módulos em JavaScript com a ajuda de exemplos.

À medida que nosso programa cresce, ele pode conter muitas linhas de código. Em vez de colocar tudo em um único arquivo, você pode usar módulos para separar códigos em arquivos separados de acordo com sua funcionalidade. Isso torna nosso código organizado e mais fácil de manter.

Módulo é um arquivo que contém código para realizar uma tarefa específica. Um módulo pode conter variáveis, funções, classes, etc. Vamos ver um exemplo,

Suponha que um arquivo denominado greet.js contenha o seguinte código:

 // exporting a function export function greetPerson(name) ( return `Hello $(name)`; )

Agora, para usar o código de greet.js em outro arquivo, você pode usar o seguinte código:

 // importing greetPerson from greet.js file import ( greetPerson ) from './greet.js'; // using greetPerson() defined in greet.js let displayName = greetPerson('Jack'); console.log(displayName); // Hello Jack

Aqui,

• A greetPerson()função no greet.js é exportada usando a exportpalavra - chave

   export function greetPerson(name) (… )

• Em seguida, importamos greetPerson()em outro arquivo usando a importpalavra - chave. Para importar funções, objetos, etc., você precisa agrupá-los ( ).

   import ( greet ) from '/.greet.js';

Nota : Você só pode acessar funções, objetos, etc. exportados do módulo. Você precisa usar a exportpalavra - chave para a função, objetos, etc. específicos para importá-los e usá-los em outros arquivos.

Exportar vários objetos

Também é possível exportar vários objetos de um módulo. Por exemplo,

No arquivo module.js

 // exporting the variable export const name = 'JavaScript Program'; // exporting the function export function sum(x, y) ( return x + y; )

No arquivo principal,

 import ( name, sum ) from './module.js'; console.log(name); let add = sum(4, 9); console.log(add); // 13

Aqui,

 import ( name, sum ) from './module.js';

Isso importa a variável de nome e a sum()função do arquivo module.js .

Renomeando importações e exportações

Se os objetos (variáveis, funções, etc.) que você deseja importar já estiverem presentes em seu arquivo principal, o programa pode não se comportar como você deseja. Nesse caso, o programa obtém o valor do arquivo principal em vez do arquivo importado.

Para evitar conflitos de nomenclatura, você pode renomear essas funções, objetos, etc. durante a exportação ou durante a importação.

1. Renomear no módulo (arquivo de exportação)

 // renaming import inside module.js export ( function1 as newName1, function2 as newName2 ); // when you want to use the module // import in the main file import ( newName1, newName2 ) from './module.js';

Aqui, ao exportar a função do arquivo module.js , novos nomes (aqui, newName1 e newName2) são dados à função. Portanto, ao importar essa função, o novo nome é usado para fazer referência a essa função.

2. Renomear no arquivo de importação

 // inside module.js export ( function1, function2 ); // when you want to use the module // import in the required file with different name import ( function1 as newName1, function2 as newName2 ) from './module.js';

Aqui, ao importar a função, os novos nomes (aqui, newName1 e newName2) são usados ​​para o nome da função. Agora você usa os novos nomes para fazer referência a essas funções.

Exportação Padrão

Você também pode realizar a exportação padrão do módulo. Por exemplo,

No arquivo greet.js :

 // default export export default function greet(name) ( return `Hello $(name)`; ) export const age = 23;

Então, ao importar, você pode usar:

 import random_name from './greet.js';

Ao executar a exportação padrão,

• random_name é importado de greet.js. Como, random_namenão está em greet.js, a exportação padrão ( greet()neste caso) é exportada como random_name.
• Você pode usar diretamente a exportação padrão sem colocar chaves ().

Nota : Um arquivo pode conter várias exportações. No entanto, você só pode ter uma exportação padrão em um arquivo.

Módulos Sempre use o modo estrito

Por padrão, os módulos estão no modo estrito. Por exemplo,

 // in greet.js function greet() ( // strict by default ) export greet();

Benefício de usar o módulo

• A base de código é mais fácil de manter porque códigos diferentes com funcionalidades diferentes estão em arquivos diferentes.
• Torna o código reutilizável. Você pode definir um módulo e usá-lo várias vezes de acordo com suas necessidades.

O uso de importação / exportação pode não ser compatível com alguns navegadores. Para saber mais, visite Suporte de importação / exportação de JavaScript.