Entrar Ainda não tem acesso?
4
respostas

Acesso ao DOM

Referente ao curso JavaScript: conhecendo o Browser e padrões de projeto, no capítulo A ligação entre as ações do usuário e o modelo e atividade Evitando percorrer o DOM muitas vezes

por THIAGO
| 188.8k xp | 78 posts
class NegociacaoController {


    adiciona(event) {
        event.preventDefault();

        let $ = document.querySelector.bind(document);
        let inputData = $('#data');
        let inputQuantidade = $('#quantidade');
        let inputValor = $('#valor');

        console.log(inputData.value);
        console.log(inputQuantidade.value);
        console.log(inputValor.value);


    }
}

class NegociacaoController {

    constructor() {
        let $ = document.querySelector.bind(document);
        this.inputData = $('#data');
        this.inputQuantidade = $('#quantidade');
        this.inputValor = $('#valor');

    }

    adiciona(event) {
        event.preventDefault();


        console.log(this.inputData.value);
        console.log(this.inputQuantidade.value);
        console.log(this.inputValor.value);


    }
}

Li a dúvida do pessoal do forum, li também as respostas dos instrutores, mas mesmo assim não consigo entender como em um dos códigos há 100 (por exemplo) acessos ao DOM e no outro há apenas 1. Não consigo enxergar isso do ponto de vista lógico.

Não vai ser sempre preciso ir ''buscar'' no input os valores? 1,2,3 ou 100 vezes? e ao ir buscar esses valores, cada um deles não é um acesso ao DOM?

4 respostas
por Wanderson Macêdo
| 3966.1k xp | 8086 posts
Instrutor Desenvolvedor

Opa Thiago, tudo bem? Posso te ajudar nessa? Tudo acontece nessa linha aqui:

let $ = document.querySelector.bind(document);

Ela é a mesma nos dois casos. Certo? O que muda? O momento em que ela é executado.

No primeiro caso, toda vez que o método adiciona é chamado, você faz um acesso ao dom quando essa linha é executada.

No segundo caso, você usou um construtor, que será executado apenas uma vez quando o objeto dessa classe for criado.

Para ser um pouco mais direto: Quando colocamos um código em um método, ele será executado quantas vezes for chamado em um objeto. Quando for no construtor, o mesmo código será executado apenas uma vez em todo o ciclo de vida do objeto. Um método comum, pode ser executado infinitas vezes, o construtor não, ele só é executado quando o objeto estiver sendo criado.

Pegou a ideia?

por THIAGO
| 188.8k xp | 78 posts

Obrigado pela resposta, Wanderson Macêdo.

Então a quantidade de objetos que eu criar vai ser diretamente proporcional ao número de acessos ao DOM ? No caso acima, vou precisar criar apenas 1 único objeto (NegociacaoController) e consequentemente irei realizar apenas 1 acesso ao DOM e, a partir desse ÚNICO objeto, posso adicionar várias negociações. Está certo esse raciocínio?

por THIAGO
| 188.8k xp | 78 posts

Acho que minha dúvida é mais com relação ao Intepretador, sua explicação está perfeita Wanderson.

    adiciona(event) {
        event.preventDefault();

       console.log(this.inputData.value);
        console.log(this.inputQuantidade.value);
        console.log(this.inputValor.value);


    }
}

É pq na minha visão, quando esta linha é interpretada: console.log(this.inputData.value) ele estaria acessando a DOM. Como obtém o valor da data sem acessar o DOM? Entendi que nesse caso não é usado mais o querySelector, já que foi usado no constructor. Porém ainda há algum acesso ao input (para buscar o seu valor(value)). isso não seria acessar o DOM?

por Wanderson Macêdo
| 3966.1k xp | 8086 posts
Instrutor Desenvolvedor

O Raciocínio está certo sim, se você criar dois controllers, serão dois acessos ao DOM, mas como você não precisa de dois, terá apenas um acesso, podendo adicionar e remover quantos registros do DOM precisar.

Essa é uma boa pergunta. O que acontece é que, no seu querySelector você guarda uma referência da arvore do DOM na memória. Então, você manipula o que está em memoria basicamente.

Imagine seu quarto. Considere abrir e fechar a porta como um acesso ao DOM. Se você deixar a porta aberta, pode entrar e sair várias vezes sem precisar ficar abrindo e fechando, entende? Essa é uma analogia ruim, mas deve servir para dar uma ideia.

Acho que isso explica um pouco. Vou ver se encontro um material de apoio.