Resumo : neste tutorial, você aprenderá como usar a palavra-chave JavaScript import para importar variáveis, funções e classes de outro módulo.
Introdução à palavra-chave de importação JavaScript
Os módulos ES6 permitem estruturar o código JavaScript em módulos e compartilhar valores (variáveis, funções, classes, etc.) entre eles.
Para importar valores de um módulo, você usa a import
palavra-chave. Além disso, você precisa carregar o arquivo fonte JavaScript como um módulo. Em HTML, você pode fazer isso especificando na type="module"
tag do script:
<script type="module" src="app.js"></script>
Linguagem de código: JavaScript ( javascript )
Daremos um exemplo simples para ilustrar como usar a import
palavra-chave.
Suponha que temos um projeto com a seguinte estrutura:
├── index.html
└── js
├── app.js
└── greeting.js
Linguagem de código: JavaScript ( javascript )
Neste projeto, index.html
carrega o app.js
como um módulo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript import</title>
</head>
<body>
<script src="js/app.js" type="module"></script>
</body>
</html>
Linguagem de código: JavaScript ( javascript )
O greeting.js
módulo possui uma função sayHi()
que exibe uma mensagem. Ele exporta a sayHi()
função como uma exportação padrão:
export default function sayHi() {
alert('Hi');
}
Linguagem de código: JavaScript ( javascript )
O app.js
irá importar o sayHi()
método do greeting.js
módulo e executá-lo.
Importar uma exportação padrão
Se um módulo usar uma exportação padrão, você poderá importar a exportação padrão desse módulo usando a seguinte sintaxe:
import name from 'module.js';
Linguagem de código: JavaScript ( javascript )
Por exemplo, você pode importar a sayHi()
função de greeting.js
módulo para app.js
módulo da seguinte maneira:
import sayHi from './greeting.js';
sayHi();
Linguagem de código: JavaScript ( javascript )
Se você abrir index.html
no navegador da web, verá uma mensagem de alerta.
Como a sayHi()
função é uma exportação padrão, você pode atribuir a ela os nomes que desejar ao importá-la.
Por exemplo, você pode importar a sayHi
função do greeting.js
módulo e definir seu nome displayGreeting()
da seguinte forma:
import displayGreeting from './greeting.js';
displayGreeting();
Linguagem de código: JavaScript ( javascript )
Importar exportações nomeadas
Ao contrário de importar uma exportação padrão, você precisa especificar o nome exato das exportações nomeadas ao importá-las para um módulo. Além disso, você precisa colocar as exportações nomeadas entre chaves.
Esta é a sintaxe para importar exportações nomeadas:
import { namedExport1, namedExport2} from 'module.js';
Linguagem de código: JavaScript ( javascript )
Por exemplo, podemos modificar o greeting.js
módulo que contém duas exportações nomeadas:
export function sayHi() {
alert('Hi');
}
export function sayBye() {
alert('Bye');
}
Linguagem de código: JavaScript ( javascript )
Para importar as funções sayHi()
e sayBye()
para o app.js
módulo, use o seguinte código:
import { sayHi, sayBye } from './greeting.js';
Linguagem de código: JavaScript ( javascript )
Você também pode chamar estas funções:
import { sayHi, sayBye } from './greeting.js';
sayHi();
sayBye();
Linguagem de código: JavaScript ( javascript )
Se você abrir no index.html
navegador da web, verá dois alertas criados por essas duas funções.
Importação de namespace
Um objeto de namespace de módulo é um objeto estático que inclui todas as exportações de um módulo. É um objeto estático que o JavaScript cria ao avaliar o módulo.
Para acessar o objeto de namespace do módulo, use a seguinte sintaxe:
import * as name from 'module.js';
Linguagem de código: JavaScript ( javascript )
Nesta sintaxe, name
é o objeto de namespace do módulo que inclui todas as exportações do module.js
módulo como propriedades.
Por exemplo, se modules.js
tiver as exportações myVariable
, myFunction
, e myClass
nomeadas, você poderá acessá-las por meio do name
objeto como este:
name.myVariable
name.myFunction
name.myClass
Linguagem de código: JavaScript ( javascript )
Para ilustrar como funciona a importação de namespace, podemos alterar app.js
para usar a importação de namespace da seguinte maneira:
import * as greeting from './greeting.js';
greeting.sayHi();
greeting.sayBye();
Linguagem de código: JavaScript ( javascript )
O seguinte especifica o greeting
objeto de namespace do módulo:
import * as greeting from './greeting.js';
Linguagem de código: JavaScript ( javascript )
Assim que tivermos o objeto namespace do módulo, podemos chamar as funções sayHi()
e :sayBye()
greeting.sayHi();
greeting.sayBye();
Linguagem de código: JavaScript ( javascript )
Se o módulo de importação tiver uma exportação padrão, você poderá acessá-lo através da default
palavra-chave:
name.default
Linguagem de código: JavaScript ( javascript )
Por exemplo, podemos alterar a sayHi
função para uma exportação padrão no greeting.js
módulo:
export default function sayHi() {
alert('Hi');
}
export function sayBye() {
alert('Bye');
}
Linguagem de código: JavaScript ( javascript )
E importe as exportações do greeting.js
módulo para o app.js
módulo usando a importação de namespace:
import * as greeting from './greeting.js';
greeting.default(); // sayHi()
greeting.sayBye();
Linguagem de código: JavaScript ( javascript )
Neste caso, podemos chamar a sayHi()
função através do default()
mostrado acima. Observe que você não pode acessar a sayHi()
função usando seu nome assim:
greeting.sayHi();
Linguagem de código: JavaScript ( javascript )
Se você fizer isso, receberá o seguinte erro:
Uncaught TypeError: greeting.sayHi is not a function
Linguagem de código: JavaScript ( javascript )
Renomeando uma exportação nomeada
Ao importar uma exportação nomeada, você pode atribuir um novo nome a ela. É útil quando você importa a função com o mesmo nome de módulos diferentes:
import { name as name1 } from "module1.js";
import { name as name2 } from "module2.js";
Linguagem de código: JavaScript ( javascript )
Por exemplo, o seguinte ilustra como renomear as funções sayHi()
e sayBye()
para hi()
e bye()
ao importar para o app.js
módulo:
import { sayHi as hi, sayBye as bye } from './greeting.js';
hi();
bye();
Linguagem de código: JavaScript ( javascript )
Resumo
- Use a palavra-chave JavaScript
import
para importar variáveis, funções e classes para um módulo.