On the classic design pattern of JavaScript--observer pattern

Introduction to the Observer pattern:

The Observer pattern is also known as the Publish subscription pattern. is a one-to-many dependency, that is, when the state of an object (the message publisher) changes, other objects (subscribers) automatically perform their actions when they receive the message.

　　Objects that are involved in this pattern:　

1. Message issuer (one)
1.1 The message Publisher will first establish an array of notifications arr, which is used to store the Subscriber information object (there is a callback function for the observer who subscribes to the message obj and the obj corresponding operation callback)
1.2 Message Publisher Role Responsibilities:
(1) Develop a method to subscribe to this message

(2) How to put the unsubscribe message into place
(3) News release
2. Subscribers (numerous): When a Subscriber triggers an event, the message Publisher invokes the subscription method (at this point the Subscriber will [pass in the callback function and the Subscriber object itself] and be added to the notification array).

　　Introduction to Drawing:

Code Explanation:

　　Create Observer pattern

1. Create a message Publisher object PubSub

var PubSub = {

1.1 Creating an array of subscriber information

Subscriber: [],//stores an array of subscriber information, including the subscriber and its behavior function (callback function)

1.2 How to add a subscription

Addsub:function (callback, obj) {

This.subscriber.push ({ctx:obj,cb:callback});//(The Subscriber Information "subscriber and its behavior function (callback function)" is added to the Subscriber information array as an object)

},

1.3 Ways to unsubscribe (traverse the Subscriber information array to remove incoming subscriber information)

Cancelsub:function (obj) {

for (var i = 0; i<this.subscriber.length; i++) {

if (this.subscriber[i].ctx = = = obj) {

This.subscriber.splice (i,1);

Break

}

}

},

1.4 Publish messages (traverse, pass data to each Subscriber object, and then the Subscriber object each calls its own behavior function)

Pub:function (data) {

for (var i = 0; i < this.subscriber.length; i++) {

When the message is posted, the message publisher passes the message (data to the callback function of each object and calls the callback function)

This.subscriber[i].cb.call (this.subscriber[i].ctx, data);///NOTE: Here the callback function for each Subscriber object is called here, The this point within the callback function itself has been changed (it should have pointed to the instance object, obj (subscriber, for example, S1), where it is pointed to the this.subscriber[i] "that contains the Subscriber object and its method"). So we need to call to change the callback function THIS.SUBSCRIBER[I].CB internal this point, so that it points to this.subscriber[i].ctx, so it cannot be written as such THIS.SUBSCRIBER[I].CB ( data);

}

}

};

2. Subscribers ' subscription and cancellation

Subscription

Document.queryselector ("#btnBJ"). onclick = function () {

Pubsub.addsub (FN, S3);//When the Subscribe button is clicked, the message Publisher invokes the subscription method

this.disabled = true;//Subscription button is not available

Document.queryselector ("#btnBJcancel"). Disabled = false;//Unsubscribe button available

};

Cancel Subscription

　　Document.queryselector ("#btnBJcancel"). onclick = function () {

Pubsub.cancelsub (S3);//When you click the Unsubscribe button, the message Publisher invokes the Unsubscribe method

This.disabled = true;

Document.queryselector ("#btnBJ"). Disabled = false;

}

On the classic design pattern of JavaScript--observer pattern