167 - Mediator pattern (Javascript)

Design Patterns in JavaScript – Mediator Pattern

The Mediator pattern is a behavioral design pattern in JavaScript that promotes loose coupling by centralizing communication between objects. It simplifies complex communication flows and enhances the maintainability of the codebase. In this guide, we’ll delve into the Mediator pattern, its use cases, and how to implement it in JavaScript.

Understanding the Mediator Pattern

The Mediator pattern aims to reduce the direct connections between individual components by introducing a central mediator. This mediator handles communication between objects, acting as a hub for all interactions. Key components of the Mediator pattern include:

Mediator: The central component that coordinates communication between objects.
Colleague: Objects that communicate with each other through the Mediator instead of direct connections.

The Mediator pattern simplifies complex systems by reducing dependencies and making it easier to maintain and extend the code. It’s particularly useful in scenarios where multiple objects need to collaborate or when you want to avoid tight coupling between components.

Advantages of the Mediator Pattern

Using the Mediator pattern in your JavaScript code offers several advantages:

Decoupling: It reduces direct dependencies between objects, enhancing code flexibility and maintainability.
Centralized Control: Communication logic is centralized in the Mediator, making it easier to manage and update.
Reusability: Mediators can be reused to facilitate communication between different sets of objects.
Scalability: The Mediator pattern scales well for systems with multiple interacting components.

Implementing the Mediator Pattern in JavaScript

Let’s see how to implement a basic Mediator pattern in JavaScript:

Example of the Mediator Pattern


// Mediator
class ChatMediator {
  constructor() {
    this.colleagues = [];
  }

  register(colleague) {
    this.colleagues.push(colleague);
    colleague.setMediator(this);
  }

  sendMessage(sender, message) {
    this.colleagues.forEach((colleague) => {
      if (colleague !== sender) {
        colleague.receiveMessage(message);
      }
    });
  }
}

// Colleague
class User {
  constructor(name) {
    this.name = name;
    this.mediator = null;
  }

  setMediator(mediator) {
    this.mediator = mediator;
  }

  send(message) {
    this.mediator.sendMessage(this, message);
  }

  receiveMessage(message) {
    console.log(`${this.name} received: ${message}`);
  }
}

// Usage
const mediator = new ChatMediator();

const user1 = new User('Alice');
const user2 = new User('Bob');

mediator.register(user1);
mediator.register(user2);

user1.send('Hello, Bob!');
user2.send('Hi, Alice!');

In this example, we have a `ChatMediator` that centralizes communication between `User` objects. The `User` objects don’t directly communicate with each other but use the mediator to send and receive messages.

Use Cases for the Mediator Pattern

The Mediator pattern is valuable in various scenarios, including:

Chat Applications: Managing real-time chat systems with multiple users.
GUI Components: Simplifying interactions between various UI elements.
Air Traffic Control Systems: Coordinating communications between aircraft and air traffic controllers.

Potential Drawbacks

While the Mediator pattern encourages decoupling, overusing it can lead to overly complex mediator objects and potentially introduce a single point of failure in the system. It’s crucial to strike the right balance and apply the pattern judiciously.

Conclusion

The Mediator pattern is a valuable tool for reducing direct dependencies between objects in your JavaScript applications. By introducing a central mediator, you can simplify communication flows, improve maintainability, and promote code flexibility. When used appropriately, the Mediator pattern can lead to more modular and scalable software designs.

167 – Mediator pattern (Javascript)