Skip to content

Mediator Design Pattern

Video Lecture

Section Video Links
Mediator Pattern Mediator Mediator Pattern 
Mediator Use Case Mediator Use Case Mediator Use Case 

Overview

...Refer to Book or Videos for extra content.

Terminology

...Refer to Book or Videos for extra content.

Mediator UML Diagram

Mediator Pattern UML Diagram

Source Code

...Refer to Book or Videos for extra content.

./src/mediator/mediator-concept.ts

// Mediator Concept Sample Code

class Mediator {
    // The Mediator Concrete Class
    colleague1: Colleague1
    colleague2: Colleague2

    constructor() {
        this.colleague1 = new Colleague1()
        this.colleague2 = new Colleague2()
    }

    colleague1Method() {
        // Calls the method provided by Colleague1
        return this.colleague1.method1()
    }

    colleague2Method() {
        // Calls the method provided by Colleague2
        return this.colleague2.method2()
    }
}

class Colleague1 {
    // This Colleague provides data for Colleague2

    method1() {
        return 'Here is the Colleague1 specific data you asked for'
    }
}

class Colleague2 {
    // This Colleague provides data for Colleague1

    method2() {
        return 'Here is the Colleague2 specific data you asked for'
    }
}

// The Client
const MEDIATOR = new Mediator()

// Colleague1 wants some data from Colleague2
let DATA = MEDIATOR.colleague2Method()
console.log(`COLLEAGUE1 <--> ${DATA}`)

// Colleague2 wants some data from Colleague1
DATA = MEDIATOR.colleague1Method()
console.log(`COLLEAGUE2 <--> ${DATA}`)

Output

node ./dist/mediator/mediator-concept.js
COLLEAGUE1 <--> Here is the Colleague2 specific data you asked for
COLLEAGUE2 <--> Here is the Colleague1 specific data you asked for

Mediator Use Case

...Refer to Book or Videos for extra content.

Example UML Diagram

Mediator Pattern UML Diagram

Source Code

./src/mediator/client.ts

// The Mediator Use Case Example

import Component from './component'
import Mediator from './mediator'

const MEDIATOR = new Mediator()
const COMPONENT1 = new Component(MEDIATOR, 'Component1')
const COMPONENT2 = new Component(MEDIATOR, 'Component2')
const COMPONENT3 = new Component(MEDIATOR, 'Component3')

MEDIATOR.add(COMPONENT1)
MEDIATOR.add(COMPONENT2)
MEDIATOR.add(COMPONENT3)

COMPONENT1.notify('data A')
COMPONENT2.notify('data B')
COMPONENT3.notify('data C')

./src/mediator/component.ts

// Each component stays synchronized through a mediator

import IComponent from './icomponent'
import Mediator from './mediator'

export default class Component implements IComponent {
    #mediator: Mediator
    #name: string

    constructor(mediator: Mediator, name: string) {
        this.#mediator = mediator
        this.#name = name
    }

    notify(message: string): void {
        console.log(this.#name + ': >>> Out >>> : ' + message)
        this.#mediator.notify(message, this)
    }

    receive(message: string): void {
        console.log(this.#name + ': <<< In <<< : ' + message)
    }
}

./src/mediator/icomponent.ts

// An interface that each component should implement

export default interface IComponent {
    notify(message: string): void

    receive(message: string): void
}

./src/mediator/mediator.ts

// The Subject that all components will stay synchronized with

import IComponent from './icomponent'

export default class Mediator {
    // A Subject whose notify method is mediated
    #components: Set<IComponent>

    constructor() {
        this.#components = new Set()
    }

    add(component: IComponent): void {
        // Add components
        this.#components.add(component)
    }

    notify(message: string, originator: IComponent): void {
        // Add components except for the originator component
        this.#components.forEach((component) => {
            if (component !== originator) {
                component.receive(message)
            }
        })
    }
}

Output

node ./dist/mediator/client.js
Component1: >>> Out >>> : data A
Component2: <<< In <<< : data A
Component3: <<< In <<< : data A
Component2: >>> Out >>> : data B
Component1: <<< In <<< : data B
Component3: <<< In <<< : data B
Component3: >>> Out >>> : data C
Component1: <<< In <<< : data C
Component2: <<< In <<< : data C

Summary

...Refer to Book or Videos for extra content.