Observer mode for JavaScript design mode (publisher subscriber mode)

The observer pattern (also known as the publish-subscriber pattern) is one of the most commonly used patterns. It is widely used in many languages.

div.onclick  =  function click (){

alert (  " click' )

}

As long as you subscribe to the div click event, the function click will be triggered when div is clicked.

So what is the observer model? Let's look at the observer model in life.

There is a famous saying in Hollywood, "don't call me, I'll call you", which explains the origin and origin of an observer pattern. Where "I" is the publisher and "you" is the subscriber.

For example, when I come to the company for an interview, every interviewer will say to me after the interview: "please leave your contact information, we will let you know if there is any news. Here "I" is the subscriber and the interviewer is the publisher. So I don't have to ask every day or every hour for the interview results. The communication is in the hands of the interviewer. I just need to provide a contact information.

The observer pattern is a good way to decouple the two modules. Let's say I'm working on an html5 game in a team. I finished the Gamer and Map modules, and my colleague A wrote an image loader, loadImage.

The code of loadImage is as follows:

loadImage(  imgAry,  function(){

Map.init();

Gamer.init();

} )

When the image is loaded, render the map and execute the game logic.

loadImage(  imgAry,  function(){

Map.init();

Gamer.init();

Sount.init();

} )

So I called him and said, hey, where is your loadImage? Can I change it? Is there any side effects?

loadImage.listen(  " ready', function(){

Map.init();

})

loadImage.listen(  " ready', function(){

Gamer.init();

})

loadImage.listen(  " ready', function(){

Sount.init();

})

After loadImage is done, it doesn't care what happens in the future because its work is done.

loadImage.trigger(  " ready' );

The interviewer doesn't care where the candidates will eat when they receive the results of the interview. He is only responsible for gathering the candidates' resumes together. When the interview results come out, follow the phone number on the resume and be notified one by one.

The process is simple: the interviewer throws the resume into a box, and then the interviewer calls the results one by one at the right time with the resume in the box.

Events = function() {

var listen, log, obj, one, remove, trigger, __this;

obj = {};

__this = this;

listen = function( key, eventfn ) {  //Put your resume in the box, and the key is your contact information
var stack, _ref;  //Stack is a box 

stack = ( _ref = obj[key] ) != null ? _ref : obj[ key ] = [];

return stack.push( eventfn );

};

one = function( key, eventfn ) {

remove( key );

return listen( key, eventfn );

};

remove = function( key ) {

var _ref;

return ( _ref = obj[key] ) != null ? _ref.length = 0 : void 0;

};

trigger = function() {  //The interviewer called to inform the candidate
var fn, stack, _i, _len, _ref, key;

key = Array.prototype.shift.call( arguments );

stack = ( _ref = obj[ key ] ) != null ? _ref : obj[ key ] = [];

for ( _i = 0, _len = stack.length; _i < _len; _i++ ) {

fn = stack[ _i ];

if ( fn.apply( __this,  arguments ) === false) {

return false;

}

}

return {

listen: listen,

one: one,

remove: remove,

trigger: trigger

}

}

Finally, the observer mode is used to make a small application of adult TV station.

//Subscriber 

var adultTv = Event();

adultTv .listen(   " play',  function( data ){

alert (  "Whose movie is it today?"  + data.name );

});

//

adultTv .trigger(   " play',  {  ' name':  'Mr Bush ' }  )