How to implement the observer pattern in JavaScript

Overview

The observer pattern is also known as the publish-subscribe pattern, which is a behavioral pattern in the design pattern;

definition:

The observer pattern defines a one-to-many object dependency relationship. When the state of a dependent object changes, all objects that depend on it will be notified.

Vernacular explanation:

Suppose you go to an Apple store to buy the latest iPhone 11, because the iPhone 11 has just been released and it is in the peak season, the supply is insufficient; when you go to the store, the clerk tells you that it is temporarily out of stock, but you can leave your contact information, and if the stock arrives, you will be notified as soon as possible; of course, you will definitely not go to the store every day to ask if the iPhone 11 has arrived, nor will you call the store every day, because you have your own work and life, and you can't have so much free time; so at this time, the clerk asks you to leave your contact information and notify you as soon as the stock arrives, which will not cause you any trouble, and you only need to wait for the call from the store; and this method is a typical observer mode;

First, let's analyze it:

1. Subscription method: Giving the contact information to the store clerk is a message subscription, because only in this way can you know the arrival of iPhone 11 in time, so we need a specific method for subscription behavior;

2. Reservation list: You should know that iPhone 11 is a new version of iPhone, so you are definitely not the only one who makes a reservation. Therefore, the clerk needs a reservation list to count the contact information of all the bookers and the mobile phone version information for the convenience of statistics. So we define it as an object here; the key represents the contact information of the booker, and the value represents the mobile phone version information;

3. Release method: When the iPhone 11 arrives, the store must release the message uniformly according to the reservation list ("iPhone 11 has arrived, everyone hurry up and grab it!!!"), so the store needs a release method to implement specific release behavior;

4. Unsubscribe: Everything is relative. If you can subscribe, you can definitely unsubscribe. When waiting for the iPhone 11 arrival notification, you are in a hurry to use the phone, so you directly buy a Huawei model. Therefore, the iPhone 11 is not in great demand for you for the time being. Because you already have a phone, whether the iPhone 11 in the store has arrived or not is of no significance to you. So at this time you don’t want to be disturbed and need to unsubscribe from the message. So we need an unsubscribe method to implement the specific unsubscribe behavior;

Application scenarios of the observer pattern

1. DOM events

If you are a front-end developer, whether you know about the observer pattern before reading this article or not, I am sure you have used the observer pattern;

document.body.addEventListener('click', function() {
    console.log('hello world!');
});

Does this code look familiar? Yes, this is a DOM event listener; we subscribe to the click event for body (click is equivalent to the subscription method above), because the browser does not know when you click the mouse, so when you trigger the click event, the function will be triggered to notify you (publish method); DOM events are an implementation of the observer pattern;

2. Vue two-way binding v-model

As front-end developers, we must know that vue is a framework of MVVM mode; the core of vue is two-way binding, so the implementation of two-way binding is actually an observer mode; because after you bind a data first (subscription method), the browser does not know when you modify it. All the nodes on your page that are bound to or depend on the data are actually a reservation list. Only when you modify the value of the data, vue will notify (publish method) the method/data that depends on the data to perform corresponding operations or refresh;

Of course, the observer pattern is by no means limited to these two implementation scenarios. There are many examples of the observer pattern in our lives and business scenarios. When we introduced the design pattern in the first factory pattern, we said that the design pattern is a way of thinking to solve problems rather than a fixed formula. So how do we implement the observer pattern?

Implementation of the Observer Pattern

//Define merchants var merchants = {};
//Define the order list merchants.orderList = {};
//Add the added subscriber to the reservation list (subscription method)
merchants.listen = function(id,info){
    //If it exists if(!this.orderList[id]){
        // (Booking list)
        this.orderList[id] = [];
    }
    // Store the user's reserved product information into the array this.orderList[id].push(info);
}
//Publish information (publish method)
merchants.publish = function(){
    var id = Array.prototype.shift.call(arguments);
    var infos = this.orderList[id];
    if(!infos || infos.length === 0){
        console.log("You have no reservation information yet");
        return false;
    }

    for(var i = 0;i < infos.length;i++){
        console.log("Booking successful");
        console.log("Dear user:")
        infos[i].apply(this,arguments);
        console.log("Arrived");
    }
}
//Unsubscribe merchants.remove = function(id,fn){
    var infos = this.orderList[id];
    if(!infos){ return false}

    if(!fn){
        console.log(123);
    }else{
        for(var i = 0;i < infos.length;i++){
            if (infos[i] === fn) {
                infos.splice(i,1);
            }
        }
    }
}
let customeA = function(){
    console.log("One black premium edition");
}

merchants.listen("15172103336",customeA);
merchants.remove("15172103336",customeA);
merchants.publish("15172103336");

The code above is a little long, but not difficult. First, we define an object as a merchant, then define an empty object as a reservation list, and then implement our subscription method and publishing and unsubscription methods step by step. The logic is not complicated, but there are some syntax that need to be explained:

In the publishing method, var id = Array.prototype.shift.call(arguments); means that when merchants.publish("15172103336"); is called, the first parameter is returned to it and then copied as id, so the id value at this time is "15172103336";

infos[i].apply(this,arguments); This method is not particularly easy to understand. First of all, infos contains the mobile phone number and mobile phone version information of the booker, so we use infos[i].apply(this,arguments); This method actually calls the mobile phone version information function corresponding to "15172103336"; it is actually equal to infos[i](arguments);

Summarize

The observer pattern is very common in both the front-end field and in real life. Learning the observer pattern well can help us learn the source code knowledge of Vue, but it is not limited to this. Therefore, the observer pattern is worth learning carefully. In other words: "Taste it, taste it carefully!" The efforts you make today will always be rewarded with salary in the future!

The above is the details of how to implement the observer pattern with JavaScript. For more information about the JavaScript observer pattern, please pay attention to other related articles on 123WORDPRESS.COM!