Model-View-Controller (MVC) is itself a combination of several patterns working together. ### Patterns in MVC **Observer Pattern**: View observes Model for changes **Strategy Pattern**: Controller acts as strategy for handling input **Composite Pattern**: Views often form composite structures ### Logistics Platform MVC Example ```typescript // MODEL: Observable subject class ShipmentModel { private observers: Set = new Set(); private shipments: Map = new Map(); attach(observer: ShipmentObserver): void { this.observers.add(observer); } addShipment(shipment: Shipment): void { this.shipments.set(shipment.id, shipment); this.notifyObservers(); } updateShipmentStatus(id: string, status: ShipmentStatus): void { const shipment = this.shipments.get(id); if (shipment) { shipment.status = status; this.notifyObservers(); } } private notifyObservers(): void { const shipmentList = Array.from(this.shipments.values()); this.observers.forEach(observer => observer.update(shipmentList)); } } // VIEW: Observer that renders UI class ShipmentTableView implements ShipmentObserver { constructor(private container: HTMLElement) {} update(shipments: Shipment[]): void { this.render(shipments); } private render(shipments: Shipment[]): void { this.container.innerHTML = ` ${shipments.map(s => ` `).join('')}

ID	Origin	Destination	Status
${s.id}	${s.origin}	${s.destination}	${s.status}

`; } } // CONTROLLER: Strategy for handling user actions interface ShipmentController { handleCreateShipment(data: CreateShipmentData): void; handleUpdateStatus(id: string, status: ShipmentStatus): void; } class DefaultShipmentController implements ShipmentController { constructor(private model: ShipmentModel) {} handleCreateShipment(data: CreateShipmentData): void { // Validate and create shipment const shipment = this.createShipmentFromData(data); this.model.addShipment(shipment); } handleUpdateStatus(id: string, status: ShipmentStatus): void { this.model.updateShipmentStatus(id, status); } private createShipmentFromData(data: CreateShipmentData): Shipment { // Business logic for creating shipment return { id: this.generateId(), ...data, status: 'pending' }; } private generateId(): string { return `SHP-${Date.now()}`; } } // Wire everything together const model = new ShipmentModel(); const view = new ShipmentTableView(document.getElementById('shipments')!); const controller = new DefaultShipmentController(model); model.attach(view); ``` **Why This Combination Works**: - **Separation of concerns**: Model, View, and Controller have distinct responsibilities - **Loose coupling**: View doesn't depend on Controller; Model doesn't depend on View - **Flexibility**: Can swap views without changing model or controller - **Testability**: Each component can be tested independently

Common Pattern Combinations

Common Pattern Combinations

1. MVC: The Classic Pattern Combination