Javascript 中介者模式實(shí)例
問(wèn)題：
在頁(yè)面上，用戶會(huì)有很多的操作 ，每進(jìn)行一次操作我們需要去展示操作的結(jié)果，在這里我們有了一個(gè)問(wèn)題，我們應(yīng)如何去展示不同的結(jié)果呢？在展示的過(guò)程中我們還要考慮當(dāng)頁(yè)面功能不斷的增加與修改，結(jié)果展示也不斷的增多，我們要用一個(gè)應(yīng)對(duì)這些變化最好的方法解決問(wèn)題。
解決方法：
在網(wǎng)盤開(kāi)發(fā)中就遇到了這樣的一個(gè)問(wèn)題，經(jīng)過(guò)幾番的思考，決定了用如下的方式去解決這個(gè)問(wèn)題，先看圖：
從圖中我們可以知道，會(huì)使用到一個(gè)中介專門去接收使用者的信息，再發(fā)送到相應(yīng)的展示主題，這樣我們就可以解決了展示方式不段改變的問(wèn)題，如何去展示就是展示主題代碼問(wèn)題了。
這個(gè)方法也就是我們平常說(shuō)的中介者模式，如果想了解更多的可以去google或baidu一下中介者模式。
代碼：
好了，現(xiàn)在我符上一些代碼，如果大家更好的解決方案也可以給我個(gè)評(píng)論。
/*
* 中介
**/
var Mediator = function(){
var self = this;
var _messageObj = {};
this.Register = function(key,obj){
//注冊(cè)中介
_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); //注冊(cè)中介
}
/*
* 自由主題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
- javascript設(shè)計(jì)模式 – 橋接模式原理與應(yīng)用實(shí)例分析
- 詳解JavaScript設(shè)計(jì)模式開(kāi)發(fā)中的橋接模式使用
- 深入理解JavaScript系列（44）：設(shè)計(jì)模式之橋接模式詳解
- javascript設(shè)計(jì)模式 – 中介者模式原理與用法實(shí)例分析
- 輕松掌握J(rèn)avaScript中介者模式
- javascript設(shè)計(jì)模式之中介者模式Mediator
- Javascript 模式實(shí)例 中介者模式
- JavaScript設(shè)計(jì)模式中的橋接和中介者模式
相關(guān)文章
談?wù)凧avaScript中super(props)的重要性
今天小編就為大家分享一篇關(guān)于談?wù)凧avaScript中super(props)的重要性，小編覺(jué)得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來(lái)看看吧2019-02-02
詳解JavaScript中Generator函數(shù)的使用
Generator 是 ES6 新增的一種函數(shù)類型，這篇文章主要來(lái)和大家詳細(xì)聊聊Generator函數(shù)的具體用法，文中的示例代碼講解詳細(xì)，感興趣的可以了解一下2023-06-06
關(guān)于ExtJS4.1:快捷鍵支持的問(wèn)題
本篇文章小編為大家介紹，關(guān)于ExtJS4.1 快捷鍵支持的問(wèn)題。需要的朋友參考下2013-04-04
Javascript封裝DOMContentLoaded事件實(shí)例
這篇文章主要介紹了Javascript封裝DOMContentLoaded事件實(shí)例,DOMContentLoaded是FF,Opera 9的特有的Event, 當(dāng)所有DOM解析完以后會(huì)觸發(fā)這個(gè)事件,需要的朋友可以參考下2014-06-06
利用momentJs做一個(gè)倒計(jì)時(shí)組件(實(shí)例代碼)
這篇文章主要介紹了利用momentJs做一個(gè)倒計(jì)時(shí)組件，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-12-12
鼠標(biāo)移動(dòng)到圖片名上,顯示圖片的簡(jiǎn)單實(shí)例
鼠標(biāo)移動(dòng)到名(wait.gif)上，顯示圖片，鼠標(biāo)移開(kāi)則不顯示圖片2013-07-07
JS實(shí)現(xiàn)省市縣三級(jí)下拉聯(lián)動(dòng)
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)省市縣三級(jí)下拉聯(lián)動(dòng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-04-04
關(guān)于動(dòng)態(tài)執(zhí)行代碼(js的Eval)實(shí)例詳解
下面小編就為大家?guī)?lái)一篇關(guān)于動(dòng)態(tài)執(zhí)行代碼(js的Eval)實(shí)例詳解。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08
js實(shí)現(xiàn)DIV的一些簡(jiǎn)單控制
js實(shí)現(xiàn)DIV的一些簡(jiǎn)單控制...2007-06-06
JavaScript ES6解構(gòu)運(yùn)算符的理解和運(yùn)用
在ES6屬性中新增了兩個(gè)屬性,分別是解構(gòu)和…運(yùn)算符,下面這篇文章主要給大家介紹了關(guān)于JavaScript ES6解構(gòu)運(yùn)算符的理解和運(yùn)用,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-10-10