Texto y documentos
Números y cálculo
Datos y formatos
Seguridad
Desarrollo y DevOps
Inteligencia Artificial
Finanzas
Salud y bienestar
Productividad
Juegos y entretenimiento
Multimedia y diseño
Empresa
Guía de uso
Verlo funcionar

Cada patrón es un programa pequeño que se ejecuta de verdad en tu navegador. Pulsa una acción y la tool registra cada llamada entre objetos: con eso dibuja el diagrama de secuencia (quién llama a quién, con qué, y qué devuelve) y el grafo de objetos (quién conoce a quién). El código que ves es exactamente el que corre: avanza paso a paso y se resalta el método de cada mensaje.

Fuentes

Gamma, Helm, Johnson y 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 y Template Method p. 325. Los ejemplos y los textos son nuestros. Cuándo conviene y cuándo no: en /practices.

Patrones de diseñoEstrategia, observador, orden… ejecutándose de verdad
Patrones de diseñoEstrategia, observador, orden… ejecutándose de verdad

Cada forma de calcular el envío vive en su propio objeto, intercambiable: Checkout no sabe cuál está usando, solo que tiene un cost().

Cambia de envío y calcula el total: en la traza, Checkout llama al cost() de otro objeto, sin un solo if.

Envío
StandardShipping

El código que se ejecuta

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 secuencia · al montar (setup)

Paso 5 de 5 tú → Checkout: «new» Checkout(StandardShipping)
túStandardShippingOrderExpressShippingStorePickupCheckout1. «new» StandardShipping()2. «new» Order(3)3. «new» ExpressShipping()4. «new» StorePickup()5. «new» Checkout(StandardShipping)

Quién conoce a quién

shippingStandardShippingOrderExpressShippingStorePickupCheckout