[Design mode] The observer pattern of Javascript

Observer pattern: A definite discussion

Defines a one-to-many relationship between objects, when an object state changes (generally referred to as the observer), objects that depend on the object are notified, and updated;

Observer Pattern: Description

1. The Observer pattern is the behavior pattern, also known as: publish-subscribe mode, model-view mode, source-listener mode, slave module;

2. The composition of the observer pattern during the Polygon object process:

1>. Abstract theme role: In this role, the definition maintains a management set of the list of observers, a set of arrays to store, and defines the interface to some base, proportional to the method of adding and deleting the observer;

2>. Specific topic role: This role, for the customer, the specific business status data interaction, and do some processing, and then notify each observer to update themselves;

Abstract with the specific topic of some common method interface, if the Add|delete or notified method, in which method is not fixed; Add and delete can also appear in specific theme roles;

3>. Abstract Observer role: Define a unified interface for all observers, which is called the update interface;

4>. Specific Observer roles: implementing the respective update methods of the abstract viewer role;

3. Execution Process:

　　

4. Observer mode-structure diagram:

　　

5. Scene Instance Description:

1>. For example, the mother informed the children to eat, a family has one or two children, the two kids are a little naughty, like running around, the mother cooked the meal, but do not see the child's figure, called also did not see the child response back, so mother in the child has installed a notice equipment, one to the rice cooked, Mom on a notification device press a button, you can make a sound on the device of the child: ' rice cooked, hurry back to eat ', and then the child can immediately come back to eat the warm meal just on the table;

2>. The event monitoring mechanism of Java includes: Event source, Event listener, event object;

Event listeners are equivalent to observers, and observers are used to provide a uniform update method;

Event source and event object equal to the observer (specific Subject Object)

6. The principle that the Observer pattern applies: The single nature principle of the object, the opening and closing principle, and so on, the opening and closing principle is embodied in the face of the object code mentioned to the interface to the programming principle, so that the program objects can be better re-use and decoupling;

7. The Observer pattern consists mainly of the observed object (target object, specific object, subject), observer (subscriber, Listener), event (Update method);

8. When the Update method of a specific observer object is received as a normal type of data, such as a string, it is generally referred to as "push" mode;

When the Update method is passed, the observer (the specific Subject object) is generally referred to as the "pull" mode;

Source instance

1. Theme objects:

functionSubject () { This. Observers = [];} Subject.prototype.add=function(Observer) { This. Observers.push (Observer);} Subject.prototype.remove=function(Observer) {varme = This;  for(IDXinchme. Observers) {if(Me.) OBSERVERS[IDX] = =observer) {me. Observers[idx].splice (IDX,1);  Break; }    }}//Push ModeSubject.prototype.notifyState =function(info) {varme = This;  for(IDXinchme. Observers) {me. Observers[idx].update (Info)}}//Connection ModeSubject.prototype.notifyObservers =function(subject) {varme = This;  for(IDXinchme. Observers) {me. Observers[idx].updatesubject (subject)}}

2. Specific Subject Object

function ConcreteSubject () {    subject.call(thisfunction() {    var state = ' info ';      This . Notifystate (state);     this. Notifyobservers (this);}

3. Observer Object A

function Concreteobservera () {    thisfunction(info) {        console.log (' A Observer ' + Info);    }

　　 This function (subject) {        console.log (' A Observer object ');    } 

}

4. Observer Object B

function Concreteobserverb () {    thisfunction(info) {        console.log (' B Observer ' +　　info);    }  Thisfunction(subject) {        Console.log (' B Observer object ');}    }

5. Method of Use;

var New ConcreteSubject (); var New Concreteobservera (); var New Concreteobserverb (); Subject.add (aobserver); Subject.add (bobserver); Subject.operate ();

Other Notes

Theme object can be a variety of different exist, that is, the above mother called the children eat example, a community, a small village will have a number of mothers, a mother will have one or a few children;

The mother is the observer, the children are observers, they are waiting for the mother to actively push the message to inform them to eat, but the specific way of children home is not the same, some immediately run back, some slow go home;

Mother is an object class, this object class when cooking rice cooked, will be executed operate this method, to inform the child's observation class object, and then update their own home, in the object-oriented principle, the class requires functions of a single function, which helps the application of the expansion of the situation and decoupling;

[Design mode] The observer pattern of Javascript