Padrões em JS: Observer Pattern

Entendendo Observables ao criar um Observable!

Eduardo Rabelo
2 min readAug 26, 2017
Aquela foto vintage que não tem nada haver com o artigo.

O Observer Pattern é um padrão popular usado em todos os tipos de aplicativos em JavaScript. A instância (ou model) mantém uma coleção de objetos (observadores) e irá notifica-los de todas as mudanças no seu estado. Isso parece difícil para você? É, isso também me confundiu um pouco, principalmente quando eu encontrei esse padrão pela primeira vez. Um pequeno exemplo prático pode ajudar a entender o conceito.

Vamos imaginar que você precisa atualizar vários elementos simultaneamente quando ocorre algum evento (digitar dentro do campo de texto, etc.). Você precisa adicionar mais elementos (assinaturas, subscribers) que reagem (observam, observer) a uma alteração de um valor de entrada. A remoção de inscrições (cancelar a inscrição, unsubscribe) pode ser útil se você não precisa mais transmitir as alterações de estado para um objeto específico. Você consegue ter uma ideia melhor agora? Vamos ao código!

Um exemplo de caso de uso seria assim:

Com uma pequena ajuda de alguns botões (para tornar esse artigo mais interativo 😬), podemos fazer coisas legais como esse exemplo com apenas algumas linhas de código. Maneiro, né?

Esta é uma versão muito simplificada do Observer Pattern, que pode resolver seu problema ao invés de usar soluções como Vue ou React. Se você está procurando uma explicação detalhada sobre isso, de uma olhada nesse capítulo do clássico livro de Addy Osmani, “Learning JavaScript Patterns Design”. "Pub/Sub” também é usado para descrever esse padrão, embora, exista algumas pequenas diferenças entre eles, e o Addy nos explica tudo em seu livro.

Até a próxima pessoas curiosas :-)

Créditos

--

--