DeveloperBreeze

Javascript Design Patterns Development Tutorials, Guides & Insights

Unlock 1+ expert-curated javascript design patterns tutorials, real-world code snippets, and modern dev strategies. From fundamentals to advanced topics, boost your javascript design patterns skills on DeveloperBreeze.

Tutorial
javascript

Advanced JavaScript Patterns: Writing Cleaner, Faster, and More Maintainable Code 

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

Subject.prototype = {
    subscribe: function(fn) {
        this.observers.push(fn);
    },
    unsubscribe: function(fnToRemove) {
        this.observers = this.observers.filter(fn => fn !== fnToRemove);
    },
    notify: function(data) {
        this.observers.forEach(fn => fn(data));
    }
};

const subject = new Subject();

function Observer1(data) {
    console.log('Observer 1:', data);
}

function Observer2(data) {
    console.log('Observer 2:', data);
}

subject.subscribe(Observer1);
subject.subscribe(Observer2);

subject.notify('Hello Observers!');
// Output:
// Observer 1: Hello Observers!
// Observer 2: Hello Observers!

subject.unsubscribe(Observer2);

subject.notify('Hello Observer 1!');
// Output:
// Observer 1: Hello Observer 1!
  • Decouples the subject from its observers.
  • Supports dynamic subscription and notification.

Aug 27, 2024
Read More