Text & Dokumente
Zahlen & Berechnung
Daten & Formate
Sicherheit
Entwicklung & DevOps
Künstliche Intelligenz
Finanzen
Gesundheit & Wohlbefinden
Produktivität
Spiele & Unterhaltung
Multimedia & Design
Unternehmen
Bedienungsanleitung
Es in Aktion sehen

Jedes Muster ist ein kleines Programm, das in deinem Browser wirklich ausgeführt wird. Klicke auf eine Aktion und das Tool protokolliert jeden Aufruf zwischen Objekten: Daraus zeichnet es das Sequenzdiagramm (wer wen womit aufruft und was zurückkommt) und den Objektgraphen (wer wen kennt). Der Code, den du siehst, ist genau der, der läuft: Geh Schritt für Schritt vor, und die Methode jeder Nachricht wird hervorgehoben.

Quellen

Gamma, Helm, Johnson und Vlissides, Design Patterns (1994): Builder S. 97, Factory Method S. 107, Singleton S. 127, Adapter S. 139, Composite S. 163, Decorator S. 175, Facade S. 185, Proxy S. 207, Chain of Responsibility S. 223, Command S. 233, Iterator S. 257, Mediator S. 273, Observer S. 293, State S. 305, Strategy S. 315 und Template Method S. 325. Die Beispiele und die Texte sind von uns. Wann es sinnvoll ist und wann nicht: unter /practices.

EntwurfsmusterStrategie, Beobachter, Befehl… wirklich in Aktion
EntwurfsmusterStrategy, Observer, Command… wirklich in Aktion

Jede Art, den Versand zu berechnen, lebt in einem eigenen, austauschbaren Objekt: Checkout weiß nicht, welches es gerade benutzt, nur dass es ein cost() hat.

Wechsle die Versandart und berechne die Summe: In der Ablaufspur ruft Checkout das cost() eines anderen Objekts auf, ohne ein einziges if.

Versand
StandardShipping

Der Code, der ausgeführt wird

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

Sequenzdiagramm · beim Einrichten (setup)

Schritt 5 von 5 du → Checkout: «new» Checkout(StandardShipping)
duStandardShippingOrderExpressShippingStorePickupCheckout1. «new» StandardShipping()2. «new» Order(3)3. «new» ExpressShipping()4. «new» StorePickup()5. «new» Checkout(StandardShipping)

Wer kennt wen

shippingStandardShippingOrderExpressShippingStorePickupCheckout