Hoje, o JavaScript desempenha um papel enorme no desenvolvimento de sites. Os desenvolvedores front-end usam JavaScript para criar aplicativos da Web interativos. Como resultado, houve um aumento na demanda por desenvolvedores de JavaScript.
Certamente, o JavaScript evoluiu ao longo dos anos. O ES6 introduziu muitos novos recursos na linguagem. Uma delas é uma maneira de compartilhar facilmente códigos entre arquivos JavaScript.
A importação e exportação de funções para JavaScript são novos recursos que farão de você um desenvolvedor melhor. Veja como esses recursos funcionam.
O que é um módulo JavaScript?
Um módulo JavaScript é um arquivo JavaScript que contém uma coleção de códigos para você usar. Os módulos geralmente são escritos em arquivos separados e importados usando o importar palavra-chave. Economiza tempo e esforço porque você pode reutilizá-lo mais tarde.
Por exemplo, se você tiver uma função chamada calcularSoma(), você pode incluí-lo em outro arquivo e disponibilizá-lo em qualquer lugar do seu projeto usando o exportar e importar JavaScript funciona sem qualquer problema.
Um dos benefícios de usar módulos é que ajuda a manter seu código organizado. Isso também torna seu código mais gerenciável e fácil de depurar.
Para usar um arquivo JavaScript como um módulo, você precisa criar um script em seu documento HTML com um digite="módulo".
<tipo de script ="módulo" origem="fileName.js"></script>
Existem dois tipos de módulos:
- Módulos ECMAScript: módulos JavaScript padrão e são suportados por todos os principais navegadores.
- Módulos CommonJS: são mais antigos e não são amplamente suportados.
Vamos nos concentrar nos módulos ECMAScript aqui. Se necessário, consulte nosso introdução ao JavaScript para retocar o básico.
Como exportar funções em JavaScript
Em JavaScript, as funções são objetos de primeira classe que podem ser passados como argumentos, além de serem usados por conta própria. Exportar funções é uma boa maneira de transferi-las para outros programas. Também é usado quando você deseja criar bibliotecas reutilizáveis.
A exportação de funções em JavaScript é feita usando o exportar função. O exportar A função exporta uma determinada função para ser usada por outro arquivo ou script. Ao exportar nossas próprias funções, podemos usá-los livremente em outros arquivos ou scripts sem nos preocuparmos com questões de licenciamento.
Existem duas maneiras de usar o exportar funcionar com eficiência. Iremos examiná-los com exemplos de código.
Suponha que você tenha um arquivo getPersonalDetails.js que possui uma função que retorna o nome completo de um usuário após uma entrada de prompt. A função fica assim:
funçãogetFullName(nome completo){
nomecompleto = prompt('Qual é o seu primeiro nome');
console.log (nome completo);
}
- Você pode exportar esta função simplesmente usando o exportar palavra-chave seguida pelo nome da função entre chaves. Se parece com isso:
exportar {getFullName}; - O segundo método é adicionar o exportar palavra-chave antes de declarar a função.
exportarfunçãogetFullName (nome completo){...}
Você pode exportar várias funções usando o primeiro método. Isso é feito incluindo os nomes das funções desejadas entre chaves. As funções são separadas por vírgula.
Por exemplo: suponha que você tenha três funções em nosso getPersonalDetails.js arquivo - getFullName(),getEmail(), getDob(). Você pode exportar as funções adicionando a seguinte linha de código:
exportar {getFullName, getEmail, getDob};
Como importar funções em JavaScript
Para usar um módulo, primeiro você precisa importá-lo. Qualquer função pode ser importada usando uma referência de caminho completo.
Importar funções é bastante simples. O JavaScript possui um recurso integrado para importar suas próprias funções de outros arquivos. Se você deseja acessar essas funções de outros módulos, é uma boa ideia incluir uma declaração de função para cada um de seus utilitários.
Uma função a ser importada já foi exportada em seu arquivo original.
Você pode importar funções de um arquivo diferente usando o importar funcionalidade de palavras-chave. Importar permite que você escolha qual parte de um arquivo ou módulo carregar.
Veja como você importa nossos getFullName função de getPersonalDetails.js:
importar {getFullName} de './getPersonalDetails.js'Isso tornará essa função disponível para uso em nosso arquivo atual.
Para importar várias funções, as funções a serem importadas são incluídas entre chaves. Cada um é separado por uma vírgula (,).
importar {getFullName, getEmail, getDob} de './getPersonalDetails.js'Existe outra forma de usar o importar funcionalidade. Isso nos permite importar todas as exportações em um arquivo específico. É feito usando o importar * como sintaxe.
Você pode importar todas as exportações em nosso getPersonalDetails.js adicionando a seguinte linha de código:
importar * como personalDetailsModule de './getPersonalDetails.js'O acima irá criar um objeto chamado personalDetailsModule.
Este é apenas um nome de variável, você pode nomear qualquer coisa.
Este objeto contém todas as exportações em nosso getPersonalDetails.js. As funções são armazenadas neste objeto e podem ser acessadas da mesma forma que você acessa qualquer propriedade de objeto.
Por exemplo, podemos acessar o getFullName função adicionando a seguinte linha de código
personalDetailsModule.getFullName();O que é padrão de exportação?
padrão de exportação é uma funcionalidade de exportação excepcional. Isso é usado se apenas uma variável estiver sendo exportada de um arquivo. Também é usado para criar um valor de fallback para um arquivo ou módulo.
Abaixo está um exemplo onde usamos o getFullName funcionar como padrão:
exportarpadrãofunçãogetFullName (nome completo){...}Você não pode ter mais de um valor como padrão em cada módulo ou arquivo.
Uma função usada como padrão é importada de forma diferente. Veja como importar nosso getFullName função usada como padrão:
importar nome completo de './getPersonalDetails.js'Aqui estão as diferenças:
- Não há chaves ao redor do valor importado, nome completo.
- nome completo aqui é apenas um nome de variável. Ele armazena o valor de qualquer que seja a função padrão.
Incremente suas funções JavaScript
Módulos JavaScript são trechos de código que podem ser reutilizados em outras partes do seu código, usando as funções de importação e exportação do JavaScript. Eles geralmente são escritos em arquivos separados e importados usando a palavra-chave import. Um dos benefícios de usar módulos é que ajuda a manter seu código organizado. Isso também torna seu código mais gerenciável e fácil de depurar.
