Padrões em JS: Observer Pattern

Entendendo Observables ao criar um Observable!

Eduardo Rabelo
Aug 26, 2017 · 2 min read
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

)
Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade