Aprende Observer Pattern | Behavioral Patterns

The Observer pattern is a foundational concept in event-driven JavaScript. It provides a way for objects, known as observers, to subscribe to and receive notifications from another object, called the subject or observable, when certain events occur. This pattern is highly relevant to JavaScript, where building interactive user interfaces and handling asynchronous events are common tasks. By decoupling the source of events from the code that responds to them, the Observer pattern makes your code more modular, reusable, and easier to maintain.


              1234567891011121314151617181920212223242526272829303132333435363738394041
            
// A simple EventEmitter implementing the Observer pattern
class EventEmitter {
  constructor() {
    this.events = {};
  }

  // Subscribe to an event
  on(event, listener) {
    if (!this.events[event]) {
      this.events[event] = [];
    }
    this.events[event].push(listener);
  }

  // Emit an event
  emit(event, data) {
    if (this.events[event]) {
      this.events[event].forEach(listener => listener(data));
    }
  }

  // Unsubscribe from an event
  off(event, listenerToRemove) {
    if (!this.events[event]) return;
    this.events[event] = this.events[event].filter(
      listener => listener !== listenerToRemove
    );
  }
}

// Usage example
const emitter = new EventEmitter();

function greet(name) {
  console.log(`Hello, ${name}!`);
}

emitter.on('greet', greet);
emitter.emit('greet', 'Alice'); // Output: Hello, Alice!
emitter.off('greet', greet);
emitter.emit('greet', 'Bob');   // No output, as the listener was removed

To see how the Observer pattern works in practice, consider the process step by step. First, you have a subject—in this case, the EventEmitter—that maintains a list of observers, or listeners, for different types of events. Observers subscribe to specific events by calling the on method, passing in the event name and a callback function. When the subject triggers an event using the emit method, it notifies all observers subscribed to that event, passing along any relevant data. Observers can also unsubscribe from events using the off method, which removes their callback from the subject's list. This subscription mechanism enables you to build flexible, event-driven systems where different parts of your application can respond to changes or actions without being tightly coupled to the source of those events.

1. The Observer pattern is useful for:

2. In the Observer pattern, what is the role of the observer?

¿Todo estuvo claro?

¡Gracias por tus comentarios!

Sección 4. Capítulo 1

Pregunte a AI

Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla

Suggested prompts:

Can you explain how the EventEmitter class works in more detail?

What are some real-world use cases for the Observer pattern in JavaScript?

How does the Observer pattern help with decoupling code?

Awesome!

Completion rate improved to 7.14

Desliza para mostrar el menú


              1234567891011121314151617181920212223242526272829303132333435363738394041
            
// A simple EventEmitter implementing the Observer pattern
class EventEmitter {
  constructor() {
    this.events = {};
  }

  // Subscribe to an event
  on(event, listener) {
    if (!this.events[event]) {
      this.events[event] = [];
    }
    this.events[event].push(listener);
  }

  // Emit an event
  emit(event, data) {
    if (this.events[event]) {
      this.events[event].forEach(listener => listener(data));
    }
  }

  // Unsubscribe from an event
  off(event, listenerToRemove) {
    if (!this.events[event]) return;
    this.events[event] = this.events[event].filter(
      listener => listener !== listenerToRemove
    );
  }
}

// Usage example
const emitter = new EventEmitter();

function greet(name) {
  console.log(`Hello, ${name}!`);
}

emitter.on('greet', greet);
emitter.emit('greet', 'Alice'); // Output: Hello, Alice!
emitter.off('greet', greet);
emitter.emit('greet', 'Bob');   // No output, as the listener was removed

1. The Observer pattern is useful for:

2. In the Observer pattern, what is the role of the observer?

¿Todo estuvo claro?

¡Gracias por tus comentarios!

Sección 4. Capítulo 1