Problem:
On the page, the user will have a lot of action, each operation we need to show the results of the operation, where we have a problem, how should we show different results? In the process of presentation we also have to consider when the page function constantly increase and change, the results show also constantly increase, we need to deal with these changes the best way to solve the problem.
Workaround:
In 115 of the network disk development encountered such a problem, after several times of thinking, decided to use the following way to solve the problem, first look at the picture:
From the diagram we can know, will use an intermediary dedicated to receive the user's information, and then sent to the corresponding display theme, so we can solve the display of the problem of no change, how to show is to show the subject code issues.
This method is what we usually say the intermediary mode, if you want to know more can go to Google or Baidu the intermediary mode.
Code:
OK, now I have some code, and if you have a better solution, you can give me a comment.
Copy Code code as follows:
/*
* Intermediary
**/
var mediator = function () {
var self = this;
var _messageobj = {};
This. Register = function (key,obj) {
Registration intermediary
_messageobj[key] = obj;
},
This. Send = function (key,message) {
Send information to customer according to customer key
if (_messageobj[key]) {
_messageobj[key]. Receive (message);
}
}
}
/*
* Customer Parent class
**/
var messagebase = function (key,mediator) {
Mediator. Register (Key,this); Registration intermediary
}
/*
* Free Theme 1
**/
var MessageObj1 = function (key,mediator) {
Messagebase.call (This,key,mediator); Inheriting a parent class
This. Receive = function (message) {
Receive mediation messages
Alert ("Object1" + message);
}
}
/*
* Free Theme 2
**/
var MessageObj2 = function (key,mediator) {
Messagebase.call (This,key,mediator); Inheriting a parent class
This. Receive = function (message) {
Receive mediation messages
Alert ("Object2" + message);
}
}
var Med; Intermediaries
var init = function () {
Customer Code
Med = new Mediator ();
New MessageObj1 ("M1", Med);
New MessageObj2 ("M2", med);
};
Window.onload = function () {
Init ();
}
How to use:
Copy Code code as follows:
<a href= "javascript://" onclick= "Med". Send (' M1 ', ' good '); " >test1</a>
<a href= "javascript://" onclick= "Med". Send (' m2 ', ' goodboy '); >test2</a>
Demo Code:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; Charset=utf-8 "/> <title> Untitled document </title> <script type=" Text/javascript "> * * Intermediary **/ var mediator = function () {var self = this; var _messageobj = {}; This. Register = function (key,obj) {//registered intermediary _messageobj[key] = obj; }, this. Send = function (key,message) {//Send information based on customer key to customer if (_messageobj[key]) {_MESSAGEOB J[key]. Receive (message); }}/* Customer parent class **/var messagebase = function (key,mediator) {mediator. Register (Key,this); Registration Intermediary} * * Customer 1 **/var MessageObj1 = function (key,mediator) {MessagEbase.call (This,key,mediator); Inherit the parent class this. Receive = function (message) {//Receive Mediation alert ("Object1" + messages); } * * Customer 1 **/var MessageObj2 = function (key,mediator) {Messagebase.call (this,k Ey,mediator); Inherit the parent class this. Receive = function (message) {//Receive Mediation alert ("OBJECT2" + messages); } var med; Mediator var init = function () {//client code med = new Mediator (); New MessageObj1 ("M1", Med); New MessageObj2 ("M2", med); }; Window.onload = function () {init (); } </script> </pead> <body> <p> Mediator mode: Encapsulates a series of object interactions with a mediation object. Intermediaries do not need to refer explicitly to each other, so that they are loosely coupled and can independently alter their interactions. </p> <!--usage--> test1 test2 </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
