Javascript 模式實(shí)例 中介者模式
更新時間：2010年04月01日 00:47:06 作者：
頁面上，用戶會有很多的操作 ，每進(jìn)行一次操作我們需要去展示操作的結(jié)果，在這里我們有了一個問題，我們應(yīng)如何去展示不同的結(jié)果呢？
問題：
在頁面上，用戶會有很多的操作 ，每進(jìn)行一次操作我們需要去展示操作的結(jié)果，在這里我們有了一個問題，我們應(yīng)如何去展示不同的結(jié)果呢？在展示的過程中我們還要考慮當(dāng)頁面功能不斷的增加與修改，結(jié)果展示也不斷的增多，我們要用一個應(yīng)對這些變化最好的方法解決問題。
解決方法：
在115的網(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>
演示代碼:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
您可能感興趣的文章:
相關(guān)文章
這篇文章主要介紹了JavaScript this使用方法圖解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-02-02
眾所周知JavaScript中有多種方法可以合并對象,下面這篇文章主要給大家介紹了關(guān)于javaScript合并對象的多種方式及知識擴(kuò)展,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02
在日常前端開發(fā)中,大屏項(xiàng)目是每個前端開發(fā)者必備技能,但是目前設(shè)備尺寸大小和分辨率都不相同,所以大屏適配成了一個頭疼的問題,所以下面這篇文章主要給大家介紹了關(guān)于前端大屏適配的三種解決方案,需要的朋友可以參考下2024-03-03
Util.js文件包含了一些工具函數(shù)，來幫助人們使用JavaScript數(shù)據(jù)（例如從服務(wù)器返回的數(shù)據(jù)）來更新Web頁面。有需要的小伙伴可以參考下2015-06-06
從多次測試結(jié)果看來，使用StringBuffer 可以節(jié)省50%以上的時間2008-12-12
如何使用瀏覽器擴(kuò)展篡改網(wǎng)頁中的JS?文件
這篇文章主要為大家介紹了如何使用瀏覽器擴(kuò)展篡改網(wǎng)頁中的JS文件實(shí)現(xiàn)解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
這篇文章主要介紹了簡單了解Ajax表單序列化的實(shí)現(xiàn)方法,隨著Ajax的出現(xiàn)，表單序列化已經(jīng)成為一種需求,在學(xué)習(xí)原生Ajax時,若用POST方法向后臺提交數(shù)據(jù)時,就需要將表單序列化,需要的朋友可以參考下2019-06-06
JSCode all of Brower 全局屏蔽網(wǎng)頁右鍵功能 具體實(shí)現(xiàn)
JSCode all of Brower 全局屏蔽網(wǎng)頁右鍵功能 具體實(shí)現(xiàn)，需要的朋友可以參考一下2013-06-06
javascript利用canvas實(shí)現(xiàn)鼠標(biāo)拖拽功能
這篇文章主要為大家詳細(xì)介紹了javascript利用canvas實(shí)現(xiàn)鼠標(biāo)拖拽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-07-07
JS數(shù)組返回去重后數(shù)據(jù)的方法解析
本文主要分享了Js數(shù)組返回去重后的數(shù)據(jù)的實(shí)例代碼。具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01