See many online blog posts about the observer pattern and release a subscription model, found a lot of people think the observer pattern is to release a subscription model, after further study and understanding, I think the observer pattern and release a subscription model, there are some difference between the following talk about my understanding of the observer pattern and release a subscription model “PS: welcome each god correct”.

Observer Mode

The Observer pattern means that an object (Subject) maintains a series of objects (observers) that depend on it, and the Subject object notifies a series of Observer objects to update when the relevant state changes.

In the Observer pattern, the Subject object has methods to add, delete, notify a set of observers, and so on, while the Observer object has methods to update, and so on.

After a series of Observer objects have been added to the Subject object, the Subject object maintains the series of Observer objects and notifies the series of updated Observer objects when the relevant state changes.

Function Subject(){this.observers = []; } Subject.prototype = {add(observer){// Add this.observers.push(observer); }, notify(){// inform var observers = this.observers; for(var i = 0; i < observers.length; i++){ observers[i].update(); }}, remove(observer){// Delete var observers = this. for(var i = 0; i < observers.length; i++){ if(observers[i] === observer){ observers.splice(i,1); }}},} function Observer(name){this.name = name; } observer.prototype = {update(){// update console.log('my name is '+this.name); } } var sub = new Subject(); var obs1 = new Observer('ttsy1'); var obs2 = new Observer('ttsy2'); sub.add(obs1); sub.add(obs2); sub.notify(); // My name is ttsy1, my name is ttsy2Copy the code

In the above code, we create a Subject object and two Observer objects, and notify these two objects with the Subject object’s notify method when the relevant state changes. The two Observer objects are updated through the update method.

After a series of Observer objects have been added to the Subject object, you can also remove a dependency on an Observer object by using the remove method.

var sub = new Subject();
var obs1 = new Observer('ttsy1');
var obs2 = new Observer('ttsy2');
sub.add(obs1);
sub.add(obs2);
sub.remove(obs2);
sub.notify();  //my name is ttsy1
Copy the code

Publisher && Subscriber

The publish/subscribe mode refers to that the Subscriber that wants to receive notifications subscribs to a topic through custom events based on a topic, and the Publisher that publishes events notifishes each Subscriber object that subscribs to the topic by publishing topic events.

Const pubSub = {list:{}, subscribe(key,fn){// subscribe if (! this.list[key]) { this.list[key] = []; } this.list[key].push(fn); }, publish(){// publish const arg = arguments; const key = Array.prototype.shift.call(arg); const fns = this.list[key]; if(! fns || fns.length<=0) return false; for(var i=0,len=fns.length; i<len; i++){ fns[i].apply(this, arg); }}, unSubscribe(key) {// delete this. List [key]; }}; Pubsub.subscribe ('name', (name) => {console.log('your name is' + name); }); pubSub.subscribe('sex', (sex) => { console.log('your sex is ' + sex); }); Pubsub.publish ('name', 'ttsy1'); // your name is ttsy1 pubSub.publish('sex', 'male'); // your sex is maleCopy the code

The above code subscribs to events based on name and sex topics, and publishes by passing in parameters of custom events through name and sex topics, eventually triggering custom events for a particular topic.

You can unSubscribe from a particular topic using the unSubscribe method.

pubSub.subscribe('name', (name) => { console.log('your name is ' + name); }); pubSub.subscribe('sex', (sex) => { console.log('your sex is ' + sex); }); pubSub.unSubscribe('name'); pubSub.publish('name', 'ttsy1'); Publsub.publish ('sex', 'male'); // your sex is maleCopy the code

Observer vs. publish/subscribe

Both the Observer pattern and the Publish/subscribe pattern define a one-to-many dependency that updates when the related state changes.

The difference is that in the Observer pattern, a series of Observer objects that depend on the Subject object can only perform the same specific update method after being notified, whereas in the publish/subscribe pattern, different custom events can be performed based on different topics. The publish-subscribe model is relatively more flexible than the observer model.

I think the observer pattern and the publish-subscribe pattern are essentially the same idea, and the publish-subscribe pattern can be seen as an advanced version of the Observer pattern.

A design pattern is just an idea, and a certain design pattern can be implemented in many different ways, each of which has its own advantages and disadvantages. The specific implementation mode needs to be based on different business scenarios. These are some of the things I’ve learned about the observer pattern and the publish/subscribe pattern.