Abstract Factory Pattern

Question

Accepted Answer

The Abstract Factory pattern takes the Factory Method pattern a step further by creating entire families of related objects. It provides an interface for creating objects that are related to each other, without specifying their concrete implementations. This is ideal for scenarios like theme switching (light/dark mode UI components), cross-platform GUI toolkits (Windows/Mac buttons and scrollbars), or multi-database support where entire sets of objects need to be created consistently[citation:7]. // Abstract factory for vehicles class Car { constructor() { this.name = "Car"; this.wheels = 4; } turnOn = () => console.log("Chacabúm!!"); } class Truck { constructor() { this.name = "Truck"; this.wheels = 8; } turnOn = () => console.log("RRRRRRRRUUUUUUUUUMMMMMMMMMM!!"); } class Motorcycle { constructor() { this.name = "Motorcycle"; this.wheels = 2; } turnOn = () => console.log("sssssssssssssssssssssssssssssshhhhhhhhhhham!!"); } const vehicleFactory = { createVehicle: function (type) { const vehicles = { car: Car, truck: Truck, motorcycle: Motorcycle }; const VehicleClass = vehicles[type]; return VehicleClass ? new VehicleClass() : null; } }; const myCar = vehicleFactory.createVehicle("car"); myCar.turnOn(); // 'Chacabúm!!' // Abstract factory for theme-aware components const ThemeFactory = { light: { createButton: (text) => , createCard: (content) =>

{content}

, createInput: (props) => }, dark: { createButton: (text) => , createCard: (content) =>

{content}

, createInput: (props) => } }; function UIComponent({ theme, type, ...props }) { const factory = ThemeFactory[theme]; const Component = factory[type]; return Component ? Component(props.children || props) : null; } // Usage Click Me // Abstract factory for creating form controls interface FormControlFactory { createInput(): any; createSelect(): any; createCheckbox(): any; } class MaterialFormFactory implements FormControlFactory { createInput() { return new FormControl('', Validators.required); } createSelect() { return new FormControl(''); } createCheckbox() { return new FormControl(false); } } class BootstrapFormFactory implements FormControlFactory { createInput() { return new FormControl('', [Validators.required, Validators.minLength(3)]); } createSelect() { return new FormControl('default'); } createCheckbox() { return new FormControl(false); } } @Injectable({ providedIn: 'root' }) export class FormBuilderFactory { getFactory(style: 'material' | 'bootstrap'): FormControlFactory { return style === 'material' ? new MaterialFormFactory() : new BootstrapFormFactory(); } }

Abstract Factory Pattern

The Abstract Factory pattern provides an interface for creating families of related or dependent objects without specifying their concrete classes, useful for creating themed UI components or cross-platform toolkits.

Abstract Factory Pattern

The Abstract Factory pattern provides an interface for creating families of related or dependent objects without specifying their concrete classes, useful for creating themed UI components or cross-platform toolkits.

Scenario Questions

Follow-up Questions