Master the Observer Pattern: A Fun Story‑Driven Front‑End Tutorial

First Encounter

Hello everyone, I am Xiao Yang, and this is my first article.

I aim to share the hardest tech topics through the most interesting stories, so please support me!

Story Begins

Today we discuss a high‑frequency front‑end interview question: the Observer pattern, widely used in the industry and in front‑end frameworks such as Vue and Redux.

Because the pattern is often tested, let’s learn it together.

SpongeBob works at a burger shop, while a rival boss runs a failing one.

The rival boss plans to steal SpongeBob’s secret recipe.

Analysis: Because the rival wants to steal the recipe, SpongeBob must constantly observe the boss’s actions, which is exactly the Observer pattern. There are two participants in the Observer pattern: the observer and the observable.

Observer and Observable

SpongeBob watches the boss’s every move.

When the boss finally attempts to steal the recipe, SpongeBob reacts immediately.

Analysis: Here the observer is SpongeBob, the observable is the rival boss; when the boss changes state, the observer is notified and acts. Core idea: when an object’s state changes, all dependent objects are automatically notified and updated, with tight coupling and no mediator.

One‑to‑Many Observation

The rival’s greed persists, so SpongeBob enlists Patrick Star to join the observer list.

Analysis: In the Observer pattern, there is one observable and multiple observers—they form a one‑to‑many dependency relationship.

Code Implementation

Below is a complete JavaScript implementation of the Observer pattern.

// Subject, the observable object
class Subject {
    constructor(name) {
        // List of observers
        this.name = name;
        this.observers = [];
    }
    add(observer) { // Add an observer
        this.observers.push(observer);
    }
    notify() { // Notify all observers
        for (var i = 0; i < this.observers.length; i++) {
            this.observers[i].update();
        }
    }
}

// Observer, the observer object
class Observer {
    constructor(name) {
        this.name = name;
    }
    update() { // Executed when notified by the subject
        console.log(`${this.name}: The rival boss is stealing the recipe, prepare to attack!`);
    }
}

const sub = new Subject('Rival Boss');
const observer1 = new Observer('SpongeBob');
const observer2 = new Observer('Patrick Star');
sub.add(observer1);
sub.add(observer2);
sub.notify();
// Output:
// SpongeBob: The rival boss is stealing the recipe, prepare to attack!
// Patrick Star: The rival boss is stealing the recipe, prepare to attack!