JS-1101 - JavaScript Completo ES6 - Refatoração Scroll Suave
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.
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.
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:
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.
