JS Observer Pattern | Architecture Diagram & Code #exalidraw #practice
music by: NCS Certainly! Another commonly used pattern in JavaScript is the "Observer Pattern." This pattern establishes a one-to-many relationship between objects, where one object (called the subject or observable) maintains a list of other objects (called observers) and notifies them of any changes in its state. Let's consider a real-world example to understand the Observer Pattern better. Imagine you have a weather application that displays the current weather conditions. You want to implement a feature where users can subscribe to receive notifications whenever the weather changes. The Observer Pattern can help achieve this functionality. In this example, we first define a `Weather` class representing the weather subject. It keeps track of a list of observers and provides methods to add, remove, and notify observers. The `setWeather` method updates the weather and triggers the notification to all observers. Next, we define a `WeatherObserver` class representing the observers. Each observer has a `name` and an `update` method that receives the current weather as a parameter. We create an instance of the weather subject (`weatherStation`) and three observer instances (`observer1`, `observer2`, and `observer3`). We add the observers to the subject using the `addObserver` method. When the weather changes (simulated by `weatherStation.setWeather('Sunny')`), the subject notifies all the observers, and each observer's `update` method is called. As a result, the observers receive the weather update and display a message with their respective names and the current weather. The Observer Pattern allows for loose coupling between the subject and observers. The subject doesn't need to know the specific details of the observers, and new observers can be added or removed dynamically without affecting the subject's functionality. This pattern is commonly used in various scenarios, such as event handling, user interface updates, data synchronization, and more, where multiple objects need to observe and react to changes in a central subject.
music by: NCS Certainly! Another commonly used pattern in JavaScript is the "Observer Pattern." This pattern establishes a one-to-many relationship between objects, where one object (called the subject or observable) maintains a list of other objects (called observers) and notifies them of any changes in its state. Let's consider a real-world example to understand the Observer Pattern better. Imagine you have a weather application that displays the current weather conditions. You want to implement a feature where users can subscribe to receive notifications whenever the weather changes. The Observer Pattern can help achieve this functionality. In this example, we first define a `Weather` class representing the weather subject. It keeps track of a list of observers and provides methods to add, remove, and notify observers. The `setWeather` method updates the weather and triggers the notification to all observers. Next, we define a `WeatherObserver` class representing the observers. Each observer has a `name` and an `update` method that receives the current weather as a parameter. We create an instance of the weather subject (`weatherStation`) and three observer instances (`observer1`, `observer2`, and `observer3`). We add the observers to the subject using the `addObserver` method. When the weather changes (simulated by `weatherStation.setWeather('Sunny')`), the subject notifies all the observers, and each observer's `update` method is called. As a result, the observers receive the weather update and display a message with their respective names and the current weather. The Observer Pattern allows for loose coupling between the subject and observers. The subject doesn't need to know the specific details of the observers, and new observers can be added or removed dynamically without affecting the subject's functionality. This pattern is commonly used in various scenarios, such as event handling, user interface updates, data synchronization, and more, where multiple objects need to observe and react to changes in a central subject.