Associação entre evento e controller na "forma JS tradicional" (ao invés da forma dos Frameworks)

Fala Elías, tudo bom?

Sua ideia está correta, mas atente-se que a cada submissão, será criado uma instancia de NegociacaoController, no exemplo anterior, repare que a instância de NegociacaoController está em escopo global, diferentemente da sua abordagem.

Para resolver isso basta que você declare essa instância fora do eventListener.

Outro ponto interessante em se atentar é se preocupar com a legibilidade do seu código, apesar de ser pratico e funcionar bem, encadear querySelector e eventListener podem gerar confusões no futuro se seus seletores não forem bem explícitos. Nesse caso, prefira criar variáveis expressivas para armazenar esses elementos.

Espero ter ajudado!

Abraços e bons estudos!

Olá Paulo, tudo certo e você?

Claro que você ajudou, obrigado!

Em relação à instância realmente não tinha me atentado de declará-la fora do evento;

Em relação à legibilidade, não me preocupei neste caso porque estava focando no entendimento de como seria na "forma JS tradicional", além de eu ter mantido o código conforme uma das aulas anteriores deste curso.

Paulo, então para não deixar dúvidas, favor me retorne se agora o código estaria correto/melhor (e se tiver mais alguma sugestão/correção, favor não hesite em informar):

let negociacaoController = new NegociacaoController();

let btIncluiNegociacao = document.querySelector(".form");
btIncluiNegociacao.addEventListener("submit", function(event) {

  negociacaoController.adiciona(event);
  //..
}

Desde já obrigado! At.te

Opa Elias!

Então, você está indo no caminho certo. Parabéns!!!

Só tome cuidado com a nomenclatura das variáveis, naquela variável "btnIncluiNegociacao" você não armazena uma elemento button mas sim todo um formulário.

Para que fique melhor, eu trocaria o nome por "formNegociacao" ou "formIncluiNegociacao", dependendo se no domínio existem mais de um formulário que lide com negociações. Entendeu?

Só para esclarecer mais, se tivéssemos 2 formulários, chamá-lo apenas de formNegociacao geraria confusão de qual form eu teria naquela variável em questão! Nomear as variáveis é mais complicado do que parece hahaahha

Espero ter ajudado Elias!

Grande abraço!

Olá Paulo!

Ajudou sim, obrigado!

Nem me fala, a definição de nomes (variáveis, funções) é uma das coisas que eu infelizmente mais levo tempo no desenvolvimento, porque me preocupo com a facilidade de entendimento quando outros programadores verificarem o código, e inclusive o meu próprio entendimento após um determinado período!

Esta era uma dúvida que eu fiquei postergando em pedir, porque pensei "o pessoal vai achar muito detalhismo se eu pedir sobre nomes de variáveis, etc, o que realmente agrega valor é focar na funcionalide em si", mas agora que você tocou neste assunto... :D

Então, pra finalizar este tópico e pra te livrar deste aluno (huaahua), gostaria de ver contigo se existe algum curso na Alura com dicas para definição de nomes de variáveis, funções, "variáveis-funções", principalmente na linguagem Javascript e, em segundo plano, se houver também para HTML (nomes dos elementos, classes) e CSS (nomes dos estilos, comportamentos).

Senão (else if huahua) houver curso para esta questão em si, se haveria alguma documentação oficial com essa padronização (se tiver em português melhor, mas não hesite em informar se houver somente em inglês).

E se não houver também (else final huahua), qual a padronização que vocês da Alura/Caelum seguem (ou que você segue) para isso.

Utilizando como exemplo o "btnIncluiNegociacao", antes deste nome eu tinha considerado "incluiNegociacao", aí troquei pensando que seria interessante relacionar ao elemento HTML que está sendo "acionado", ou seja, a dúvida é entender qual o escopo/abrangência de um nome de variável/função ou de uma variável que também é função (no JS é muito comum):

• o nome da variável e/ou função deve informar somente o que irá armazenar (no teu exemplo "form"), somente (ou junto com) sua funcionalidade (no exemplo IncluiNegociacao), somente (ou junto com) a ação ou elemento relacionado (no exemplo btn de botão ou nome do botão em si), etc?

Aguardo teu retorno, e desde já (para não adicionar mais uma mensagem neste tópico com "somente" obrigado, e que vai contar pontuação - na minha opinião - "injusta" pra mim) Muito Obrigado Paulo!

At.te

Fala Elías!

Não se incomode! Posso ficar aqui o dia todo! hahaha

Realmente nomenclatura é complicado, mas existem algumas discussões sobre o tema.

Recomendo muito que você leia o livro Clean Code (código limpo em português), onde ele decorre sobre toda essa discussão de como ter um código limpo de verdade e como isso pode te ajudar e facilitar sua vida. (Tem um capítulo de nomenclatura!)

Além disso, em CSS, acho que você pode achar interessante dar uma lida sobre o padrão BEM (block element modifier), provavelmente depois de conhecer você será capaz de organizar seu CSS/HTML de uma forma muito mais eficiente! Infelizmente não nos preocupamos com isso em pequenos projetos, mas a medida que as coisas escalam, vemos que devíamos ter dado uma atenção especial desde o início, essa sua preocupação vai facilitar muito a sua jornada!

Sobre a sua pergunta:

o nome da variável e/ou função deve informar somente o que irá armazenar (no teu exemplo "form"), somente (ou junto com) sua funcionalidade (no exemplo IncluiNegociacao), somente (ou junto com) a ação ou elemento relacionado (no exemplo btn de botão ou nome do botão em si), etc?

Não existe uma resposta correta para isso, o ideal é realmente analisar o que ela armazena, para que ela serve e como ela é utilizada e se realmente faz sentido que ela exista. Tanto não existe resposta correta que os nomes tendem a mudar a medida que as refatorações são feitas. O importante é que você sozinho ou com uma equipe estejam na mesma página em relação ao desenvolvimento, para isso, é legal também fazer uso de comentários, mas cuidado com comentário em excesso!

ex:

//Função para calcular imposto de 25 porcento
function calculaImpostode25Porcento(){
}

O exemplo acima é um caso típico de comentário desnecessário já que a assinatura do método já nos dá essa informação!!! Por isso, utilize com sabedoria!

E lembre-se, um código bem escrito raramente precisa de comentários porque possui nomes expressivos e auto-explicativos! Mas sabemos que não existe um mundo ideal quando trabalhamos em equipe hahahaha, por isso use com sabedoria

Espero ter ajudado Elias!

Sempre que precisar pode me procurar por aqui!

Abraços e sucesso!!

Elías! Fico feliz em ajudar!

Estou fechando o tópico, mas qualquer nova dúvida basta criar uma nova thread!

Abraços!