“This is my fifth day of the November Gwen Challenge.The final text challenge in 2021”.

In the last video, I talked about the whole process of making this feature

What is the observer model

The figure shows that the observer pattern is divided into two characters, an observer an observer, there is a relationship between them, observed and observer can be any things, the observer pattern as long as the observer and the observed satisfy certain conditions, can be referred to as the observer pattern, the observer pattern is to stand in the Angle of the observed, Every observed that fits the observer pattern is unique, but anything can act as the observed.

The role of the observer model

One-to-many information communication the observer pattern is mainly to solve the problem, what is called a one-to-many, and what is a communication problem, because it is to stand in the Angle of the observed, so a one-to-many, each observer mode, the observer is unique, the observer can be multiple, and communication problems, is the connection between the observer and the observer, the following specific to understand:

Third, the specific structure of the observer model

3.1 Why the Observer model is needed (what problems does the Observer model solve specifically)

In the process of coding, it is often encountered that when one data changes, other data also needs to change. In the case of not using the framework, native JS is difficult to solve this problem. Here is a simple example:

When you dynamically generate elements in an array that can be added or subtracted at any time, and when you render the array to the page and the array changes, how do you keep the page up to date with the array? So you might want to call the render function again to render the new data to the page, but the question is, when do you call the render function, or how do you tell when the array is going to change? That you would think might use a timer, a function called after a period of time, change whether an array or a period of time, is a way, but if long time don’t change, then the timer has been doing this, use the browser performance, so in order to solve this problem, the observer pattern,

3.2 Why the Observer model is needed (for example)

Question: Observed as a store, the observer is the customer, assuming that the store is a new commodity, customers want the goods, but goods shelf time is unknown, the customer (observers) need what to do, only over a period of time to go to the store to see goods have no, can only continue to check whether the loading, very consumption energy, computer, too, Keep visiting, keep doing nothing, so here’s a solution:

Solution: believe that there are a lot of people already know how to do, to the right, is to make the store initiative to inform the customer needs a new commodity, also is to let the observed notify the observer, this observer don’t need to again and again to check is the change of the observer, said this idea whether it is opened. This is the observer model

3.3 Specific flow of observer mode — observed

So how many steps are required for the observed to actively inform the observer

3.3.1 Collecting observers

You don’t know who to notify until you know who needs it, so you collect which customers need it, which is the connection, but for the code, the data you collect needs to be stored somewhere, so first we need to create an array of user data

observerList = []
Copy the code
3.3.2 Adding observers

Now that we have an array of observer information, we can put the observer information, which we use to communicate, into an array,

addObserver(observer) {
    this.observerList.push(observer)
}
Copy the code
3.3.3 Notify the observer

When the product hits the shelves, when the data changes, notify the user (observer),

notifyObservers() {
    this.observerList.forEach(item => {
        item.notify(this.str)
    })
}
Copy the code

In this way, you can actively notify the observer when the observed changes, and the observed must have an array to store the observer, a method to add the observer, a method to notify the observer

3.4 Specific flow of observer mode — Observer

To have an observed, of course, one needs to have one or more observers, or one does not need to inform anyone

3.4.1 Receiving the observed notification
Notify (STR) {console.log(STR + ',' + this.name + "received "); }Copy the code

The observed notifies the observer, and of course the observer has to have a way of receiving the observed notification,

As long as there are two actors, and they satisfy the requirements of the observer and the observed, such a set can be called the observer mode, so now you can see why it is one-to-many, why it is the point of view of the observed,

PS: Here you can create two classes, or objects… To simulate the observer and the observed in the observer mode, when the observed changes, the observer follows the change. Here I use JS, which can be more easily understood by using ts interface.

// Class Observer {constructor(name) {this.name = name} notify(STR) {console.log(STR + ',' + this.name + "received "); } // observerList = [] addObserver(observer) { this.observerList.push(observer) } notifyObservers() { this.observerList.forEach(item => { item.notify(this.str) }) } } function testObserver() { const subject = new Subject() const person = new Observer('orange') const person2 = new Observer('orange2') subject.addObserver(person) subject.addObserver(person2) console.log(subject.observerList); subject.notifyObservers() } testObserver()Copy the code

Finish this chapter