Texto e documentos
Números e cálculo
Dados e formatos
Segurança
Desenvolvimento e DevOps
Inteligência Artificial
Finanças
Saúde & Bem-estar
Produtividade
Jogos & Entretenimento
Multimédia e design
Empresa
Guia de utilização
Vê-lo a funcionar

Cada padrão é um programa pequeno que se executa de verdade no teu navegador. Carrega numa ação e a tool regista cada chamada entre objetos: com isso desenha o diagrama de sequência (quem chama quem, com quê, e o que devolve) e o grafo de objetos (quem conhece quem). O código que vês é exatamente o que corre: avança passo a passo e o método de cada mensagem fica realçado.

Fontes

Gamma, Helm, Johnson e Vlissides, Design Patterns (1994): Builder p. 97, Factory Method p. 107, Singleton p. 127, Adapter p. 139, Composite p. 163, Decorator p. 175, Facade p. 185, Proxy p. 207, Chain of Responsibility p. 223, Command p. 233, Iterator p. 257, Mediator p. 273, Observer p. 293, State p. 305, Strategy p. 315 e Template Method p. 325. Os exemplos e os textos são nossos. Quando convém e quando não: em /practices.

Padrões de designEstratégia, observador, comando… a executar-se de verdade
Padrões de designEstratégia, observador, comando… a executar a sério

Cada forma de calcular o envio vive no seu próprio objeto, intercambiável: o Checkout não sabe qual está a usar, só que tem um cost().

Muda o envio e calcula o total: no rasto, o Checkout chama o cost() de outro objeto, sem um único if.

Envio
StandardShipping

O código que é executado

class StandardShipping {
cost(order) {
return order.weight <= 2 ? 4.99 : 4.99 + (order.weight - 2) * 1.5;
}
}
class ExpressShipping {
cost(order) {
return 9.99 + order.weight * 2;
}
}
class StorePickup {
cost(order) {
return 0;
}
}
class Order {
constructor(weight) {
this.weight = weight;
}
}
class Checkout {
constructor(shipping) {
this.shipping = shipping;
}
setShipping(shipping) {
this.shipping = shipping;
}
total(order, subtotal) {
return subtotal + this.shipping.cost(order);
}
}
function setup() {
const standard = new StandardShipping();
return {
order: new Order(3),
standard,
express: new ExpressShipping(),
pickup: new StorePickup(),
checkout: new Checkout(standard),
};
}
const actions = {
total: (w) => w.checkout.total(w.order, 30),
useStandard: (w) => w.checkout.setShipping(w.standard),
useExpress: (w) => w.checkout.setShipping(w.express),
usePickup: (w) => w.checkout.setShipping(w.pickup),
};

Diagrama de sequência · ao montar (setup)

Passo 5 de 5 tu → Checkout: «new» Checkout(StandardShipping)
tuStandardShippingOrderExpressShippingStorePickupCheckout1. «new» StandardShipping()2. «new» Order(3)3. «new» ExpressShipping()4. «new» StorePickup()5. «new» Checkout(StandardShipping)

Quem conhece quem

shippingStandardShippingOrderExpressShippingStorePickupCheckout