Mediator Pattern in JS — Centralized Event Bus

In this tutorial, you'll learn how the Mediator pattern creates a central event bus for decoupled communication between JS components.

What You'll Learn

how the Mediator pattern creates a central event bus for decoupled communication between JS components.

Why It Matters

Direct component-to-component communication creates tight coupling. Mediator decouples them.

Real-World Use

EventEmitter2, Backbone Events, Vue event bus, and Redux middleware.

The Mediator in JS Pattern

The Mediator in JS pattern addresses a specific recurring design problem by providing a reusable solution structure. Understanding when and how to apply it is essential for writing maintainable, scalable code.

Key Concepts

• Abstraction: Mediator in JS provides clean separation between interface and implementation.
• Reusability: Pattern can be applied across different contexts.
• Maintainability: Code organized with Mediator in JS is easier to understand.
• Testability: Components can be tested in isolation.

Structure

The following diagram shows the structure of this pattern:

classDiagram
    class MediatorinJS {
        +operation()
    }
    class Implementation {
        +execute()
    }
    MediatorinJS --> Implementation

Implementation

// Mediator in JS - JavaScript Module Pattern
const MediatorinJS = (function() {
    let _counter = 0;
    const _items = new Map();

    function _validate(key) {
        return typeof key === 'string' && key.length > 0;
    }

    return {
        add(key, value) {
            if (_validate(key)) {
                _items.set(key, value);
                _counter++;
                return true;
            }
            return false;
        },
        get(key) {
            return _items.get(key);
        },
        count() {
            return _counter;
        },
        clear() {
            _items.clear();
            _counter = 0;
        }
    };
})();

console.log(MediatorinJS.add('name', 'Alice'));
console.log(MediatorinJS.add('', 'bad'));
console.log(MediatorinJS.get('name'));
console.log(MediatorinJS.count());
MediatorinJS.clear();
console.log(MediatorinJS.count());

Expected output:

true
false
Alice
1
0

Key Participants

• Client: Code that uses the Mediator in JS.
• Mediator in JS: The main abstraction provided by the pattern.
• Implementation: Concrete realization of the pattern.
• Data/State: Information managed by the pattern.

Real-World Examples

• DodaTech uses this pattern internally for consistent cross-cutting concerns.
• Major frameworks and libraries implement this pattern as a core architectural element.
• Production systems at scale depend on this pattern for reliability.

Related Patterns

• Observer

• Mediator

• Event Emitter

• Design Patterns — the complete patterns catalog.

Pros and Cons

Common Mistakes

1. **Over-engineering: Applying Mediator in JS where a simpler solution suffices, adding unnecessary complexity.

2. **Wrong granularity: Implementing Mediator in JS at the wrong level of abstraction.

3. **Thread Safety ignored: Using Mediator in JS in concurrent context without proper synchronization.

4. **Tight coupling: Violating the pattern intent by creating hidden dependencies.

5. **Premature optimization: Introducing Mediator in JS before there is evidence it is needed.

Practice Questions

1. What problem does the Mediator in JS pattern solve? Describe a real-world scenario where using it improves code quality.

2. How does Mediator in JS differ from alternative approaches? What are the trade-offs?

3. What testing Strategy would you use for code that implements Mediator in JS?

4. How would you refactor legacy code to introduce Mediator in JS?

5. When should you NOT use Mediator in JS? Describe scenarios where it adds unnecessary complexity.

Challenge

Implement a complete Mediator in JS example in Python with unit tests. Include error handling, edge cases (empty data, null values, concurrent access), and a performance comparison against a simpler alternative. Document your design decisions.

Real-World Task

Find a section of code in your current project that could benefit from the Mediator in JS pattern. Refactor it, write tests, and measure the improvement in testability, coupling, and cohesion.

Security Tip: When implementing Mediator in JS, ensure proper input validation, avoid exposing internal state, and follow Least Privilege. At DodaTech, all implementations undergo security review.

Built by the developers of Doda Browser, DodaZIP, and Durga Antivirus Pro.