Home > Developer > JavaScript
Simple Example of publishing/subscription mode in JavaScript and javascript subscription
The observer mode is also called Subscribe/Publish (Publish/Subscribe mode) in many articles ). In the book Javascript design patterns, there are some differences between the two patterns. The original words are as follows:
1. The Observer mode requires that the Observer who wants to receive the topic notification must subscribe to the content change event.
2. The Subscribe/Publish mode uses a topic/event channel between the subscriber and the publisher. The event system allows the Code to define specific events of an application. The event can pass custom parameters that contain the values required by the subscriber. The purpose is to avoid the dependency between the subscriber and the publisher.
Unlike the Observer mode, it allows any subscriber to execute an appropriate event handler to register and receive notifications from the publisher.
Okay, I'm not sure. Below is my understanding:
1. In the observer mode, the target object is responsible for maintaining the Observer. In the publish/subscribe mode, the publisher does not care about the subscriber. Instead, the publisher is responsible for dropping messages out of the subscriber.
2. In the observer mode, the observer must provide an interface, and then call this interface when the target object changes to make its status consistent with that of the target object. That is to say, all observers must have a unified interface (for example, the update method written in the previous article, which should be called by all methods ). In the publish/subscribe mode, a subscriber event is triggered not by such an interface, but by listening to a specific message (the message generally contains the name and parameters required by the subscriber). It can be understood that a subscriber is not a publisher, but a message pool. As long as there is a message in the message pool that it cares about, that is, a trigger event, no matter who published the message. The publisher and subscriber are decoupled.
Below is the implementation of the publishing/subscription mode in js. copy and paste it to the console and try it:
Copy codeThe Code is as follows:
Var pubsub = (function (){
Var q = {}
Topics = {},
SubUid =-1;
// Publish a message
Q. publish = function (topic, args ){
If (! Topics [topic]) {return ;}
Var subs = topics [topic],
Len = subs. length;
While (len --){
Subs [len]. func (topic, args );
}
Return this;
};
// Subscribe to events
Q. subscribe = function (topic, func ){
Topics [topic] = topics [topic]? Topics [topic]: [];
Var token = (++ subUid). toString ();
Topics [topic]. push ({
Token: token,
Func: func
});
Return token;
};
Return q;
// Unsubscribe and stop writing. traverse the topics. Then, save the token returned before deleting the specified element.
})();
// Triggered event
Var logmsg = function (topics, data ){
Console. log ("logging:" + topics + ":" + data );
}
// Listen to the specified message 'msgname'
Var sub = pubsub. subscribe ('msgname', logmsg );
// Publish the message 'msgname'
Pubsub. publish ('msgname', 'Hello World ');
// Publish the unmonitored message 'msgname1'
Pubsub. publish ('anothermsgname', 'Me too! ');
<Html>
<Head>
<Script language = "javascript">
<! --
Function show ()
{
// Alert(registry.doc ument. myform. username. value );
If (document. myform. username. value = "")
{
Alert ("NO Complete ");
Alert ("4444444444 ");
Return false;
}
Else
{
Alert ("OK ");
Return true;
}
}
// -->
</Script>
</Head>
<Body>
<Form name = "myform" action = "test.html" method = "post">
<Input type = "input" name = "username" value = ""/>
<Input type = "submit" name = "mybutton" value = "click" onClick = "return show ()"/>
</Form>
</Body>
</Html>
Input the parameter value in the callback function of the jQuery subscription publishing message mode to find the javascript solution.
Hello !!
There are also deviations in the book ···
// Release $. publish ("test", "a", "bds", "csdf", "dsdf"); changed to $. publish ("test", ["a", "bds", "csdf", "dsdf"]);
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
