Texte & documents
Nombres & calcul
Données & formats
Sécurité
Développement & DevOps
Intelligence artificielle
Finances
Santé et bien-être
Productivité
Jeux et divertissement
Multimédia & design
Entreprise
Guide d'utilisation
Le voir fonctionner

Chaque patron est un petit programme qui s'exécute vraiment dans ton navigateur. Clique sur une action et la tool enregistre chaque appel entre objets : elle en tire le diagramme de séquence (qui appelle qui, avec quoi, et ce qui est renvoyé) et le graphe d'objets (qui connaît qui). Le code que tu vois est exactement celui qui s'exécute : avance pas à pas et la méthode de chaque message est mise en évidence.

Sources

Gamma, Helm, Johnson et 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 et Template Method p. 325. Les exemples et les textes sont de nous. Quand c'est pertinent et quand ça ne l'est pas : dans /practices.

Patrons de conceptionStratégie, observateur, commande… en exécution réelle
Patrons de conceptionStratégie, observateur, commande… en vrai fonctionnement

Chaque façon de calculer l'expédition vit dans son propre objet, interchangeable : Checkout ne sait pas lequel il utilise, seulement qu'il a un cost().

Change le mode d'envoi et calcule le total : dans la trace, Checkout appelle le cost() d'un autre objet, sans un seul if.

Livraison
StandardShipping

Le code qui s'exécute

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),
};

Diagramme de séquence · au montage (setup)

Étape 5 sur 5 toi → Checkout: «new» Checkout(StandardShipping)
toiStandardShippingOrderExpressShippingStorePickupCheckout1. «new» StandardShipping()2. «new» Order(3)3. «new» ExpressShipping()4. «new» StorePickup()5. «new» Checkout(StandardShipping)

Qui connaît qui

shippingStandardShippingOrderExpressShippingStorePickupCheckout