Observer pattern

Observer pattern

Observer Pattern Observer Pattern is an object behavior pattern. When a one-to-many dependency relationship between objects is defined, whenever the state of an object changes, its related dependent objects are notified and automatically updated. Observe Provider mode is also known as Publish-Subscribe Publish-Subscribe mode, Model-View Model-View mode, Source-Listener Source-Listener mode or Dependents mode.


The observer pattern establishes a dependency between objects. When an object changes, it will automatically notify other objects, and other objects will react accordingly. Therefore, the changed object is called the observation target, and the notified object is called the observer. An observation target can correspond to multiple observers, and there is no mutual connection between these observers. Observers can be added and deleted as needed, so that The system is easier to expand.


  • The observer pattern can realize the separation of the presentation layer and the data logic layer, define a stable message update delivery mechanism, and abstract the update interface, so that there can be various different presentation layers as specific observer roles.
  • The Observer pattern establishes an abstract coupling between the observation target and the observer.
  • The observer pattern supports broadcast communication.
  • The observer pattern meets the requirements of the "open-closed principle".


  • If an observable object has many direct and indirect observers, it will take a lot of time to notify all observers.
  • If there is a circular dependency between the observer and the observation target, the observation target will trigger a cyclic call between them, which may cause the system to crash.
  • The observer pattern has no corresponding mechanism to let the observer know how the observed target object has changed, but only know that the observed target has changed.

Applicable environment

  • An abstract model has two aspects, one of which depends on the other. Encapsulating these aspects in separate objects allows them to be changed and reused independently of each other.
  • The change of one object will cause one or more other objects to change, and it is not known how many objects will change, which can reduce the coupling between objects.
  • An object must notify other objects without knowing who these objects are.
  • A trigger chain needs to be created in the system, the behavior of object A will affect object B, the behavior of object B will affect object C..., you can use the observer pattern to create a chain trigger mechanism.


class PubSub{ // Subscribe-publish class
        this.handlers = {};

    on(key, handler) { // subscription
        if (!(key in this.handlers)) this.handlers[key] = [];

    off(key, handler) { // uninstall
        const index = this.handlers[key].findIndex(item => item === handler);
        if (index < 0) return false;
        if (this.handlers[key].length === 1) delete this.handlers[key];
        else this.handlers[key].splice(index, 1);
        return true;

    commit(key, ...args) { // trigger
        if (!this.handlers[key]) return false;
        this.handlers[key].forEach(handler => handler.apply(this, args));
        return true;

const eventBus = new PubSub();

  Job seekers subscribe to some recruitment sites and they are notified whenever there is a matching job opportunity
class JobBoard{ // Recruitment notice board
    subscribe(funct) {
        eventBus.on("job-sub", funct);


class JobSeeker { // job seeker
    constructor(name) {
        this._name = name;

    notify() {
        console.log(this._name, "has been notified of a new posting");

    var jonDoe = new JobSeeker("John Doe")
    var janeDoe = new JobSeeker("Jane Doe")
    var kaneDoe = new JobSeeker("Kane Doe")

    var jobBoard = new JobBoard();
    jobBoard.subscribe(() => jonDoe.notify());
    jobBoard.subscribe(() => janeDoe.notify());
    jobBoard.subscribe(() => kaneDoe.notify());


Question of the day

refer to

Tags: Design Pattern

Posted by MARIOPARTY53 on Wed, 11 May 2022 08:20:49 +0300