Java Script - código de efeito
05/11/2018
0
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/
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'.
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'
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'
Esse 'el' chega ao construtor como? Pela instancia da classe Menu (linha 168 do arquivo):
E todo o código do HTML que foi retornado por
será o valor do objeto 'el' lá na classe Menu.
Assim, quando aparece o código
o valor retornado por
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
como por exemplo
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.
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
Clique aqui para fazer login e interagir na Comunidade :)
