JS-1101 - JavaScript Completo ES6 - Refatoração Scroll Suave

JS-1101 - JavaScript Completo ES6 - Refatoração Scroll Suave
Publicado em 25/06/2021 13h35
Visualizações: 399

De módulo para classe

Para este exemplo, será utilizado o conteúdo do projeto prático. 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.

Para baixar o projeto, clique aqui.

Neste ponto, estamos aptos para transformar as funções do projeto em componentes reutilizáveis, independente de nomes de seletores ou métodos.

A primeira função a ser refatorada e transformada em uma classe (o que aumentará sensivelmente a portabilidade, bem como o entendimento da utilização de componentes externos) será a função "smoothScroll", confeccionada no post JS-0311 - Scroll Suave Link Interno e importada no script.js utilizando modules.

JS-1101 - JavaScript Completo ES6 - Refatoração Scroll Suave

O processo de refatorar consiste e pegar um código que já existe e o modificar, simplificando ou otimizando, de forma que ele não perca as suas funcionalidades.

O objetivo é a transformação desta funcionalidade em classe. A classe inicialmente vai precisar de um constutor para a instanciação correta do objeto com seus devidos parâmetros que serão passados dinamicamente.

Os parâmetros utilizados eram os links selecionados na constante "internalLinks".  A função "scrollToSection" será agora um método da classe. "This" passa a ser utilizado para referenciar os atributos e métodos da classe. Os parâmetros do construtor serão os links da seleção antiga e um novo, 'options", receberá o padrão do movimento, início e tipo (behavior e block), para dar liberdade quanto a utilização em definir um padrão diferente sem a necessidade de editar a classe, deixando o anterior como default. Será necessário um método de acionamento do evento e outro para a classe em si. Para evitar a perda de referência do método "scrollToSection" foi utilizado o bind para referenciar sempre o objeto no callback. O retorno do objeto no this permite o encadeamento dos seus métodos ou propriedades caso necessário.

JS-1101 - JavaScript Completo ES6 - Refatoração Scroll Suave

Agora, o script.js deverá instanciar o objeto desta classe, então, será alterada a importação para a criação, passando os parâmetros necessários ao construtor:

JS-1101 - JavaScript Completo ES6 - Refatoração Scroll Suave

O processo já está finalizado e a funcionalidade se manteve. A vantagem é que desta forma, esta classe poderá ser importada para qualquer projeto e quando importada, basta passar o seletor do link para dentro do objeto e executar o init para ativar o sxroll. Um segundo parametro eventualmente passado será definido como "options"

No final, foi executado o comando do webpack, para montar o arquivo main.js comprimido:

$ npx webpack --entry ./js/script.js -o ./

Para baixar o projeto, clique aqui.

Para visualizar 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.