Tableless

Busca Menu

Provent – Promises e Eventos… combinados.

Seja o primeiro a comentar por

Hoje, quando não estamos usando jQuery para lidar com eventos no DOM, nós presenciamos muito este trecho de código:

document.querySelector('a').addEventListener('click', function() {
// amazing stuff
});

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:

document.querySelector('a').addEventListener('click', function() {
  if(condition) {
    doSomething();
  } else {
    doSomethingElse();
  }

  // code
});

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:

var linkClick = Provent(document.querySelector('a'), 'click');

Até ai tudo bem, um evento foi adicionado ao elemento correspondente a querySelector, mas nenhum callback é chamado, podemos fazer isso usando o famoso then.

linkClick.then(function(event) {
  console.log(this);
  console.log(event);
});

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:

linkClick.then(function(event) {
  // some code
});

linkClick.then(function(event) {
  // more code here
});

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:

linkClick.then(function(param) {
  console.log(param); // event
  return true
}).then(function(param) {
  console.log(param); // true
  return {};
}).then(function(param) {
  console.log(param); // {}
});

E você também consegue cancelar esses callbacks a qualquer momento usando o método reject:

linkClick.then(function(param) {
  console.log(param); // event
  return true
});

linkClick.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:

linkClick.then(function(param) {
  // code
}).then('123', function(param) { // essa linha mudou
  // code
}).then(function(param) {
  // code
});

linkClick.reject('123');

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:

npm install provent
bower install provent

A documentação está no repositório do Github: http://github.com/mauriciosoares/provent

Deixem seu feedback e sugestões.

Publicado no dia