JS Improvement: Handwritten Publish Subscriber Model (Xiaobai)

//Take CSDN as an examplefunction pubSub(){//Store the array of user information that CSDN has followed methis.accounts=[];}//subscribe SubscribepubSub.prototype.subscribe=function(key,callback){//key: my accountif(!this.accounts[key]){//This store stores which users have followed me as a CSDN user, and if there is anythis.accounts[key]=[]}//callback is equivalent to the user, put this user into this follow me arraythis.accounts[key].push(callback)}//publish publishpubSub.prototype.publish=function(key,content){//Notify everyone who follows my accountthis.accounts[key].forEach(user=>{user(content);})}//remove removes people who follow my accountpubSub.prototype.remove=function(key,callback){// Determine whether there is attention to me, that is, whether there is an event of type type in the message queue, if not, return directlyif (!this.accounts[key])return; //Break out of the loop directly// Determine if there is a callback parameterif (!callback) { // If there is no callback, delete the entire eventthis.accounts[key] = undefined;}else{// If there is a callback, just delete the callback message (filter out this method)this.accounts[key] = this.accounts[key].filter((item) => item !== callback);}}//Intermediate agent, manage alllet pubsub=new pubSub();//subscription//Dalong pays attention to me, which is equivalent to binding an event to Dalong. When I publish an article, I will notify Dalong.let a=function follow1(content){console.log(content,'Dalong received a message from my published article');}pubsub.subscribe('my account', a)let b=function follow2(content){console.log(content,'Xiaolong received a message from my published article');}pubsub.subscribe('my account',b)let c=function follow3(content){console.log(content,'Dalong received a message from my published article');}pubsub.subscribe('my account',c);// remove people who follow mepubsub.remove('My Account',c);//release//Information release, only people who follow my account will push the information of my newly published articles in real timepubsub.publish('My Account', 'Happy Mid-Autumn Festival');// key is equivalent to an account, and callback is equivalent to the person who follows this account// pubsub.publish(key,callback);

class Observer {constructor() {this.message = {}; // message queue}// Delegate something to this person1, call person1's '$on' method// add content '$on' to message queue$on(type, callback) {// Determine whether there is this attribute (time type)if (!this.message[type]) {// If there is no such property, initialize an empty arraythis.message[type] = [];}// If there is this property, push a new callback after himthis.message[type].push(callback);}// delete the contents of the message queue$off(type, callback) {// Determine whether there is a subscription, that is, whether there is an event of type type in the message queue, if not, return directlyif (!this.message[type])return;// Determine if there is a callback parameterif (!callback) { // If there is no callback, delete the entire eventthis.message[type] = undefined;}// If there is a callback, just delete the callback message (filter out this method)this.message[type] = this.message[type].filter((item) => item !== callback);}// Trigger the contents of the message queue$emit(type) {// Determine if there is a subscriptionif(!this.message[type]) return;// If there is a subscription, do a poll for the 'type' event (for loop)this.message[type].forEach(item=>{//Execute the callback function of each message one by oneitem();})}}function handlerA() {console.log('handlerA');}function handlerB() {console.log('handlerB');}function handlerC() {console.log('handlerC');}// use the constructor to create an instanceconst person1 = new Observer();person1.$on('buy', handlerA);person1.$on('buy', handlerB);person1.$on('buy', handlerC);//delete handlerC informationperson1.$off('buy',handlerC);console.log('person1 :>> ', person1);//Trigger buy eventperson1.$emit('buy');