Título da Seção
Aula 02 - Utilizando módulos
Módulos são arquivos JS que tem a capacidade de
exportar e importar informações de outros arquivos
do mesmo tipo.
As vantagens dessa abordagem são: organização do código; compartilhamento de variáveis em escopos diferentes; explicita as dependencias dos arquivos.
Podemos exportar arquivos de dois modos: named exports e default exports.
O named export pode ser feito utilizado a palavra reservada export diretamente na função a ser exportada quando a declaramos
export function nome_da_função(param){ {
//instruções
}
ou separadamente passando apenas o nome das funções a serem exportadas.
function nome_da_função(param){ {
//instruções
}
export {
nome_da_função1,
nome_da_função2,
}
O default export só pode ocorrer uma vez em cada arquivo e será o retorno padrão do seu arquivo.
Para importar arquivos criados como named exports utilizamos a palavra reservada import seguida dos nomes das funções, variáveis ou classes entre chaves ({ }) seguido de from 'arquivo de origem'.
Quando importamos dados exportados como default exports utilizamos a mesma sintaxe, porém sem as chaves.
Podemos alterar o nome do dado importado durante o import utilizando a sintaxe:
import { arquivo as Apelido } from './arquivo.js';
Podemos ainda importar todos os dados exportados em um arquivo utilizando:
import * as NOME_DA_IMPORTACAO from 'arquivo.js'
Para utilizar os modulos no HTML precisamos declarar na tag <script> a propriedade type="module" para informar ao HTML esse tipo de operação.
Os módulos sempre estão em strict mode; podem ser utilizadas as extensões '.js' e '.mjs'.

As vantagens dessa abordagem são: organização do código; compartilhamento de variáveis em escopos diferentes; explicita as dependencias dos arquivos.
Podemos exportar arquivos de dois modos: named exports e default exports.
O named export pode ser feito utilizado a palavra reservada export diretamente na função a ser exportada quando a declaramos
export function nome_da_função(param){ {
//instruções
}
ou separadamente passando apenas o nome das funções a serem exportadas.
function nome_da_função(param){ {
//instruções
}
export {
nome_da_função1,
nome_da_função2,
}
O default export só pode ocorrer uma vez em cada arquivo e será o retorno padrão do seu arquivo.
Para importar arquivos criados como named exports utilizamos a palavra reservada import seguida dos nomes das funções, variáveis ou classes entre chaves ({ }) seguido de from 'arquivo de origem'.
Quando importamos dados exportados como default exports utilizamos a mesma sintaxe, porém sem as chaves.
Podemos alterar o nome do dado importado durante o import utilizando a sintaxe:
import { arquivo as Apelido } from './arquivo.js';
Podemos ainda importar todos os dados exportados em um arquivo utilizando:
import * as NOME_DA_IMPORTACAO from 'arquivo.js'
Para utilizar os modulos no HTML precisamos declarar na tag <script> a propriedade type="module" para informar ao HTML esse tipo de operação.
Os módulos sempre estão em strict mode; podem ser utilizadas as extensões '.js' e '.mjs'.