Patrón Observador — demo visual

El Subject mantiene un estado (un “mensaje”). Los Observers se suscriben. Cuando el Subject cambia, notifica a los observers activos y todos se actualizan.

Diagrama: flujo de notificación

Al hacer notify(), las flechas “viajan” a cada observer suscrito

Subject Observer state idle —

Subject

notifica()

Estado actual (vacío)

Observers

update(state)

Ejemplo del patrón (Observer)

código

<b>Subject</b> mantiene una lista de <b>Observers</b> y los notifica cuando cambia su estado.

// observer.ts

interface IObserver {
  update(state: string): void;
}

class Subject {
  private observers = new Set<IObserver>();
  private state = "";

  attach(o: IObserver) { this.observers.add(o); }
  detach(o: IObserver) { this.observers.delete(o); }

  setState(next: string) {
    this.state = next;
    this.notify();
  }

  notify() {
    for (const o of this.observers) o.update(this.state);
  }
}

class Observer implements IObserver {
  constructor(private name: string) {}
  update(state: string) {
    console.log(this.name + " received: " + state);
  }
}

const subject = new Subject();
const a = new Observer("Observer A");
const b = new Observer("Observer B");

subject.attach(a);
subject.attach(b);
subject.setState("new-state");

// observer.js

class Subject {
  constructor() {
    this.state = "";
    this.observers = new Set();
  }
  attach(o) { this.observers.add(o); }
  detach(o) { this.observers.delete(o); }
  setState(next) {
    this.state = next;
    this.notify();
  }
  notify() {
    for (const o of this.observers) o.update(this.state);
  }
}

class Observer {
  constructor(name) { this.name = name; }
  update(state) {
    console.log(this.name + " received: " + state);
  }
}

const subject = new Subject();
const a = new Observer("Observer A");
const b = new Observer("Observer B");

subject.attach(a);
subject.attach(b);
subject.setState("new-state");

La demo de esta página usa JS “vanilla” para interactuar con la UI, pero el contrato del patrón se ve igual en TS.