Example of Abstract Method in JavaScript Design Patterns

Advantages of the Abstract Factory Pattern

Imagine, we’re building a UI component library that supports multiple themes (e.g., light and dark themes). We want to create sets of UI components like buttons, input fields, and tooltips for each theme.

Below is the implementation of the above example:

Javascript

// Abstract factory for creating UI components
class UIFactory {
  createButton() {}
  createInputField() {}
  createTooltip() {}
}
 
// Concrete factory for light theme components
class LightThemeFactory extends UIFactory {
  createButton() {
    return new LightThemeButton();
  }
  createInputField() {
    return new LightThemeInputField();
  }
  createTooltip() {
    return new LightThemeTooltip();
  }
}
 
// Concrete factory for dark theme components
class DarkThemeFactory extends UIFactory {
  createButton() {
    return new DarkThemeButton();
  }
  createInputField() {
    return new DarkThemeInputField();
  }
  createTooltip() {
    return new DarkThemeTooltip();
  }
}
 
// Abstract product for buttons
class Button {}
 
// Concrete product for light theme buttons
class LightThemeButton extends Button {
  constructor() {
    super();
    console.log('Light theme button created');
  }
}
 
// Concrete product for dark theme buttons
class DarkThemeButton extends Button {
  constructor() {
    super();
    console.log('Dark theme button created');
  }
}
 
// Usage
const lightFactory = new LightThemeFactory();
const lightButton = lightFactory.createButton(); // Output: Light theme button created
 
const darkFactory = new DarkThemeFactory();
const darkButton = darkFactory.createButton(); // Output: Dark theme button created

Output

Light theme button created
Dark theme button created

Key components of Abstract factory Pattern

Abstract Factory: This is an interface or an abstract class that declares a set of factory methods for creating a family of related objects.
Concrete Factory: These are the implementations of the abstract factory interface. Each concrete factory is responsible for creating a specific family of related objects.
Abstract Products: These are interfaces or abstract classes that declare the common set of methods for the objects within a family.
Concrete Products: These are the actual implementations of the abstract products. Each concrete product is specific to a particular family and is created by a corresponding concrete factory.
Client: The client code interacts with the abstract factory and abstract product interfaces.

Step wise Code understanding by taking Key Component

Abstarct Factory: Implement an abstract factory, UIFactory, that defines the blueprint for creating UI components.

Javascript

// Abstract factory for creating UI components
class UIFactory {
  createButton() {}
  createInputField() {}
  createTooltip() {}
}

Concrete Factory: Create concrete factories for different themes: LightThemeFactory and DarkThemeFactory, each inheriting from the UIFactory.

Javascript

// Concrete factory for light theme components
class LightThemeFactory extends UIFactory {
  createButton() {
    return new LightThemeButton();
  }
  createInputField() {
    return new LightThemeInputField();
  }
  createTooltip() {
    return new LightThemeTooltip();
  }
}

Javascript

//Concrete factory for dark theme components
class DarkThemeFactory extends UIFactory {
  createButton() {
    return new DarkThemeButton();
  }
  createInputField() {
    return new DarkThemeInputField();
  }
  createTooltip() {
    return new DarkThemeTooltip();
  }
}

Abstract Product: Define abstract product classes for various UI components, such as Button.

Javascript

// Abstract product for buttons
class Button {}

Concrete Product: Create concrete product classes, such as LightThemeButton and DarkThemeButton, that inherit from the abstract product classes.

Javascript

// Concrete product for light theme buttons
class LightThemeButton extends Button {
  constructor() {
    super();
    console.log('Light theme button created');
  }
}

Javascript

// Concrete product for dark theme buttons
class DarkThemeButton extends Button {
  constructor() {
    super();
    console.log('Dark theme button created');
  }
}

When a UI component is created, it should log a message indicating which theme it belongs to. For example, a button created by the light theme factory should display “Light theme button created.”

Abstract Factory Pattern allows us to create entire families of related objects that are compatible with each other. The client code remains unaware of the specific implementations.

Abstract Factory Pattern | JavaScript Design Patterns

Abstract Factory Pattern is to abstract the process of object creation by defining a family of related factory methods, each responsible for creating a different type of object. These factory methods are organized within an abstract factory interface or class, and the client code uses this interface to create objects.

Important Topics for the Abstract Factory Pattern in JavaScript Design Patterns

Example of Abstract Method in JavaScript Design Patterns
Advantages of the Abstract Factory Pattern
Disadvantages of the Abstract Factory Pattern
Conclusion

Tags:

Advantages of the Abstract Factory Pattern

Example of Abstract Method in JavaScript Design Patterns

Javascript

Key components of Abstract factory Pattern

Step wise Code understanding by taking Key Component

Javascript

Javascript

Javascript

Javascript

Javascript

Javascript

Abstract Factory Pattern | JavaScript Design Patterns

Similar Reads

Contact Us