Factory Method Pattern in JavaScript: Implementation Guide

5.3.3 Implementing Factory Method in JavaScript

In this section, we will delve into the implementation of the Factory Method pattern using JavaScript, particularly leveraging ES6 classes. This approach will help us create flexible and maintainable code by abstracting the instantiation of objects. The Factory Method pattern is a creational design pattern that provides an interface for creating objects in a superclass but allows subclasses to alter the type of objects that will be created.

Understanding the Factory Method Pattern

Before we jump into the implementation, let’s revisit the core concepts of the Factory Method pattern:

• Creator (Abstract Class): Declares the factory method, which returns an object of type Product. The Creator may also define a default implementation of the factory method that returns a default ConcreteProduct object.

• Concrete Creators (Subclasses): Override the factory method to return an instance of a ConcreteProduct.

• Product (Interface/Abstract Class): Declares the interface for objects the factory method creates.

• Concrete Products: Implement the Product interface.

The Factory Method pattern is particularly useful when dealing with frameworks or libraries where the exact types of objects to be created are not known until runtime.

JavaScript and the Factory Method Pattern

JavaScript, with its prototypal inheritance and ES6 class syntax, provides a robust environment for implementing design patterns. The use of classes and inheritance in JavaScript allows us to define a clear structure for our Factory Method pattern.

Implementation Steps

Let’s implement the Factory Method pattern in JavaScript using a dialog and button scenario. We’ll define a Dialog class as the Creator and WindowsDialog and MacOSDialog as Concrete Creators. The Button class will serve as the Product interface, with WindowsButton and MacOSButton as Concrete Products.

Step 1: Define the Creator and Concrete Creators

The Creator class declares the factory method that returns a product object. In our example, the Dialog class is the Creator, and it has a method createButton that subclasses will implement.

class Dialog {
    createButton() {
        // Abstract method
        throw new Error('Method createButton() must be implemented.');
    }

    render() {
        const button = this.createButton();
        button.onClick(this.closeDialog.bind(this));
        button.render();
    }

    closeDialog() {
        console.log('Dialog closed.');
    }
}

class WindowsDialog extends Dialog {
    createButton() {
        return new WindowsButton();
    }
}

class MacOSDialog extends Dialog {
    createButton() {
        return new MacOSButton();
    }
}

Explanation:

• Dialog Class: Acts as the abstract Creator. It defines the createButton method, which is meant to be overridden by subclasses. The render method uses the factory method to create a button and then calls its render and onClick methods.

• WindowsDialog and MacOSDialog: These are Concrete Creators that implement the createButton method to return specific button types (WindowsButton and MacOSButton).

Step 2: Define the Product and Concrete Products

The Product interface defines the operations that all concrete products must implement. Here, Button is the Product interface.

class Button {
    render() {
        // Abstract method
        throw new Error('Method render() must be implemented.');
    }

    onClick(action) {
        // Abstract method
        throw new Error('Method onClick() must be implemented.');
    }
}

class WindowsButton extends Button {
    render() {
        console.log('Render a button in Windows style');
    }

    onClick(action) {
        console.log('Bind a Windows click event');
        action();
    }
}

class MacOSButton extends Button {
    render() {
        console.log('Render a button in macOS style');
    }

    onClick(action) {
        console.log('Bind a macOS click event');
        action();
    }
}

Explanation:

• Button Class: Serves as the abstract Product. It declares the render and onClick methods, which must be implemented by concrete products.

• WindowsButton and MacOSButton: These are Concrete Products that implement the render and onClick methods to perform actions specific to their styles.

Step 3: Implement the Client Code

The client code works with an instance of a Concrete Creator, but through its base interface. This allows the client to remain independent of the concrete classes that it instantiates.

function main(osType) {
    let dialog;
    if (osType === 'Windows') {
        dialog = new WindowsDialog();
    } else if (osType === 'macOS') {
        dialog = new MacOSDialog();
    } else {
        throw new Error('Unknown OS type');
    }
    dialog.render();
}

main('Windows');

Explanation:

• Client Code: The main function acts as the client. It decides which dialog to instantiate based on the operating system type. The client code uses the Dialog interface to call the render method, which internally uses the factory method to create buttons.

Best Practices and Considerations

• Handling Abstract Methods: In JavaScript, abstract methods can be simulated by throwing errors in the base class methods. This ensures that subclasses must implement these methods.

• Use of Inheritance: Proper use of inheritance helps maintain code clarity and extensibility. Each Concrete Creator and Product should extend their respective base classes.

• Flexibility and Maintainability: By abstracting the object creation process, we achieve flexibility and maintainability. The client code can work with different dialogs without knowing the specifics of the buttons.

Visual Representation

To better understand the structure of the Factory Method pattern in this example, let’s visualize it using a class diagram.

    classDiagram
	    class Dialog {
	        +createButton() Button
	        +render() void
	        +closeDialog() void
	    }
	    class WindowsDialog {
	        +createButton() WindowsButton
	    }
	    class MacOSDialog {
	        +createButton() MacOSButton
	    }
	    class Button {
	        +render() void
	        +onClick(action) void
	    }
	    class WindowsButton {
	        +render() void
	        +onClick(action) void
	    }
	    class MacOSButton {
	        +render() void
	        +onClick(action) void
	    }
	    Dialog <|-- WindowsDialog
	    Dialog <|-- MacOSDialog
	    Button <|-- WindowsButton
	    Button <|-- MacOSButton

Key Points to Emphasize

• JavaScript’s Support for Design Patterns: JavaScript’s prototypal inheritance and class syntax provide a solid foundation for implementing design patterns like the Factory Method.

• Abstracting Object Creation: The Factory Method pattern is essential for abstracting the creation of objects, which leads to more flexible and maintainable code.

• Code Reusability and Extensibility: By using interfaces and abstract classes, we ensure that our code is reusable and extensible.

Conclusion

The Factory Method pattern is a powerful tool in the software design arsenal, allowing developers to create flexible and maintainable code by abstracting the instantiation process. By implementing this pattern in JavaScript, we leverage the language’s strengths to build applications that are both robust and adaptable to change.

Further Reading and Resources

For those interested in exploring more about design patterns and their implementations in JavaScript, consider the following resources:

• MDN Web Docs: Classes
• JavaScript Design Patterns
• Refactoring Guru: Factory Method

These resources provide a deeper dive into JavaScript’s capabilities and how design patterns can be effectively utilized in modern software development.

Quiz Time!