Gostaria de mais explicações sobre a função genérica que fizemos no arquivo validacao.js. Eu fiz os pré-requisitos em javascript, mas senti falta de estar um pouquinho mais explicado aqui. Também senti falta da transcrição, porque às vezes lendo nós conseguimos entender de formas diferentes.
Por exemplo, por que usamos validadores[tipoDeInput] duas vezes na primeira constante do arquivo validacao.js?
export function valida(input) { const tipoDeInput = input.dataset.tipo;
if(validadores[tipoDeInput]) {
validadores[tipoDeInput](input)
}}
Eu também achei que poderia ter sido melhor explicado esta parte. Mas acredito que consegui entender.
Como esta função vai ser chamada para todos os inputs atravéz do evento 'blur', a primeira coisa é pegar o conteudo do "data atribute" de nome 'tipo'. No caso só o input de data de dascimento tem o 'data-tipo' que recebeu o valor "dataNascimento".
const tipoDeInput = input.dataset.tipo;Dentro do objeto de nome "validadores" que foi criado, temos no momento apenas um validador com o nome "dataNascimeto". Que esta atribuido à função "validaDataNascimento". Ou seja, sempre que este validador for acionado ele vai chamar a função "validaDataNascimento" passando um input como parâmetro.
const validadores = {
dataNascimeto:input => validaDataNascimento(input)
}Então primeiramente esta sendo verificado, com "if" se dentro do objeto "validadores" tem um validador de nome "dataNascimeto". Porque este é o conteúdo da variavel "tipoDeInput" atribuido anteriormente. Para os demais inputs que também chamam esta função, este teste deve falhar, porque não possuem o "data-tipo" ou se possuirem, o valor deve sere diferente de "dataNascimeto". A ideia aqui é que cada input tenha o "data-tipo" com valores específicos das validações que serão necessárias implementar no futuro.
Se o input for do tipo "dataNascimeto", então entra na condição e executa a função [Colocar abre e fecha parenteses após o nome da função executa a função] que esta atrelada ao validador de nome "dataNascimeto". Porque "tipoDeInput" é igual à "dataNascimeto". E executa esta função passando o input como parâmetro. Pois é exatamente este parâmetro que a função "validaDataNascimento" precisa para ser executada.
if (validadores[tipoDeInput]) {
validadores[tipoDeInput](input);
}Ou seja a função "validaDataNascimento" é chamada somente para aqueles inputs que fazem referencia à uma data de nascimento. Outras funções podem ser criadas para validar outro tipo de informação e serem adicionadas ao objeto "validadores" com "data atributes" diferentes.
Espero ter ajudado.
Realmente não há apoio didático, estou chegando a conclusão que a Alura forma copiadores de código e não profissionais desenvolvedores. Venho reclamando muito dos últimos cursos da grade Front-End pois em sua maioria somente ensinam a copiar código sem explicar os fundamentos e raciocínio do contudo apresentado.