Observer Design Pattern - DeanHristov/ts-design-patterns-cheat-sheet GitHub Wiki

The Observer pattern (Also known as: Pub-Sub pattern) is a behavioral design pattern that lets us define a subscription mechanism to notify multiple objects about any events that happen to the object they’re observing. A simple UML diagram can be seen here

A Great fit when:

A one-to-many dependency between objects has to be defined without making the objects tightly coupled.
One object can notify multiple other objects.
When one object changes state, an open-ended number of dependent objects should be updated automatically

etc...

Example:

Public contracts

interface ISubject {
  subscribe(subscriber: IObserver): void;

  unsubscribe(subscriber: IObserver): void;

  publish(): void;
}

interface IObserver {
  update(): void;
}

Simple implementation

// A class Publisher
class Subject implements ISubject {
  private subscribers: Set<IObserver>;

  constructor() {
    this.subscribers = new Set<IObserver>();
  }

  publish(): void {
    this.subscribers.forEach((item: IObserver) => item.update());
  }

  subscribe(subscriber: IObserver): void {
    const shouldNotExists = !this.subscribers.has(subscriber);

    if (shouldNotExists) {
      this.subscribers.add(subscriber);
      return;
    }

    console.log('This subscriber is already attached!');
  }

  unsubscribe(subscriber: IObserver): void {
    this.subscribers.delete(subscriber);
  }
}

// A class Subscriber
class Observer implements IObserver {
  constructor(subject: ISubject) {
    subject.subscribe(this);
  }

  update(): void {
    // TODO this.update()
    console.log('I have been called!');
  }
}

Code in action

const subject: Subject = new Subject();
const observer1: Observer = new Observer(subject);
const observer2: Observer = new Observer(subject);

subject.publish();
// Output:
//   "I have been called!"
//   "I have been called!"

More info can be found on the wiki page.