O artigo de hoje vamos focar em uma das melhores funcionalidades do javascript dos últimos tempos do ES6 módulos, na minha opinião, que é a declaração import e export do ECMAScript 6 (ES6), ou seja é o javascript em módulos.
Mas peraí jovem, tem um vídeo show de bola sobre esse assunto no meu canal do youtube, dá uma olhada abaixo. Else, continue lendo…
Por que devemos utilizar ES6 módulos?
A idéia de utilizar módulos no JavaScript é que você pode quebrar o seu código em pequenas partes para que você possa importar essas funcionalidades em outros arquivos dinamicamente. Com isso, a sua aplicação vai ficará muito mais distribuída, limpa e muito mais simples de executar qualquer tipo de manutenção no futuro como por exemplo refatorar uma função, ou adicionar uma nova classe.
Para o exemplo do artigo de hoje trabalharemos com 3 arquivos. O index.html que é o nosso html normal. O main.js que é onde toda a mágica será criada. E o terceiro será o arquivo superHero.class.js que contém uma classe lúdica só para exemplificar e entendermos como o js em módulos funciona.
E antes de colocarmos a mão na massa precisamos entender como funciona essa declaração import e export, que no final das contas é literalmente exportar e importar funcionalidades.
Existem duas formas para exportar algo de um arquivo. A primeira é a forma padrão e a segunda é a forma digamos normal ou nomeada.
Para utilizar a forma padrão utilizaremos a seguinte declaração, onde var pode ser uma simples variável, objeto, array ou até mesmo uma classe.
export default var;
Já a forma normal a gente utiliza a simples declaração:
export var;
E a diferença entre elas é que quando você utiliza a exportação padrão na hora de importar você precisa declarar o nome da sua variável e a forma normal você precisa importar utilizando o nome da variável que a gente declarou na exportação.
// Forma padrão para export
export default var;
// Forma padrão na hora de importar
import qualquerNome from 'meuArquivo.js';
// Forma normal
export var;
// Forma normal na hora de importar
import { nomeDaVar } from 'meuArquivo.js';
Agora vamos criar os arquivos já ditos para poder ficar claro essa confusão de import e export.
// index.html
<!doctype html>
<html lang="en">
<head>
<title>Javascript módulos import/export</title>
<script type="module" src="./main.js"></script>
</head>
<body>
</body>
</html>
Perceba que adicionamos type="module" na tag script para informar ao browser que estamos trabalhando com módulos.
// superHero.class.js
export default class SuperHero {
constructor(name, power) {
this.name = name;
this.power = power;
}
}
export function printHeroName(hero) {
console.log(`Superhero name is: ${hero.name}`);
}
export function printHeroPower(hero) {
console.log(`Superhero power is: ${hero.power}`);
}
Agora o main.js onde a brincadeira vai começar. No arquivo abaixo perceba que estamos importando o superHero.class.js e instanciando a classe baseado na variável Hero que é a classe propriamente dita.
E então vamos imprimir o name e o power desse super hero.
import Hero from './superHero.class.js';
const hero = new Hero('Superman', 'visão de raio-x');
console.log(hero.name);
console.log(hero.power);
Perceba que usamos a variável Hero que poderia ser qualquer outro nome e não necessariamente o mesmo nome da classe que exportamos no arquivo superHero.class.js.
Agora vamos importar as outras duas funções printHeroName() e printHeroPower() do arquivo superHero.class.js. Mas nesse caso como não é a forma padrão, você precisa necessariamente importar usando o mesmo nome da função original, dentro do sinal de chaves { } vejamos:
import Hero from './superHero.class.js';
import { printHeroName, printHeroPower } from './superHero.class.js';
const hero = new Hero('Superman', 'visão de raio-x');
printHeroName(hero);
printHeroPower(hero);
Mas, se ainda assim você não quiser usar o nome da função original, você pode usar um alias, ou seja um apelido.
import Hero from './superHero.class.js';
import { printHeroName as heroName, printHeroPower as heroPower } from './superHero.class.js';
const hero = new Hero('Superman', 'visão de raio-x');
heroName(hero);
heroPower(hero);
E agora vamos melhorar o nosso código por que estamos repetindo o import duas vezes para o mesmo arquivo, não tem necessidade de fazer isso, beleza? Então abaixo segue o arquivo final.
import Hero, { printHeroName as heroName, printHeroPower as heroPower } from './superHero.class.js';
const hero = new Hero('Superman', 'visão de raio-x');
heroName(hero);
heroPower(hero);
// console.log(hero.name);
// console.log(hero.power);
Curtiu? Deixe seu like e comente abaixo sobre o tema.
