Rodrigo Brito

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 ouexport 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:

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:

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:

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:

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.