亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

Javascript 模式實(shí)例 中介者模式

 更新時(shí)間:2010年04月01日 00:47:06   作者:  
頁面上,用戶會(huì)有很多的操作 ,每進(jìn)行一次操作我們需要去展示操作的結(jié)果,在這里我們有了一個(gè)問題,我們應(yīng)如何去展示不同的結(jié)果呢?

問題:

  在頁面上,用戶會(huì)有很多的操作 ,每進(jìn)行一次操作我們需要去展示操作的結(jié)果,在這里我們有了一個(gè)問題,我們應(yīng)如何去展示不同的結(jié)果呢?在展示的過程中我們還要考慮當(dāng)頁面功能不斷的增加與修改,結(jié)果展示也不斷的增多,我們要用一個(gè)應(yīng)對(duì)這些變化最好的方法解決問題。

解決方法:

  在115的網(wǎng)盤開發(fā)中就遇到了這樣的一個(gè)問題,經(jīng)過幾番的思考,決定了用如下的方式去解決這個(gè)問題,先看圖:

 

 從圖中我們可以知道,會(huì)使用到一個(gè)中介專門去接收使用者的信息,再發(fā)送到相應(yīng)的展示主題,這樣我們就可以解決了展示方式不段改變的問題,如何去展示就是展示主題代碼問題了。

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

代碼:

  好了,現(xiàn)在我符上一些代碼,如果大家更好的解決方案也可以給我個(gè)評(píng)論。

復(fù)制代碼 代碼如下:

/*
* 中介
**/
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();
}

使用方法:
復(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字符串處理常見操作方法小結(jié)

    JavaScript字符串處理常見操作方法小結(jié)

    這篇文章主要介紹了JavaScript字符串處理常見操作方法,結(jié)合實(shí)例形式分析了JavaScript字符串操作常見的轉(zhuǎn)換、截取、分割、獲取等相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
    2019-11-11
  • JS 無法通過W3C驗(yàn)證的處理方法

    JS 無法通過W3C驗(yàn)證的處理方法

    今天在頁面上使用JS時(shí)發(fā)現(xiàn)無法通過W3C驗(yàn)證,檢查了一會(huì)發(fā)現(xiàn)此方法可以屏蔽大多數(shù)JS無法通過驗(yàn)證的問題,簡(jiǎn)單實(shí)用
    2010-03-03
  • 新手快速上手webpack4打包工具的使用詳解

    新手快速上手webpack4打包工具的使用詳解

    這篇文章主要介紹了新手快速上手webpack4打包工具的使用詳解,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2019-01-01
  • JavaScript實(shí)現(xiàn)的日期控件具體代碼

    JavaScript實(shí)現(xiàn)的日期控件具體代碼

    JavaScript實(shí)現(xiàn)的日期控件,它還會(huì)讀取當(dāng)前的時(shí)間,有需要的朋友可以參考一下
    2013-11-11
  • JavaScript模擬實(shí)現(xiàn)自由落體效果

    JavaScript模擬實(shí)現(xiàn)自由落體效果

    這篇文章主要為大家詳細(xì)介紹了JavaScript模擬實(shí)現(xiàn)自由落體效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2018-08-08
  • 利用Three.js制作一個(gè)新聞聯(lián)播開頭動(dòng)畫

    利用Three.js制作一個(gè)新聞聯(lián)播開頭動(dòng)畫

    這篇文章主要為大家介紹了如何利用Three.js制作一個(gè)新聞聯(lián)播開頭動(dòng)畫,文中的實(shí)現(xiàn)步驟講解詳細(xì),對(duì)我們學(xué)習(xí)有一定幫助,需要的可以參考一下
    2022-05-05
  • Map與WeakMap類型在JavaScript中的使用詳解

    Map與WeakMap類型在JavaScript中的使用詳解

    這篇文章主要介紹了Map與WeakMap類型在JavaScript中的使用,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2020-11-11
  • IE6 hack for js 集錦

    IE6 hack for js 集錦

    本文主要講訴了使用js實(shí)現(xiàn)網(wǎng)站功能兼容IE6,非常的實(shí)用的小技巧,有需要的朋友可以參考下
    2014-09-09
  • js delete 用法(刪除對(duì)象屬性及變量)

    js delete 用法(刪除對(duì)象屬性及變量)

    js delete可以刪除對(duì)象屬性及變量,下面是一些示例,感興趣的朋友可以看看
    2014-08-08
  • javascript中mouseenter與mouseover的異同

    javascript中mouseenter與mouseover的異同

    javascript中mouseover和mouseenter的區(qū)別主要在于監(jiān)聽對(duì)象的子元素是否觸發(fā)事件。mouseover:鼠標(biāo)移入監(jiān)聽對(duì)象中,或者從監(jiān)聽對(duì)象的一個(gè)子元素移入另一個(gè)子元素中時(shí)觸發(fā)該事件。mouseenter:鼠標(biāo)移入監(jiān)聽對(duì)象時(shí)觸發(fā),在監(jiān)聽對(duì)象內(nèi)移動(dòng)不會(huì)觸發(fā)。
    2017-06-06

最新評(píng)論