Implementation of publish and subscribe mode ----- hand tearing JS series

1. What is publish and subscribe mode ？

It defines a one to many dependency between objects , When the state of an object changes , All objects that depend on it will be notified

Example ：

Xiao Ming likes a series of articles by a blogger very much , But I don't know when to update , So Xiaoming subscribed to this series of blog posts of this blogger . When the blogger updates , Make sure Xiao Ming can receive the notice in time . This is a simple example of a publishing subscriber . Bloggers are publishers , Xiao Ming is a subscriber . Subscribe to this series of blog posts

2. application

1. Support simple communication , In the last example , When the object state is updated , Automatically notify subscribers of this object .
2. Publishers and subscribers are loosely coupled . Publishers simply notify subscribers , No matter how the subscriber runs . Subscribers only care about whether the state of the object changes , Decide whether to call the event method . stay asynchronous Widely used in requests . We don't need to pay attention to the internal state of the object in the asynchronous execution phase , We only care about the time when the event is completed

3. Code implementation

Basic steps of implementation ：

• Define an event container , Load event array （ Subscribers ）

• Define the add subscriber method （addEventListener（））

• Define trigger events （dispatchEvent）----- The publisher notifies the subscriber , Execute the corresponding event method

• Define event removal methods （removeEventListener（））---- Delete the subscription publication event of this object

class EventCenter{
    
    //1. Define event containers , Used to load the event array 
   handlsers={
    };
   // Event name , Event parameters , Event method 
    addEventListener(type ,handlser)
    {
    
        // Create a new array 
        if(!this.handlsers[type])
        {
    
            this.handlsers[type]=[]
        }
        this.handlsers[type].push(handlser)
    }
    //2. Triggering event 
    dispatchEvent(type)
    {
    
        // No registration throws an error 
        if(!this.handlsers[type])
        {
    
            return new Error(" The event is not registered ")
        }
        // Triggering event 
        this.handlsers[type].forEach(handlser=>{
    
            handlser(...params)
        })
    }
    //3. Event removal 
    removeEventListener(type,handlser)
    {
    
        // This event does not exist 
        if(!this.handlsers[type])
        {
    
            return new Error(" The event is invalid ")
        }
        // Event free method , Delete the subscription and publication of this event 
        if(!handlser)
        {
    
            delete this.handlsers[type]
        }else{
    
            // Find the subscript of the publish subscribe array corresponding to the event method 
            const index=this.handlsers[type].findIndex(el=>el===handlser)
            // Not found 
            if(index===-1)
            return new Error(" This event is not bound ")
            // Locate subscript , Delete the subscription and publishing events for this event 
            this.handlsers[type].splice(index,1)
            if(this.handlsers[type].length===0)
            {
    
                delete this.handlsers[type]
            }
        }
    }


}

Challenges continue to grow 100 God — The first day