Day 68: Exploring Observer Pattern | Harshil Chovatiya

Harshil Chovatiya - Day 68: Exploring Observer Pattern

Introduction

The Observer Pattern is a behavioral design pattern where an object, known as the subject, maintains a list of dependents, known as observers, that are notified of any state changes. This pattern promotes loose coupling between objects, as the subject doesn't need to know details about its observers.

Example: Basic Structure of the Observer Pattern:

                
                
// Subject
class NewsAgency {
    constructor() {
        this.news = "";
        this.observers = [];
    }

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

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

    notifyObservers() {
        this.observers.forEach(observer => observer.update(this.news));
    }

    setNews(news) {
        this.news = news;
        this.notifyObservers();
    }
}

// Observer
class NewsReader {
    constructor(name) {
        this.name = name;
    }

    update(news) {
        console.log(`${this.name} received news: ${news}`);
    }
}

// Usage
const agency = new NewsAgency();
const reader1 = new NewsReader("Reader 1");
const reader2 = new NewsReader("Reader 2");

agency.addObserver(reader1);
agency.addObserver(reader2);

agency.setNews("Breaking News: Important Event");
                
            

Implementing Observer Pattern

Let's dive into the implementation details of the Observer Pattern.

Example: Coding the Observer Pattern:

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

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

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

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

class ConcreteSubject extends Subject {
    constructor() {
        super();
        this.state = 0;
    }

    setState(state) {
        this.state = state;
        this.notifyObservers();
    }

    getState() {
        return this.state;
    }
}

class Observer {
    update() {
        // Implementation in concrete observers
    }
}

class ConcreteObserver extends Observer {
    constructor(subject) {
        super();
        this.subject = subject;
        this.subject.addObserver(this);
    }

    update() {
        console.log(`State updated: ${this.subject.getState()}`);
    }
}

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

subject.setState(1);
                
            

Conclusion

By understanding and implementing the Observer Pattern, you can enhance the flexibility and maintainability of your code, especially when dealing with systems with multiple components that need to react to changes in state. This pattern promotes a clean separation between the subject and its observers. Stay tuned for more advanced patterns in the upcoming days.

Social Media