“This is the 18th day of my participation in the First Challenge 2022. For details: First Challenge 2022.”

preface

I’m sure many of you have heard of the Observer pattern because of the popularity of VUE, even front-end beginners who know vUE have probably heard of the Observer pattern. Vue itself is a practical example of the observer pattern.

What is the observer model

The Observer pattern is a design pattern that can be decoupled from the uniform interfaces Depend and Notify (whatever you call them, of course). There are two roles in the observer mode, one is the follower and one is the observed. The two communicate with each other, and no one else can intervene. After the follower follows the Depend, the follower will save the follower. The follower can notify his followers. As for the execution of the content, the follower decides, the follower only sends the notification. Followers do not know when they will be notified. They only know what to do after receiving the notification.

The characteristics of

  1. Easy to maintain.

Because there are only two roles, and the division of labor between them is clear, when writing code, you can know exactly what to change if you need to add or change features.

  1. Not flexible enough.

Although two sides of the same coin, this feature seems to be the opposite of the first. Imagine a scenario where the interaction of the system is complex and large, and the variables of concern may be referenced everywhere, where the number of registered followers is very large, but do we need each place to change immediately according to the notification? In practice, it is often not necessary, for example, another route has been jumped, the page is showing another component, and the previous route does not need to be changed immediately when it is notified. You can wait until the route is displayed again. And because the followers are collected according to the order of code execution, it is the earlier routes that receive notifications first. So you need to do some extra processing to optimize the observer mode.

When to use it

  1. Global state

Global states need no explanation. They are used in multiple places, and they are the same value. Need to achieve a true call to action. This is where the observer model comes in handy. But focus on the problems mentioned above. But the global state range doesn’t have to be large. For example, the data of each instance in vUE is limited to the scope of this instance, that is, the scope of this component, so that when this component is destroyed or jumped to another component, there will be less concern.

  1. When changing a value requires a lot of work

When there is such a demand, we stand up to the left hand to first lift up, the right foot forward a step, and then the body left, the right hand and then cover the mouth. We have a trigger that triggers, and there’s a lot of action behind it. So we can focus on standing up, and then the left hand right foot body right hand to register themselves to do things later. At this point, as soon as we call stand up, the rest of the action takes care of itself.

What happens if there is no observer mode. We might write a function that sets a set of actions, which is a different design pattern.

    function action() {stand up () raise left hand () cross right foot () turn left () raise right hand ()}Copy the code

How do I implement the Observer pattern in JavaScript

    // The follower
    class Observer {
        constructor() {
            this.deps = []
        }
        
        depend(dep) {
            this.deps.push(dep)
        }
        
        notify() {
            this.deps.forEach(dep= > dep.notify())
        }
        
        removeNotify(dep) {
            const i = this.deps.indexOf(dep)
            if (i > -1) {
                this.deps.splice(i, 1)}}}/ / followers
    class Watcher {
        constructor(action) {
            this.action = action
        }
        
        depend(observer) {
            this.observer = observer
            observer.depend(this)}removeDepend() {
            if (this.observer) {
                this.observer.removeNotify(this)}}notify() {
            // Default actions and custom actions
            this.action()
        }
    }
Copy the code

These are some of the observations of the observer mode, and I will introduce more patterns in the future. The first summary is inevitably flawed, but you can keep iterating. You can follow this column if you like.