Java Script - c�digo de efeito

05/11/2018

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

Curtir t�pico + 0

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

Responder

Gostei + 1