Apesar de programarmos javascript a muito tempo, parece que às vezes nos esquecemos que a mágica advém da interação que essa linguagem consegue fazer com o usuário. E a forma com que “ouvimos” as ações dos usuários pode ou não deixar nosso código muito confuso, grande e difícil de dar manutenção.

A minha proposta aqui, é sugerir uma organização de como tratamos os comportamentos.

a

JavaScript é “orientado a eventos”

Montei um quiz com multipassos para mostrar como podemos organizar nosso código javascript, se programarmos os eventos de uma forma orientada a comportamentos.

A minha proposta é em vez de adicionarmos absolutamente tudo o que queremos diretamente nos eventos .onsubmit, .onclick, .onkeyup … ou tratarmos cada objeto independente, que trabalhemos numa organização por comportamentos.

Se você ainda não respondeu, vai lá no Quiz – Qual meu perfil como FrontEnd ? que eu te espero aqui, para continuar falando mais sobre como organizar pensando em “comportamentos”.

Abstraia

Meu quiz é formado por 8 passos, sendo o último responsável apenas por mostrar ao usuário o “resutado”.

Todos os passos possuem uma “validação” se foi ou não preenchido. (tente voltar ao quiz e prosseguir em qualquer um deles, sem responder o que foi perguntado).

Aqui eu abstrai esse comportamento de “validar” se já foi respondido, e adicionei um eventListener para todos os forms que mostra um erro caso não esteja preenchido, ou deixa prosseguir mostrando o próximo passo, caso esteja tudo Ok.

```loop($quizForm, function ($form) { $form.addEventListener(“submit”, function (e) { e.preventDefault();

    if (this.getAttribute('data-answer') === 'answered') {
        //.. mostra próximo passo
    } else {
        //.. mostra um erro e não prossegue
    }

}); }); ```

Acima eu faço um loop por cada uma tags <form> e adiciono um listener no evento submit de cada um deles para apenas validar a resposta do usuário.

Independente do que mais esse passo terá que fazer, ele vai precisar dessa validação.

Adicione o que mais vc quiser

Feita a validação inicial, que era um comportamento comum a todos os formulários, eu vou especificando e adicionando os outros comportamentos específicos, como por exemplo, como decido se um passo foi ou não respondido ?

Verificando se o passo 1 foi respondido

formUser.addEventListener("submit", function () {
        answers.user = [];

        if ($name.value !== '' && $email.value !== '') {
            this.setAttribute('data-answer', 'answered');
        }
    });

Lembram do IF da validação ? O meu listener anterior considera como “respondido”, se o atributo “data-answer”, estiver como “answered”. Para o passo 1, verifico se os 2 inputs foram preenchidos.

Verificando se os demais passos foram respondidos

E para os outros passos, que são formulários com tags rádio, eu verifico se algum dos radios daquele form está marcado

var $radio = $form.querySelector('input[type="radio"]:checked');

Simples assim.

Continue adicionando outros comportamentos

O sétimo passo, possui:

-> uma validação para que não deixem vazio,

-> uma regra para verificar se foi preenchido,

-> decide qual resposta mostrar,

-> envia um ajax

Ou seja, esse último passo possui quatro comportamentos, e eu separei isso em 4 chamadas de listeners do evento submit. Sério, dá uma olhada no código.

O código

Coloquei no meu github. Me diz o que vc achou dessa maneira de programar e forka lá o projeto.. 🙂