Shulou(Shulou.com)06/01 Report--

This article shares with you the content of a sample analysis of the Observer pattern in the web front end. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Observer mode (Observer Pattern)

Observer pattern, also known as publish-subscribe pattern (Publish/Subscribe Pattern), is a design pattern that we often come into contact with, and there are many applications in daily life, such as you subscribe to a blogger's channel and receive a push when there is a content update; another example is the event subscription response mechanism in JavaScript. The idea of the observer pattern is described in one sentence: the observed object (subject) maintains a set of observers (observer). When the state of the observed object changes, it notifies the observer of these changes by calling a method of the observer.

Subject objects in observer mode generally need to implement the following API:

Subscribe (): receives an observer observer object and makes it subscribe to itself

Unsubscribe (): receives an observer observer object and makes it unsubscribe to itself

Fire (): triggers an event that notifies all observers

Manually implement the observer mode with JavaScript:

/ / function Subject () {this.observers = [];} Subject.prototype = {/ / subscribe to subscribe: function (observer) {this.observers.push (observer);}, / / Unsubscribe unsubscribe: function (observerToRemove) {this.observers = this.observers.filter (observer = > {return observer! = = observerToRemove })}, / / event triggered fire: function () {this.observers.forEach (observer = > {observer.call ();});}}

Verify that the subscription was successful:

Const subject = new Subject (); function observer1 () {console.log ('Observer 1 fixing');} function observer2 () {console.log ('Observer 2 fixing');} subject.subscribe (observer1); subject.subscribe (observer2); subject.fire (); / / output: Observer 1 Firing! Observer 2 Firing!

Verify that the unsubscription was successful:

Subject.unsubscribe (observer2); subject.fire (); / / output: Observer 1 Firing!

Scene

DOM event

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

Vue response type

Advantages

Supports simple broadcast communication and automatically notifies all subscribed objects

The abstract coupling relationship between the target object and the observer can be independently extended and reused.

Increased flexibility

What the observer pattern does is decouple so that both sides of the coupling rely on abstraction rather than on concrete. So that their changes will not affect the changes on the other side.

Shortcoming

Overuse will weaken the relationship between objects and make it difficult for programs to track, maintain and understand.

Thank you for reading! This is the end of this article on "sample Analysis of the Observer pattern in the web Front end". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.