Java Script - código de efeito

05/11/2018

5

Web

Olá , estou estudando um código de efeito, mas estou tendo alguma dúvidas em descobrir o que cada linha faz como por exemplo essa:
constructor(el){
this.DOM={el:el};
this.DOM.openCtrl = this.DOM.el.querySelector(''''''''.action-menu'''''''');
...
O this caso eu não esteja errado, refere-se ao elemento el, o DOM é a representação do documento HTML que eu posso acessar os objetos dentro dele com div, a entre outros(Me corrijam se eu estiver errado kkk). Agora this.DOM.openctrl , não entendi o uso desse openCtrl. Caso queiram ver o código: https://tympanus.net/codrops/2018/10/03/multibox-menu/
Adolfo Poiatti

Adolfo Poiatti

Responder

Post mais votado

08/11/2018

Olá Adolfo. Esse JS que você está analisando, usa o paradigma de orientação a objetos. Veja que ele trabalha com classes, uma delas a Menu e essa classe tem um método construtor. Assim como no Java, não sei se você conhece Java, para instanciar uma classe precisamos usar o método construtor da classe. No caso da classe Menu, o método construtor tem um argumento que é o 'el'.
class Menu {
        constructor(el) {
            this.DOM = {el: el};
            // Open and close ctls.
            this.DOM.openCtrl = this.DOM.el.querySelector('.action--menu');
            this.DOM.closeCtrl = this.DOM.el.querySelector('.action--close');

O que é feito ao declarar o construtor: O 'el' é recebido como parâmetro, ou seja, quando você instanciar a classe Menu vai precisar adicionar um valor que represente o 'el'. Esse valor será então adicionado a um documento, que contém a chave 'el'
{el: el} 

e esse documento será atribuído a variável 'DOM'.
Mas porque o documento 'el'? Porque fica mais fácil acessar os dados atribuídos ao DOM. Agora é só usar 'DOM.el' e você terá acesso, é como se criasse um objeto nomeado como 'el' dentro do 'DOM'
this.DOM.el.querySelector() 

Esse 'el' chega ao construtor como? Pela instancia da classe Menu (linha 168 do arquivo):
// Initialize the Menu. 
 const menu = new Menu(document.querySelector('nav.menu'));

E todo o código do HTML que foi retornado por
document.querySelector('nav.menu')

será o valor do objeto 'el' lá na classe Menu.
Assim, quando aparece o código
this.DOM.openCtrl = this.DOM.el.querySelector('.action--menu');

o valor retornado por
this.DOM.el.querySelector('.action--menu');

será atribuída a variável 'openCtrl' criada dentro do 'DOM'. Veja que o conteúdo atribuído a ela vem do objeto 'el' e esse conteúdo é recuperado por meio da classe de CSS '.action--menu'. Assim, quando for necessário realizar alguma ação no conteúdo da página que tem essa classe de CSS, basta agora usar
this.DOM.openCtrl 

como por exemplo
this.DOM.openCtrl.addEventListener('click', () => this.open());

que adiciona o evento addEventListener do JS que tem como objetivo escutar/esperar por clique do mouse no componente da página que contém a classe CSS atribuída a 'openCtrl'. Quando esse clique for dado, a função open() será executa.

Marcio Souza

Marcio Souza
Responder

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários,
consulte nossa política de privacidade.

Aceitar