Aguarde, carregando...

JS-0502 - JavaScript Completo ES6 - Modules

JS-0502 - JavaScript Completo ES6 - Modules
Publicado em 24/03/2021 16h56

Organizando o JS em módulos

A organização dos códigos em módulos, seja em qual linguagem for, facilita muito a manutenção deste, pois a ação de dividir o código em diferentes arquivos onde cada um contém suas funções específicas permite o isolamento de possíveis inconsistências, controle de compatibilidade, clareza e sobretudo, o compartilhamento. Quando arquivo abriga somente um módulo específico ele já está desacoplado e pode ser incluido em qualquer projeto que o necessite.

O compartilhamento já é nativo a partir da versão ES6 do JS, mas há algumas ferramentas que permitem a divisão do código, tais como Grunt, Gulp, Webpack, Browserify, Parcel dentre outros.

Para permitir a utilização de módulos, na tag script a propriedade type="module".

O arquivo principal do js será o elo de ligação para carregar os módulos, utilizando o import função from "caminho/arquivo.js"; ou import {funçãoA, funçãoB} from "caminho/arquivo.js" caso seja mais de uma função e não uma default.

Em cada módulo deve ser definido o que será exportado, podendo ser uma função default ou várias em cada módulo, utilizando export function funçãoA ou export default function função.

Ficou confuso? Será exemplificado com um passo a passo e imagens a seguir. É bem simples!

Para os exemplos será utilizado o conteúdo do projeto. Caso queira o montar em seu ambiente de desenvolvimento, leia o conteúdo do JS-0302 - JavaScript Completo ES6 - Início do Projeto Prático.

  1. No projeto, foi adicionado adicionado um diretório chamado de js, que irá comportar todos os arquivos de script;
  2. Dentro de js foi adicionado o diretório modules, que comportará os módulos propriamente ditos;
  3. O script.js foi movido para o diretório js; e
  4. O arquivo animations.js foi movido para dentro de modules.

Agora, o script do html tem que ser alterado para o type modules e o animations.js não é mais necessário. A chamada do recurso ficou da seguinte forma:

JS-0502 - JavaScript Completo ES6 - Modules

A partir desse ponto, o conteúdo da página não será carregado, restando apenas o background e o menu e o footer. É assim mesmo!

Agora, cada função do arquivo animatiosn.js será transformada em módulos.

  • Para a função smoothScroll:

1 - Criado o arquivo smooth-scroll.js em modules;

2 - Recortada a função do arquivo animations.js e colada no smooth-scroll.js. A ativação é realizada no script.js, então, pode ser colada neste último;

3 - Esse arquivo é o de exportação da função, então na declaração da função, será definido o export:

JS-0502 - JavaScript Completo ES6 - Modules

4 - Agora, a importação deste módulo no scripts.js e a ativação da função.

O nome da função importada deve ser o mesmo nome da exportada ou pode ser utilizado um "alias" colocando no seguinte formato: import smoothScroll as smooth from './modules./smooth-scroll.js';. Se a função for a default, não precisa de alias, pois já é subentendido o nome. Já na importação de mais de uma função, os nomes entre as chaves deverão ser iguais os nomes das funções nos módulos ou utilizado um alias. O asterisco pode ser utilizado como coringa para o nome e colocar um nome, no seguinte formato: import * as smooth from './modules./smooth-scroll.js';.

No projeto, o padrão ficará da seguinte forma. Esse formato é o mais recomendado, mas não é obrigatório:

JS-0502 - JavaScript Completo ES6 - Modules

O mesmo padrão é utilizado para as demais funções, e a final o animations.js pode ser excluído. Os arquivos criados foram os seguintes;

  1. smooth-scroll.js para a função smoothScroll();
  2. tab-nav.js para a função tabNav();
  3. accordion.js para a função accordion(); e
  4. animation-scroll.js para a função animationScroll().

No final, o projeto, até este momento, está da seguinte forma e funcionando normalmente:

JS-0502 - JavaScript Completo ES6 - Modules

O carregamento dos scripts agora está dividido, mas não significa que houve perda de performance, pois o carregamento é realizado de forma assíncrona e a ordem de execução continua como antes. Contudo, no final do projeto, os arquivos serão unificados e minificados.

Além das funções, podem ser exportados objetos, funções, classes, números, strings ou qualquer outro valor e a importação pode ser realizada igualmente à importação de função.

A importação pode ser realizada entre módulos também, e o carregamento será realizado somente uma vez, não importando o número de importações entre módulos. Se o módulo smooth-scroll fosse carregado em todos os outros módulos e script, ainda assim ele seria carregado somente uma vez.

Quando o type module é utilizado, é ativado o modo Strict mode, usando por padrão a declaração 'use strict'. Esse modo permite o encapsulamento de variáveis, protegendo-as de acessos globais.

Para visualizar o projeto em andamento, clique aqui.

Para baixar o projeto, clique aqui.

Veja também:

Confira mais artigos relacionados

Este website utiliza cookies próprios e de terceiros a fim de personalizar o conteúdo, melhorar a experiência do usuário, fornecer funções de mídias sociais e analisar o tráfego. Para continuar navegando você deve concordar com nossa Política de Privacidade

Sim, eu aceito. Não, eu não aceito.