Javascript 中介者模式實例
更新時間：2009年12月16日 22:24:13 作者：
在頁面上，用戶會有很多的操作 ，每進(jìn)行一次操作我們需要去展示操作的結(jié)果，在這里我們有了一個問題，我們應(yīng)如何去展示不同的結(jié)果呢？
問題：
在頁面上，用戶會有很多的操作 ，每進(jìn)行一次操作我們需要去展示操作的結(jié)果，在這里我們有了一個問題，我們應(yīng)如何去展示不同的結(jié)果呢？在展示的過程中我們還要考慮當(dāng)頁面功能不斷的增加與修改，結(jié)果展示也不斷的增多，我們要用一個應(yīng)對這些變化最好的方法解決問題。
解決方法：
在網(wǎng)盤開發(fā)中就遇到了這樣的一個問題，經(jīng)過幾番的思考，決定了用如下的方式去解決這個問題，先看圖：
從圖中我們可以知道，會使用到一個中介專門去接收使用者的信息，再發(fā)送到相應(yīng)的展示主題，這樣我們就可以解決了展示方式不段改變的問題，如何去展示就是展示主題代碼問題了。
這個方法也就是我們平常說的中介者模式，如果想了解更多的可以去google或baidu一下中介者模式。
代碼：
好了，現(xiàn)在我符上一些代碼，如果大家更好的解決方案也可以給我個評論。
復(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>
下載：http://xiazai.jb51.net/200912/yuanma/js_zhongjie.rar
相關(guān)文章
Bootstrap每天必學(xué)之警告框插件,使用警告框（Alert）插件，您可以向所有的警告框消息添加可取消（dismiss）功能，感興趣的小伙伴們可以參考一下2016-04-04
這篇文章主要介紹了js獲取及判斷鍵盤按鍵的方法,涉及JavaScript鍵盤事件的獲取及鍵值的判定技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-12-12
下面小編就為大家?guī)硪黄唵握務(wù)勗鷍s的math對象。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
Javascript實現(xiàn)獲取及設(shè)置光標(biāo)位置的方法
這篇文章主要介紹了Javascript實現(xiàn)獲取及設(shè)置光標(biāo)位置的方法,涉及javascript針對頁面光標(biāo)位置的相關(guān)操作技巧,具有良好的兼容性,非常簡單實用,需要的朋友可以參考下2015-07-07
var?let?const關(guān)鍵字之間的區(qū)別及使用場景示例詳解
這篇文章主要為大家介紹了var?let?const關(guān)鍵字之間的區(qū)別及使用場景示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-12-12
npm install 、npm install --save 和&n
這篇文章主要介紹了npm install 、npm install --save 和 npm install --save-dev的區(qū)別介紹,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-04-04
javascript實現(xiàn)的一個帶下拉框功能的文本框
這篇文章主要介紹了javascript實現(xiàn)的一個帶下拉框功能的文本框,需要的朋友可以參考下2014-05-05
下面小編就為大家?guī)硪黄迷鶭S對AJAX做簡單封裝的實例代碼。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-07
用javascript實現(xiàn)截取字符串包含中文處理的函數(shù)
一直不知道js可以截取中文字符，呵呵，原理用正則表達(dá)式，匹配中文的長度，中文算兩個，因為算一個，是個好東西，推薦大家收藏2008-04-04
JavaScript中數(shù)組的sort()方法主要用于對數(shù)組的元素進(jìn)行排序。其中，sort()方法有一個可選參數(shù)。接下來通過本文給大家介紹數(shù)組Array.sort()排序的方法，需要的朋友參考下2017-03-03