Javascript 模式實(shí)例中介者模式

更新時(shí)間：2010年04月01日 00:47:06 作者：

頁面上，用戶會有很多的操作，每進(jìn)行一次操作我們需要去展示操作的結(jié)果，在這里我們有了一個(gè)問題，我們應(yīng)如何去展示不同的結(jié)果呢？

問題：

　　在頁面上，用戶會有很多的操作，每進(jìn)行一次操作我們需要去展示操作的結(jié)果，在這里我們有了一個(gè)問題，我們應(yīng)如何去展示不同的結(jié)果呢？在展示的過程中我們還要考慮當(dāng)頁面功能不斷的增加與修改，結(jié)果展示也不斷的增多，我們要用一個(gè)應(yīng)對這些變化最好的方法解決問題。

解決方法：

　　在115的網(wǎng)盤開發(fā)中就遇到了這樣的一個(gè)問題，經(jīng)過幾番的思考，決定了用如下的方式去解決這個(gè)問題，先看圖：

從圖中我們可以知道，會使用到一個(gè)中介專門去接收使用者的信息，再發(fā)送到相應(yīng)的展示主題，這樣我們就可以解決了展示方式不段改變的問題，如何去展示就是展示主題代碼問題了。

這個(gè)方法也就是我們平常說的中介者模式，如果想了解更多的可以去google或baidu一下中介者模式。

代碼：

　　好了，現(xiàn)在我符上一些代碼，如果大家更好的解決方案也可以給我個(gè)評論。

復(fù)制代碼代碼如下:

 
/* 
* 中介 
**/ 
var Mediator = function(){ 
var self = this; 
var _messageObj = {}; 
this.Register = function(key,obj){ 
//注冊中介 
_messageObj[key] = obj; 
}, 
this.Send = function(key,message){ 
//根據(jù)客戶Key發(fā)送信息給客戶 
if(_messageObj[key]){ 
_messageObj[key].Receive(message); 
} 
} 
} 

/* 
* 客戶父類 
**/ 
var MessageBase = function(key,mediator){ 
mediator.Register(key,this); //注冊中介 
} 

/* 
* 自由主題1 
**/ 
var MessageObj1 = function(key,mediator){ 
MessageBase.call(this,key,mediator); //繼承父類 
this.Receive = function(message){ 
//接收中介消息 
alert("Object1 " + message); 
} 
} 

/* 
* 自由主題2 
**/ 
var MessageObj2 = function(key,mediator){ 
MessageBase.call(this,key,mediator); //繼承父類 
this.Receive = function(message){ 
//接收中介消息 
alert("Object2 " + message); 
} 
} 

var med; //中介者 
var init = function(){ 
//客戶代碼 
med = new Mediator(); 
new MessageObj1("m1",med); 
new MessageObj2("m2",med); 
}; 

window.onload = function(){ 
init(); 
} 

使用方法：

復(fù)制代碼代碼如下:

 
<a href="javascript://" onclick="med.Send('m1','Good');">test1</a> 
<a href="javascript://" onclick="med.Send('m2','GoodBoy');">test2</a> 

演示代碼:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無標(biāo)題文檔</title> <script type="text/javascript">     /*     * 中介     **/     var Mediator = function(){         var self = this;         var _messageObj = {};         this.Register = function(key,obj){             //注冊中介             _messageObj[key] = obj;         },         this.Send = function(key,message){             //根據(jù)客戶Key發(fā)送信息給客戶             if(_messageObj[key]){                 _messageObj[key].Receive(message);             }         }     }          /*     * 客戶父類     **/     var MessageBase = function(key,mediator){         mediator.Register(key,this);    //注冊中介     }          /*     * 客戶1     **/     var MessageObj1 = function(key,mediator){         MessageBase.call(this,key,mediator); //繼承父類         this.Receive = function(message){             //接收中介消息             alert("Object1 " + message);         }     }          /*     * 客戶1     **/     var MessageObj2 = function(key,mediator){         MessageBase.call(this,key,mediator); //繼承父類         this.Receive = function(message){             //接收中介消息             alert("Object2 " + message);         }     }          var med; //中介者     var init = function(){         //客戶代碼         med = new Mediator();         new MessageObj1("m1",med);         new MessageObj2("m2",med);     };          window.onload = function(){         init();     } </script> </head> <body> <p>中介者模式：用一個(gè)中介對象來封裝一系列的對象交互。中介者使各對象不需要顯式地相互引用，從而使其耦合松散，而且可以獨(dú)立地改變它們之間的交互。 </p>  <a href="javascript://" onclick="med.Send('m1','Good');">test1</a> <a href="javascript://" onclick="med.Send('m2','GoodBoy');">test2</a> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

您可能感興趣的文章: