Simplified understanding: publish and subscribe

We wrote about the publish subscribe model not long ago ：

//  Publisher  Publisher
class Pub {
 constructor() {
 this.deps = [];
 }
 addDep(dep) {
 this.deps.push(dep);
 }
 publish(dep) {
 this.deps.forEach(item => item === dep && item.notify());
 }
}
//  subscriber  Subscriber
class Sub {
 constructor(val) {
 this.val = val;
 }

 update(callback) {
 callback(this.val)
 }
}

//  Dispatching center
class Dep {
 constructor(callback) { //  The core is this  callback  function ;
 this.subs = [];
 this.callback = callback;
 }
 addSub(sub) {
 this.subs.push(sub);
 }
 notify() {
 this.subs.forEach(item => item.update(this.callback));
 }
}

let pub = new Pub() //  Instantiate a publisher

//  Instantiate a dispatch center , Pass in a function for processing data ;
const dep1 = new Dep((data) =>
 console.log(' This is the dispatch center , Let me deal with the message first , Then send it to  ===》》》', data)) 

let sub1 = new Sub(" subscriber 1") //  Instantiate subscribers 1
let sub2 = new Sub(" subscriber 2") //  Instantiate subscribers 2

pub.addDep(dep) //  The publisher binds to the dispatching center

dep.addSub(sub1) //  Add subscriber to dispatch center 1
dep.addSub(sub2) //  Add subscriber to dispatch center 2

pub.publish(dep) //  The publisher pushes the message to the dispatcher

//  This is the dispatch center , I'll deal with the message first   subscriber 1
//  This is the dispatch center , I'll deal with the message first   subscriber 2


But look at it this way , It seems a little too complicated ：

• Publishers need to have two methods , Bind dispatcher  Dep, Push the message to the dispatcher ;

• The dispatcher also has two methods , Binding subscribers  Sub, Push messages to subscribers ;

• Subscribers have a way , Execute function ;

The most important thing is to have a callback function , As the input parameter of the dispatching center , It will be passed on to  Sub  perform ;

therefore , This article brings  

simplify

  To understand ：

For example, the weather forecast ： Weather stations need to release information ; Construction site 、 The shipping industry 、 Ordinary tourists need this information ;

If we directly and strongly bind this notification relationship , namely ：

function weatherWarning(weatherStatus){
 if(weatherStatus==='warning'){ //  Bad weather
 buildingsite.stopwork() //  Work stoppage
 ships.mooring()　//  The ship is suspended
 tourists.canceltrip() //  The tour is cancelled
 }
}

weatherWarning("warning") //  Issue a bad weather notice


picture source

To do so , Is there anything wrong ？

It has to be the two of them ： Something's wrong ！ Against the principle of opening and closing 、 Against the principle of single responsibility ;

Against the principle of opening and closing ： In the above example , If a new group needs weather information , Keep revising  weatherWarning  function ;

Against the principle of single responsibility ： In the above example , Any group code execution error , Will affect  weatherWarning  Downward execution of function body code ;

therefore , It has to be changed , So it was introduced ： Dispatching center  Dep, This is called  EventEmit

picture source

The dispatching center binds the groups that need information , That is, bind the subscriber , Then the dispatching center releases the information to the subscribers ;

const EventEmit = function() { //  Dispatching center
 this.events = {};
 this.on = function(name, cb) { //  Bind subscriber
 if (this.events[name]) {
 this.events[name].push(cb); //  Support the same subscriber to perform multiple things
 } else {
 this.events[name] = [cb];
 }
 };
 this.trigger = function(name, ...arg) { //  Send a message
 if (this.events[name]) {
 this.events[name].forEach(eventListener => {
 eventListener(...arg);
 });
 }
 };
};

let weatherEvent = new EventEmit() //  Instantiate a dispatch center

weatherEvent.on('warning', function () { //  Bind the relation of publishing notification
 // buildingsite.stopwork()
 console.log('buildingsite.stopwork()')
})

weatherEvent.on('warning', function () { //  Bind the relation of publishing notification
 // ships.mooring()
 console.log('ships.mooring()')
})

weatherEvent.on('warning', function () { //  Bind the relation of publishing notification
 // tourists.canceltrip()
 console.log('tourists.canceltrip()')
})

weatherEvent.trigger('warning') //  Release the news


When there are one to many dependencies in the project , And each module is relatively independent , Consider using the publish subscribe pattern to refactor your code , That is, the dispatching center will bind 、 notice .

Some workers may question ： How is this different from what I said before 【 Observer mode 】 Looks so much like ？

class Subject{//  Observed
 constructor(){
 this.observers=[]
 }
 add(observer){
 this.observers.push(observer)
 }
 notify(weatherStatus){
 this.observers.forEach(i=>i(weatherStatus))
 }
}

let sub = new Subject()

sub.add((reason)=>{
 // buildingsite.stopwork()
 console.log(' Work stoppage , Because of the weather ：',reason)
}) 
sub.add((reason)=>{
 // ships.stopwork()
 console.log(' The ship is suspended , Because of the weather ：',reason)
})
sub.add((reason)=>{
 // tourists.canceltrip()
 console.log(' The tour is cancelled , Because of the weather ：',reason)
})

sub.notify("warning") // sub  Release the news

//  Work stoppage , Because of the weather ： warning
//  The ship is suspended , Because of the weather ： warning
//  The tour is cancelled , Because of the weather ： warning


you 're right , We can simplify our understanding ： The observer pattern is part of the publish subscribe pattern , What if you think of the observer as a dispatch center , This is the publish subscribe mode , If you think of the subscription center as an observer , That's the observer pattern ; The two can be transformed into each other .

Observer mode ：A  On to  ob1、ob2、ob3, One to many ;

Publish subscribe mode ： A  On to  Dep ,Dep  Push to  ob1、ob2、ob3, one-on-one , More to more ;

Publish subscribe mode should be the most commonly used design mode by our front-end developers ：

element.addEventListener('click', function(){ 
 //... 
})


<hr>

OK, The above is the sharing of this article . Like, follow the comments , Help good writing

I'm Anthony nuggets   100  Popular front-end technology bloggers with a reading volume of 10000   INFP  Writing personality persistence  1000  Japanese Geng Wen    Pay attention to me , Spend the long programming years with you