Observer Pattern (UI)

1. Introduction

The Observer Pattern is a behavioral design pattern that defines a one-to-many dependency between objects. When one object changes state, all its dependents are notified and updated automatically. This pattern is particularly useful in GUI applications for handling events and data updates.

2. Key Concepts

• Subject: The object that holds the state and notifies observers about state changes.
• Observer: An interface or abstract class defining the update method that is called when the subject's state changes.
• Concrete Observer: Implements the Observer interface and defines the action taken when notified by the subject.

3. Implementation

Step-by-Step Process

1. Define the Subject class that maintains a list of observers.
2. Implement methods to attach, detach, and notify observers.
3. Create an Observer interface with an update method.
4. Implement Concrete Observers that define the update method.
5. Trigger notifications from the subject when its state changes.

Code Example

class Subject {
    constructor() {
        this.observers = [];
    }

    attach(observer) {
        this.observers.push(observer);
    }

    detach(observer) {
        this.observers = this.observers.filter(obs => obs !== observer);
    }

    notify(data) {
        this.observers.forEach(observer => observer.update(data));
    }
}

class Observer {
    update(data) {
        // To be implemented by concrete observers
    }
}

class ConcreteObserver extends Observer {
    update(data) {
        console.log(`Observer received data: ${data}`);
    }
}

// Usage example
const subject = new Subject();
const observer1 = new ConcreteObserver();
const observer2 = new ConcreteObserver();

subject.attach(observer1);
subject.attach(observer2);

subject.notify("New data available!");
                

4. Best Practices

• Keep the subject and observers loosely coupled.
• Use the Observer pattern when multiple components need to be notified of changes.
• Consider using weak references for observers to avoid memory leaks.

5. FAQ