Entrar Ainda não tem acesso?
5
respostas

Construtor evita percorrer o DOM muitas vezes?

Referente ao curso JavaScript: conhecendo o Browser e padrões de projeto

por Hugo José da Silva Sousa
| 310.3k xp | 120 posts

Eu quero entender como o construtor de uma classe evita percorrer o DOM muitas vezes uma vez que quando uma nova instância é criada se for usado document.querySelector() o DOM será percorrido do mesmo modo.

Ex.:

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);

  }
}

Ou estou falando besteira?

5 respostas
por Alberto Souza
| 2676.6k xp | 5740 posts
Instrutor Desenvolvedor e Instrutor

Opa Hugo, o que você falou parece fazer sentido. Pode apontar o momento do curso que essa discussão é feita?

por Hugo José da Silva Sousa
| 310.3k xp | 120 posts

Claro, Aberto! Nessa aula:

https://cursos.alura.com.br/course/javascript-es6-orientacao-a-objetos-parte-1/task/16525

Curso de javascript avançado I, Evitando percorrer o DOM muitas vezes

por Alberto Souza
| 2676.6k xp | 5740 posts
Instrutor Desenvolvedor e Instrutor

Opa Hugo, vi aqui. Se várias instâncias do controller forem criadas, aí não vai ter jeito, a árvore vai ser percorrida várias vezes. Só que se esse controller não for instanciado várias vezes, o construtor vai ajudar :). Ficando no método, cada vez que ele fosse chamado ia percorrer.

por Pedro Ávila
| 330.4k xp | 175 posts

Hugo, quantas instâncias de NegociacaoController você possui?

No seu código, toda vez que você clicar em adicionar, o JavaScript terá que buscar os elementos na página.

Se ao invés de buscar os elementos dentro do método adiciona, você o fizer no construtor, e guardar a referência para o elemento em uma variável acessível em toda a classe, somente no momento em que sua instância for criada, será feita a busca pelos elementos. Neste caso toda vez que você clicar em adicionar ele usará uma referência que já está salva para os elementos.

É um pequeno cache.

por Flavio Henrique de Souza Almeida
| 3119.3k xp | 6969 posts
Instrutor Instrutor/Desenvolvedor Web Sênior/Autor

No curso eu mostro a busca no método adiciona e depois modifico para buscar no constructor justamente para não ter que ficar buscando toda vez os elementos do DOM.

Se você tiver várias instâncias de NegociacaoController, o que não faz sentido dentro do contexto da aplicação, cada instância terá que buscar os elementos do DOM.

class NegociacaoController {

  constructor() {

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

            this.inputData = $('#data');
            this.inputQuantidade =  $('#quantidade');
            this.inputValor = $('#valor');
  }