Javascript 模式實例 中介者模式
更新時間：2010年04月01日 00:47:06 作者：
頁面上，用戶會有很多的操作 ，每進行一次操作我們需要去展示操作的結果，在這里我們有了一個問題，我們應如何去展示不同的結果呢？
問題：
在頁面上，用戶會有很多的操作 ，每進行一次操作我們需要去展示操作的結果，在這里我們有了一個問題，我們應如何去展示不同的結果呢？在展示的過程中我們還要考慮當頁面功能不斷的增加與修改，結果展示也不斷的增多，我們要用一個應對這些變化最好的方法解決問題。
解決方法：
在115的網(wǎng)盤開發(fā)中就遇到了這樣的一個問題，經(jīng)過幾番的思考，決定了用如下的方式去解決這個問題，先看圖：
從圖中我們可以知道，會使用到一個中介專門去接收使用者的信息，再發(fā)送到相應的展示主題，這樣我們就可以解決了展示方式不段改變的問題，如何去展示就是展示主題代碼問題了。
這個方法也就是我們平常說的中介者模式，如果想了解更多的可以去google或baidu一下中介者模式。
代碼：
好了，現(xiàn)在我符上一些代碼，如果大家更好的解決方案也可以給我個評論。
復制代碼 代碼如下:
/*
* 中介
**/
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();
}
使用方法：
復制代碼 代碼如下:
<a href="javascript://" onclick="med.Send('m1','Good');">test1</a>
<a href="javascript://" onclick="med.Send('m2','GoodBoy');">test2</a>
演示代碼:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
相關文章
這篇文章主要介紹了JavaScript字符串處理常見操作方法,結合實例形式分析了JavaScript字符串操作常見的轉(zhuǎn)換、截取、分割、獲取等相關實現(xiàn)技巧,需要的朋友可以參考下2019-11-11
今天在頁面上使用JS時發(fā)現(xiàn)無法通過W3C驗證,檢查了一會發(fā)現(xiàn)此方法可以屏蔽大多數(shù)JS無法通過驗證的問題，簡單實用2010-03-03
這篇文章主要介紹了新手快速上手webpack4打包工具的使用詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
JavaScript實現(xiàn)的日期控件，它還會讀取當前的時間，有需要的朋友可以參考一下2013-11-11
這篇文章主要為大家詳細介紹了JavaScript模擬實現(xiàn)自由落體效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-08-08
這篇文章主要為大家介紹了如何利用Three.js制作一個新聞聯(lián)播開頭動畫，文中的實現(xiàn)步驟講解詳細，對我們學習有一定幫助，需要的可以參考一下2022-05-05
Map與WeakMap類型在JavaScript中的使用詳解
這篇文章主要介紹了Map與WeakMap類型在JavaScript中的使用,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-11-11
本文主要講訴了使用js實現(xiàn)網(wǎng)站功能兼容IE6，非常的實用的小技巧，有需要的朋友可以參考下2014-09-09
js delete可以刪除對象屬性及變量，下面是一些示例，感興趣的朋友可以看看2014-08-08
javascript中mouseenter與mouseover的異同
javascript中mouseover和mouseenter的區(qū)別主要在于監(jiān)聽對象的子元素是否觸發(fā)事件。mouseover：鼠標移入監(jiān)聽對象中，或者從監(jiān)聽對象的一個子元素移入另一個子元素中時觸發(fā)該事件。mouseenter：鼠標移入監(jiān)聽對象時觸發(fā)，在監(jiān)聽對象內(nèi)移動不會觸發(fā)。2017-06-06