Design Patterns

Typescript implementation of design patterns:

- Singleton
- Channel
- Subscriber
- EventHandler

Class Diagram

The diagram below shows the relation between the different classes and interfaces.

!Event Handler

plantuml

@startuml

skin rose

title Event Handler

class Singleton {

- private static instance: object;
- protected constructor() {}

* public static getInstance = () => object;
}

interface IChannel <> { + name: string; + subscribers: ISubscriber[]; + subscribe: (sub: ISubscriber) => void; + unsubscribe: (sub: ISubscriber) => void; + notify: (msg: MessageType) => Promise>[]>;
}

interface IEventHandler <> {

- channels: Array>;
- createChannel: (name: string) => void;
- getChannel: (name: string) => IChannel | undefined;
- getChannels: () => Array>;
- subscribe: (chName: string, o: ISubscriber) => void;
- unsubscribe: (chName: string, o: ISubscriber) => void;
- notify: (chName: string, msg: MessageType) => Promise>[]>;
}

interface ISubscriber <> {

- readonly id: string;
- update: SubscriberCallback;
- cb: SubscriberCallback;
}

IChannel _-- ISubscriber
IEventHandler _-- Singleton
IEventHandler \*-- IChannel

@enduml

Usage

$3

To get a reference to the Singleton Event Handler, we can use the static getInstance() class method:

``
const eventHandler = EventHandler.getInstance();
`

Indeed, the constructor is declared protected and cannot (in TS at least) and shouldn't be invoked:

`
export default class EventHandler implements IEventHandler {
...

private static instance: object;

...

/**
* constructor: Declared protected to defeat instantiation outside of class or child class (Singleton pattern)
*/
protected constructor() {}

/**
* Returns the instance of the EventHandler class (Singleton pattern)
* @returns the instance of the EventHandler class
*/
public static getInstance = (): EventHandler =>
!EventHandler.instance
? (EventHandler.instance = new EventHandler())
: (EventHandler.instance as EventHandler);

...
};
`

$3

`
eventHandler.createChannel("keyboard-inputs");
eventHandler.createChannel("mouse-inputs");
`

$3

`
const cb = () => {}
const sub = new Subscriber();
sub.setCallBack(cb)
`

$3

`
eventHandler.subscribe("keyboard-inputs", sub);
eventHandler.unsubscribe("keyboard-inputs", sub);
`

$3

`
eventHandler.notify("keyboard-inputs", message)
``