Concept of patterns

Recently, these two questions were frequently asked by my friends in the interview. I dare to share my understanding with you. I will take the “official explanation” + “plain English” approach.

If you are familiar with Vue, you know that Vue uses the “observer mode” to notify views of updates, and the “publish and subscribe” $ON,$emit to implement custom events, so it is important to understand the relationship between the two.


Observer mode: an object (observer) subscribes to another object (topic), which triggers events within the observer when the topic is activated.

Plain words explanation: when go to you go to the hospital dozen condole bottle (some place call dozen intravenous drip, be so rigorous) of time, the doctor should observe the change of condole bottle, when quick dozen finish, be about to inform the doctor to take needle. Here the doctor is the Obeserver and the flask is the observed/subject.

     class Subject { // Observed data -- flask
           constructor(name=" cicadas "){               this.state = 100;
               this.name = name;
               this.obs = [] // There will be multiple observers
 }  addObs(ob){  this.obs.push(ob)  }  setState(state){ // A method to change the state  this.state = state  // To tell the observer to do something, -- pull the needle  this.obs.forEach((ob) = >{  ob.update(this) // Let the observer do the update  })  }  }   class Obeserver{ // The observer -- the doctor   constructor(name){  this.name = name;  // Is it possible to record what data is observed in the observer (flask)  }  update(subject){  // It is also possible for doctors to observe multiple injections  if(! subject.state) { console.log(`The ${this.name}Received notice:${subject.name}I'm done with the bottle! `)  }else {  console.log(` The ${this.name}Received notice:${subject.name}Bottle quantity of:${subject.state}! `)  }   }   }  var zhiliao = new Subject();  var hushi = new Obeserver("Nurse");  var yisheng = new Obeserver("The doctor")  zhiliao.addObs(hushi) // Put the observer in the observed place  zhiliao.addObs(yisheng)  zhiliao.setState(50) Copy the code

Publish and subscribe: subscribers register the event they want to subscribe to the dispatch center. When the publisher publishes the event to the dispatch center (that is, the event is triggered), the dispatch center schedules the processing code that subscribers register to the dispatch center.

Explanation in plain English: For example, in Vue, Vue instance ($bus) is the unified call center, we use $bus to $on a custom event myEvent is the publisher to publish an event to the dispatch center. Then $bus.$emit(myEvent) will emit the event and execute the corresponding callback. Ha ha, so twisty! For example, MAO 18 went to the post office to subscribe to newspapers, subscription to the Southern Metropolis daily, that southern metropolis daily is our publisher, when the release of new newspapers, the post office to inform all subscribers to take newspapers ah!

    
var Event = {
    _listeners: {},    
    / / add
    $on: function(type, fn) {
 if (typeof this._listeners[type] === "undefined") {  this._listeners[type] = [];  }  if (typeof fn === "function") {  this._listeners[type].push(fn);  }  return this;  },  / / triggers  $emit: function(type) {  var arrayEvent = this._listeners[type];  if (arrayEvent instanceof Array) {  for (var i=0, length=arrayEvent.length; i<length; i+=1) {  if (typeof arrayEvent[i] === "function") {  arrayEvent[i]({ type: type });  }  }  }  return this;  },  / / delete  $off: function(type, fn) {  var arrayEvent = this._listeners[type];  if (typeof type === "string" && arrayEvent instanceof Array) {  if (typeof fn === "function") {  for (var i=0, length=arrayEvent.length; i<length; i+=1) { if (arrayEvent[i] === fn){  this._listeners[type].splice(i, 1);  break;  }  }  } else {  delete this._listeners[type];  }  }  return this;  } };    Copy the code

Conclusion: Learning these two patterns is all about decoupling your code and keeping each individual object separate. Friend need from daily business scenarios to observe, such as paging plug-in, you can use the “release subscription” to click on each page number trigger a custom event ($emit), if you need to click on the page is the time to do some other can $on this event in the outside, the paging plugin we can encapsulate very well, You don’t have to pass in arguments or callbacks or anything like that.