Pular para o conteúdo
thiagoetipadrões

Contatos

apps/service-design/mediator-pattern

166 · Padrões de Design de Serviço · ≈ 5 min de estudo

Mediator

Componentes que reagem uns aos outros passam a falar só com um mediador: cada um avisa a própria mudança e o mediador decide o efeito nos demais. A malha de referências cruzadas vira uma estrela, e cada componente continua reutilizável em outra tela. Use em formulários e painéis com campos interdependentes.

passos
6
arquivos
3
testes
0
tecnologias
3
Lógica puraTypeScriptBunStryker
CenárioRelaçõesComparar
Baixar cartão

Cenário

O cliente monta uma ordem de câmbio: escolhe o par de moedas e digita o valor. Trocar o par busca a cotação; qualquer mudança recalcula o total em reais e decide se o botão de confirmar fica habilitado — par sem cotação, valor zero ou total acima de R$ 100.000,00 (que exige aprovação de compliance) bloqueiam.

Planta

Fluxo
5/5
FieldCurrencyPairMediatorExchangeOrderFieldAmountDisplayQuoteButtonConfirmTabela de cotacoespair.changedamount.changedcotacao e total em reaishabilita ou bloqueialida pelo mediador
5

5 passos — reproduza para seguir o fluxo

Como funciona

6 passos

Componentes falam por um mediador.

Esconde cada passo: lembre antes de tocar para revelar.

  1. 01

    FieldCurrencyPair e FieldAmount guardam o próprio valor e chamam mediator.notify(this, evento) — não conhecem nenhum outro componente

  2. 02

    MediatorExchangeOrder é o único que conhece a reação em cadeia: cotação → total em reais → estado do botão

  3. 03

    Cotações com quatro casas como inteiros (5,4321 → 54321) e valores em centavos; o total é arredondado ao centavo

  4. 04

    O botão só habilita com par cotado, valor positivo e total até o limite de compliance, inclusive

  5. 05

    A tabela de cotações é injetada no mediador (em produção, o feed de câmbio)

  6. 06

    O mesmo FieldAmount funciona em outra tela com outro mediador, sem mudança

Trade-offs

O que se ganha, o que se paga

4 vantagenscada ganho tem um preço4 custos

Vantagens

  • Componentes sem referência uns aos outros

  • Componente reutilizável com outro mediador

  • Reação em cadeia legível num lugar só

  • Componente novo muda só o mediador

Custos

  • O mediador concentra a lógica de interação

  • Mediador de muitos componentes vira classe-deus — divida a tela

  • Uma indireção a mais para seguir um evento

  • Não serve para fluxo de negócio com estado persistido

apps/service-design/mediator-pattern

3 arquivos

src/

  • component_order.tsContrato do mediador e os componentes do formulário
  • mediator_exchange_order.tsO mediador: cotação, total e regra de confirmação
  • demo.tsdemoPreenchimento da ordem passo a passo

Executar · só Bun

  1. bun install# dependências
  2. bun run demo# roda o cenário
  3. bun run test# testes unitários
  4. bun run test:mutation# mutação com Stryker
Requisitos
Bun

Relações

Onde ele se encaixa

Mapa
  1. Mediator Pattern
  • Combina com2
  • Alternativa a1

Por que se relacionam

Combina com

Alternativa a

Teste rápido

Qual destes combina com Mediator Pattern?

Próximo projeto · Padrões de Design de ServiçoComposite
Esc

↑ ↓ navegarEnter abrir191 resultados