Vue. Js implementation principle – subscriber, publisher mode

En It is well known that the vue2.x version is intercepted by get of object.defineProperty (), sent by set,

This is just a superficial understanding of the JavaScript subscriber/publisher model.

First, take a look at the subscriber/publisher model.

The W3C defines it this way

You can think of it as a graph

So let’s first implement the prototype chain

// Define a function to carryfunction publisher() {// Define an empty array to receive the data passed this.arr = []; } publish. prototype = {// subscribe:function(fn) {// The subscription will'Subscriber'This.arr. Push (fn)}, // unSubscribe:function(fn) {// Filter subscribers if'Subscriber'Arr = this.arr. ForEach (function (el) {
            if(el ! == fn) {returnel; }})}, // upDate the subscription:function(o, thisObj) {/ / o = > residual subscriber var scoped = thisObj | | window; / / or var scoped = thisObj | | this. The subscribe; this.fns.forEach (functionEl.call (scoped,o)})}} // Create an instance var newSubScribe = new publisher () ; // Create a subscriberfunction(data) {console.log (' first subscriber${data}Subscribed to. } // create a second subscriber var newUser =function(data) {console.log (' second subscriber${data}Subscribed to. ')} // bind a subscription to newSubScribe. Subscribe (user); newSubScribe.subscribe(newUser); NewSubScribe. UpDate (' Mr. Z '); // unSubscribe the first subscriber newSubScribe. UnSubscribe (user); // newSubScribe. UpDate (' Ms. Z '); /* Now let's look at the output */Copy the code

As you can see, it’s already implemented, the first subscriber is gone, there’s only the second subscriber left, and of course there are many ways to implement this, but this is just one of them using the prototype chain

implementation