This is the first day of my participation in the August Challenge. For details, see:August is more challenging

Definition of the observer pattern

Observer mode is a behavioral mode that represents a one-to-many dependency between objects. When an object’s state changes, all objects that depend on it are notified and automatically updated.

There are two important roles involved in the observer pattern, the target object and the observer. The observer needs to observe the target object and update its operation according to the change of the target object. In the actual scenario, the target object will implement the event logic of binding, unbinding and notification, while the observer will implement the event logic of updating data. The target object will bind the observer and trigger the notification event when the change occurs, and the observer will update the data according to the notification.

Application scenarios of the Observer pattern

For real developers, the observer pattern has the following application scenarios:

  • Widely used in asynchronous programming, it is an alternative to passing callback functions
  • Can be used to achieve two-way binding of data

The advantages and disadvantages of the Observer mode

Advantages:

  • In response, the observer is notified of changes in the target object, which is the greatest advantage of the observer
  • Simple implementation idea

Disadvantages:

  • It is not flexible enough. Since the target object and the observer are coupled together, it is necessary to introduce the target object and the observer at the same time to achieve the response effect
  • Maintenance is difficult because of the high coupling. Once the business changes, both the target object and the observer need to be modified

Analysis of the implementation principle of observer mode

Let’s analyze the implementation steps of the observer pattern:

  • Create a new target object (Subject) that is responsible for binding events, events that are used for notification
  • Create an Observer with an event that updates data
  • The target object and observer are instantiated, bound, and notified

Concrete implementation code

Write the code along the lines of the previous step

// The target object
function Subject() {
  this.cache = [];
}
// The method for binding
Subject.prototype.bind = function (o) {
  this.cache.push(o);
}
// How to perform the notification operation
Subject.prototype.notify = function(msg) {
  this.cache.forEach(function(item) {
    item.update(msg);
  });
}

/ / observer
function Observer() {}
// Update the method of notification information
Observer.prototype.update = function(msg) {
  console.log('Update notification information :', msg);
}

var sub = new Subject();
var o1 = new Observer();
var o2 = new Observer();
sub.bind(o1);
sub.bind(o2);

sub.notify('Triggered');

// The final console output:
// Update notification information: triggered
// Update notification information: triggered
Copy the code