Hoje, quando não estamos usando jQuery para lidar com eventos no DOM, nós presenciamos muito este trecho de código:
Embora funcione muito bem, nos trás alguns limites…
Dentro do parâmetro de callback, é onde você define toda a sua lógica… Não tem uma maneira simples de adicionar mais callbacks dentro daquele evento de maneira dinâmica, sem que você salve algum tipo de estado dentro daquele callback… por exemplo:
E se você usar o mesmo evento deste botão em algum módulo que está em outro arquivo? Provavelmente outro evento será adicionado a aquele mesmo botão.
Isso não parece ser muito prático nem escalável, e foi com esse problema que eu decidi criar um wrapper para lidar com eventos no DOM chamado Provent.
Provent lida com eventos no DOM, mas com uma sintaxe parecida com a de promises, e com a mesma flexibilidade de encadear callbacks e mover a promise para qualquer lugar do seu código.
Então vamos ver como ficaria o primeiro exemplo de código, usando Provent:
Até ai tudo bem, um evento foi adicionado ao elemento correspondente a querySelector, mas nenhum callback é chamado, podemos fazer isso usando o famoso then.
Os valores dentro desse callback são os mesmos que o callback default de um addEventListener, o primeiro argumento aponta para o evento, e o this aponta para o elemento que foi clicado.
Até ai é a mesma coisa que usar addEventListener, mas temos algumas flexibilidades a mais:
Adicionamos mais um callback no mesmo evento de click, sem precisar adicionar mais um evento no elemento, legal né?!
Podemos encadear varios then, e passar o retorno de cada callback para o próximo da fila, assim:
E você também consegue cancelar esses callbacks a qualquer momento usando o método reject:
Executando o reject sem passar nenhum parâmetro, você cancela todos os callbacks que foram adicionados aos then, e também remove o eventListener do botão, prevenindo assim qualquer forma de memory leak indesejado.
O reject também pode ser usado passando um ID, no caso de você definir um callback do then usando o mesmo ID, da seguinte maneira:
Nesse ultimo exemplo, todos os callbacks menos o que contem o id 123 vai ser executado, e o evento no elemento também não será removido.
Resumindo.
Provent é uma lib que foi criada para facilitar a manipulação de eventos no DOM, diminuindo a complexidade de adicionar e remover callbacks a qualquer momento.
Você pode instalar o Provent usando _npm _ou bower:
A documentação está no repositório do Github: https://github.com/mauriciosoares/provent
Deixem seu feedback e sugestões.