Conteúdo
Importar e exportar funções em JavaScript pode ajudar a otimizar seu código.
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, a demanda por desenvolvedores JavaScript aumentou.
É claro que o JavaScript evoluiu ao longo dos anos. O ES6 introduziu muitos novos recursos na linguagem. Uma é uma maneira de compartilhar código facilmente entre arquivos JavaScript.
Importar e exportar funções para JavaScript é novo e pode torná-lo um desenvolvedor melhor. Veja como essas funções funcionam.
O que é um módulo JavaScript?
Um módulo JavaScript é um arquivo JavaScript que contém uma coleção de código para seu uso. Os módulos geralmente são escritos em arquivos separados e importados usando a palavra-chave import. Economiza tempo e esforço porque você pode reutilizá-lo mais tarde.
Por exemplo, se você tiver uma função chamada calculateSum(), poderá incluí-la em outro arquivo e usar as funções de exportação e importação do JavaScript para disponibilizá-la em qualquer lugar do projeto sem problemas.
Um dos benefícios de usar módulos é que ele ajuda a manter seu código organizado. Também torna seu código mais fácil de gerenciar e depurar.
Para usar um arquivo JavaScript como um módulo, você precisa fazer o script do documento HTML com type="module"
.
<script type="module" src="fileName.js"></script>
Existem dois tipos de módulos:
- Módulos ECMAScript: os módulos JavaScript são padrão e suportados por todos os principais navegadores.
- Módulos CommonJS: mais antigos e não são amplamente suportados.
Vamos nos concentrar nos módulos ECMAScript aqui. Se necessário, veja nossa introdução ao JavaScript para melhorar o básico.
Como exportar funções em JavaScript
Em JavaScript, funções são objetos de primeira classe que, além de serem usados sozinhos, também podem ser passados como parâmetros. Exportar funções é uma ótima maneira de transferi-las para outros programas. Também pode ser usado quando você deseja criar bibliotecas reutilizáveis.
Use a função de exportação para exportar funções JavaScript. Export Function Exporta a função fornecida para uso por outro arquivo ou script. Ao exportar nossas próprias funções, podemos usá-las livremente em outros arquivos ou scripts sem nos preocuparmos com questões de licenciamento.
Existem duas maneiras de usar a função de exportação de forma eficaz. Veremos isso com um exemplo de código.
Suponha que você tenha um arquivo getPersonalDetails.js com uma função que retorna o nome completo do usuário após solicitar a entrada. A função fica assim:
function getFullName(fullName){
fullName = prompt('What is your First Name');
console.log(fullName);
}
Você pode exportar esta função simplesmente usando a palavra-chave export seguida do nome da função entre colchetes. Se parece com isso:
export {getFullName};
A segunda maneira é adicionar a palavra-chave export antes de declarar a função.
export function getFullName (fullName){...}
Você pode exportar várias funções usando o primeiro método. Isso é feito colocando o nome da função desejada entre chaves. As funções são separadas por vírgulas.
Por exemplo: Digamos que você tenha três funções em nosso arquivo getPersonalDetails.js – getFullName(), getEmail(), getDob(). Você pode exportar a função adicionando a seguinte linha de código:
export {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 é muito simples. JavaScript tem um recurso interno para importar suas próprias funções de outros arquivos. Se você quiser acessar essas funções de outros módulos, é uma boa ideia incluir uma declaração de função para cada utilitário.
A função a ser importada foi exportada em seu arquivo original.
Você pode importar funções de arquivos diferentes usando a funcionalidade de palavra-chave de importação. As importações permitem que você escolha qual parte de um arquivo ou módulo carregar.
Veja como importar nossa função getFullName de getPersonalDetails.js:
import {getFullName} from './getPersonalDetails.js'
Isso tornará a função disponível em nosso arquivo atual.
Para importar várias funções, você precisa colocar as funções a serem importadas entre chaves. Cada um é separado por uma vírgula (,).
import {getFullName, getEmail, getDob} from './getPersonalDetails.js'
Há outra maneira de usar a função de importação. Isso nos permite importar todas as exportações para um arquivo específico. Isso é feito usando a sintaxe de import *.
Você pode importar todas as exportações para nosso getPersonalDetails.js adicionando a seguinte linha de código:
import * as personalDetailsModule from './getPersonalDetails.js'
O acima criará um objeto chamado personalDetailsModule.
É 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 como qualquer propriedade do objeto.
Por exemplo, podemos acessar a função getFullName adicionando a seguinte linha de código:
personalDetailsModule.getFullName();
O que é o modo de exportação?
O modo de exportação é uma função de exportação especial. Use esta opção se apenas uma variável deve ser exportada do arquivo. Também é usado para criar valores de fallback para arquivos ou módulos.
Aqui está um exemplo onde usamos a função getFullName por padrão:
export default function getFullName (fullName){...}
Você não pode usar vários valores por padrão em cada módulo ou arquivo.
As funções usadas por padrão são importadas de forma diferente. Veja como importar nossa função getFullName padrão:
import fullName from './getPersonalDetails.js'
Aqui estão as diferenças:
- O valor importado fullName não tem chaves ao redor.
- Aqui fullName é apenas um nome de variável. Ele armazena o valor de qualquer função padrão.
Sobrecarregue sua função JavaScript
Os módulos JavaScript são trechos de código que podem ser reutilizados em outras partes do código, usando os recursos 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 ele ajuda a manter seu código organizado. Também torna seu código mais fácil de gerenciar e depurar.
Leia também: As 20 linguagens de programação mais populares de 2022