ES6 - Módulos

Introdução

Considere um cenário em que partes do código JavaScript precisam ser reutilizadas. ES6 vem em seu socorro com o conceito de Modules.

Um módulo organiza um conjunto relacionado de código JavaScript. Um módulo pode conter variáveis e funções. Um módulo nada mais é do que um pedaço de código JavaScript escrito em um arquivo. Por padrão, as variáveis e funções de um módulo não estão disponíveis para uso. Variáveis e funções dentro de um módulo devem ser exportadas para que possam ser acessadas de outros arquivos. Módulos em ES6 funcionam apenas emstrict mode. Isso significa que as variáveis ou funções declaradas em um módulo não estarão acessíveis globalmente.

Exportando um Módulo

A palavra-chave export pode ser usada para exportar componentes em um módulo. As exportações em um módulo podem ser classificadas da seguinte forma -

Exportações Nomeadas
Exportações padrão

Exportações Nomeadas

As exportações nomeadas são diferenciadas por seus nomes. Pode haver várias exportações nomeadas em um módulo. Um módulo pode exportar componentes selecionados usando a sintaxe fornecida abaixo -

Syntax 1

//using multiple export keyword
export component1
export component2
...
...
export componentN

Syntax 2

Como alternativa, os componentes em um módulo também podem ser exportados usando uma única palavra-chave de exportação com {} sintaxe de ligação conforme mostrado abaixo -

//using single export keyword

export {component1,component2,....,componentN}

Exportações padrão

Módulos que precisam exportar apenas um único valor podem usar exportações padrão. Só pode haver uma exportação padrão por módulo.

Syntax

export default component_name

No entanto, um módulo pode ter uma exportação padrão e várias exportações nomeadas ao mesmo tempo.

Importando um Módulo

Para poder consumir um módulo, use o import keyword. Um módulo pode ter váriosimport statements.

Importando Exportações Nomeadas

Ao importar exportações nomeadas, os nomes dos componentes correspondentes devem corresponder.

Syntax

import {component1,component2..componentN} from module_name

No entanto, ao importar exportações nomeadas, elas podem ser renomeadas usando a palavra-chave as. Use a sintaxe fornecida abaixo -

import {original_component_name as new_component_name }

Todas as exportações nomeadas podem ser importadas para um objeto usando o asterisco * operator.

import * as variable_name from module_name

Importando Exportações Padrão

Ao contrário das exportações nomeadas, uma exportação padrão pode ser importada com qualquer nome.

Syntax

import any_variable_name from module_name

Exemplo: Exportações Nomeadas

Step 1 - Crie um arquivo company1.js e adicione o seguinte código -

let company = "TutorialsPoint"

let getCompany = function(){
   return company.toUpperCase()
}

let setCompany = function(newValue){
   company = newValue
}

export {company,getCompany,setCompany}

Step 2- Crie um arquivo company2.js. Este arquivo consome componentes definidos no arquivo company1.js. Use qualquer uma das seguintes abordagens para importar o módulo.

Approach 1

import {company,getCompany} from './company1.js'

console.log(company)
console.log(getCompany())

Approach 2

import {company as x, getCompany as y} from './company1.js'

console.log(x)
console.log(y())

Approach 3

import * as myCompany from './company1.js'

console.log(myCompany.getCompany())
console.log(myCompany.company)

Step 3 - Execute os módulos usando um arquivo HTML

Para executar ambos os módulos, precisamos fazer um arquivo html conforme mostrado abaixo e executá-lo no servidor live. Observe que devemos usar oattribute type="module" na tag de script.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
</head>
<body>
   <script src="./company2.js" type="module"></script>
</body>
</html>

A saída do código acima será conforme indicado abaixo -

TutorialsPoint
TUTORIALSPOINT

Exportação Padrão

Step 1 - Crie um arquivo company1.js e adicione o seguinte código -

let name = 'TutorialsPoint'

let company = {
   getName:function(){
      return name
   },
   setName:function(newName){
      name = newName
   }
}

export default company

Step 2 - Crie um arquivo company2.js. Este arquivo consome os componentes definidos no arquivo company1.js.

import c from './company1.js'
console.log(c.getName())
c.setName('Google Inc')
console.log(c.getName())

Step 3 - Execute o modules usando um HTML file

Para executar ambos os módulos, precisamos fazer um arquivo html conforme mostrado abaixo e executá-lo no servidor live. Observe que devemos usar oattribute type="module" na tag de script.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
</head>
<body>
   <script src="./company2.js" type="module"></script>
</body>
</html>

A saída do código acima será conforme mencionado abaixo -

TutorialsPoint
Google Inc

Exemplo: Combinando Exportações Padrão e Nomeadas

Step 1 - Crie um arquivo company1.js e adicione o seguinte código -

//named export
export let name = 'TutorialsPoint'

let company = {
   getName:function(){
      return name
   },
   setName:function(newName){
      name =newName
   }
}
//default export
export default company

Step 2 - Crie um arquivo company2.js. Este arquivo consome os componentes definidos nocompany1.jsArquivo. Importe a exportação padrão primeiro, seguida pelas exportações nomeadas.

import c, {name} from './company1.js'

console.log(name)
console.log(c.getName())
c.setName("Mohtashim")
console.log(c.getName())

Step 3 - Execute os módulos usando um arquivo HTML

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
   </head>
   <body>
      <script src="company2.js" type="module"></script>
   </body>
</html>

A saída do código acima será conforme mostrado abaixo -

TutorialsPoint
TutorialsPoint
Mohtashim

↰ Previous page Next page ↱