Javascript 中介者模式執行個體

來源:互聯網
上載者:User

問題:

  在頁面上,使用者會有很多的操作 ,每進行一次操作我們需要去展示操作的結果,在這裡我們有了一個問題,我們應如何去展示不同的結果呢?在展示的過程中我們還要考慮當頁面功能不斷的增加與修改,結果展示也不斷的增多,我們要用一個應對這些變化最好的方法解決問題。

解決方案:

  在網盤開發中就遇到了這樣的一個問題,經過幾番的思考,決定了用如下的方式去解決這個問題,先看圖:

我們可以知道,會使用到一個中介專門去接收使用者的資訊,再發送到相應的展示主題,這樣我們就可以解決了展示方式不段改變的問題,如何去展示就是展示主題代碼問題了。

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

代碼:

  好了,現在我符上一些代碼,如果大家更好的解決方案也可以給我個評論。

複製代碼 代碼如下:/*
* 中介
**/
var Mediator = function(){
var self = this;
var _messageObj = {};
this.Register = function(key,obj){
//註冊中介
_messageObj[key] = obj;
},
this.Send = function(key,message){
//根據客戶Key發送資訊給客戶
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();
}

使用方法: 複製代碼 代碼如下:<a href="javascript://" onclick="med.Send('m1','Good');">test1</a>
<a href="javascript://" onclick="med.Send('m2','GoodBoy');">test2</a>

下載:http://xiazai.jb51.net/200912/yuanma/js_zhongjie.rar

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.