Observer pattern in JavaScript design pattern

Observer design pattern

The observer design pattern is divided into the observer and the observer. When the observer triggers a certain boundary condition, the observer will trigger an event. Here two constructors are needed to perform the observer design pattern. One is the observer and the other is the observer.

Let's use the observer to listen to the modification operation of an object's attribute. The modification of a certain attribute of an object will trigger certain methods of the observer

Initial data

   let obj = {
            name: "Ruoshui"
        }

Observed

Create the observer. We define an initialization state for the observer to record the initial value of the observed attribute. We also need to define an observer method queue, which is used to add and delete the observer and also to trigger the method on the observer. There are three methods on the observed class. Modify the observed attribute method and modify the observed attribute method. One is to modify the observed value. The other is to trigger the observer method on the own, add the observer method, and to add the observer method on the own, delete the observer method on the own.

 // Observer class        class Subject {
        //The value not transmitted is initially empty            constructor(state = "") {
                // Initial state                 = state
                // Observer method queue                 = []
            }
            // Set your own status            setState(val) {
            // Tell the observer what state it has changed to                 = val;
                // At the same time, you need to trigger all the observer methods on yourself                (item => {
                    // item is every observer, each observer is an object                    ();
                })
            }
            // Add observer            addObserver(observer) {
                // Pass the observer in                (observer)
            }
            // Delete the observer            removeObserver(observer) {
                // Filter out observers who are not currently viewers                 = (obs => obs !== observer);
            }
        }

Observer

Create an observer, used to define the identity of the observer and execute the method of the observer. The observer has an attribute that represents his own identity, and the other is his own method, used to be triggered by the observer.

    // Observer class        class Observer {
            // The parameter to be observed in name            // callback event triggered by the observed parameters reaching the boundary condition            constructor(name, callback = () => { }) {
                 = name;
                 = callback;
            }
        }

Finally, let's use it:

     // Create an observer        const ObserverName = new Observer('Listen to Obj change', () => { ('obj changed'); })
        // Create an observer        const name = new Subject()
        // Add an observer        (ObserverName)
        //Trigger observer method        ('The front end is like water')

The observer design pattern is suitable for monitoring one-to-many operations, such as the modification of the attributes of the monitoring object. The observer mode can reduce the degree of code coupling and improve scalability, but the observer has too many observers to monitor will increase the running time and the complexity of the program.

This is the end of this article about the Observer Mode in JavaScript design pattern. For more related JavaScript Observer Mode content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!