Here is a concise front-end knowledge system waiting for you to check, have a look, there will be a surprise oh, if you feel good, begged star ha ~

A brief description of the publish-subscribe pattern

The publishad-subscribe pattern, also known as the observer pattern, defines a one-to-many relationship between objects, allowing multiple observer objects to listen to a subject object at the same time. When an object changes, all dependent objects will be notified.

Take online shopping for example:

Let’s say xiao Hong has her eye on a pair of shoes, but they are out of stock and the seller promises her an arrival notice. At the same time, Xiao Ming, xiaoxiao lamp also paid attention to this pair of shoes.

In this scenario, the seller is the publisher, and Xiao Hong and others belong to the subscribers. When the shoes arrive, everyone will be notified in turn.

Advantages of the publish-subscribe model:

  1. Supports simple broadcast communication that automatically notifies subscribed objects when their state changes.
  2. The coupling between the publisher and the subscriber is reduced. The publisher only releases a message, and it does not care how the message is used by the subscriber. At the same time, the subscriber only listens to the event name of the publisher, and it does not care how the publisher changes as long as the event name of the publisher remains unchanged. Similarly, the seller (publisher) only needs to inform the subscriber (buyer) of the arrival of the shoes, and he doesn’t care whether the buyer buys or doesn’t buy, or buys from another seller. Subscribers can be notified as soon as the shoes arrive.

Disadvantages of the publish-subscribe model:

Creating subscribers takes time and memory. If overused, it will make the code difficult to understand and maintain, etc.

How to implement publish subscribe model?

  1. Start by figuring out who the publisher is (i.e., the seller above).
  2. Then add a cached list to the publisher that holds a callback function to notify subscribers (for example, the buyer above bookmarks the seller’s store, and the seller bookmarks a list of that store).
  3. The last step is to publish a message, which the publisher traverses through the cached list, triggering the subscriber callback function it holds in turn.

In actual combat

Publish and subscribe is one of the most classic design patterns, and there are many articles about it. I’m not going to go into too much here. Go directly to code ~~~

var Event = (function(){
    var list = {},
          listen = function(key,fn){
            if(! List [key]) {// If you have not subscribed to this type of message, create a cache list for this type of message. } list[key].push(fn); // Subscribe messages to the cache list}; trigger =function() {var key = Array. The prototype. The shift. The call (the arguments), / / a message type name FNS = list [key]; // Retrieves the collection of callback functions corresponding to the message // returns if the message has not been subscribedif(! fns || fns.length === 0) {return false;
            for(var i = 0, fn; fn = fns[i++];) { fn.apply(this,arguments); // arguments are arguments to post messages}}; remove =function(key,fn){var FNS = list[key]; (key,fn){var FNS = list[key]; // If no specific callback function is passed in, all subscriptions for the message corresponding to the key need to be unsubscribedif(! fns) {return false;
            if(! fn) { fns && (fns.length = 0); }else {
                for(var i = fns.length - 1; i >= 0; i--){
                    var _fn = fns[i];
                    if(_fn === fn) { fns.splice(i,1); // Delete subscriber callback function}}}};return{ listen: listen, trigger: trigger, remove: remove } })(); // Test code is as follows: event.listen ("color".function(size) {
    console.log("Size :"+size); // Print size 42}); Event.trigger("color", 42);Copy the code