JavaScript設(shè)計(jì)模式之調(diào)停者模式實(shí)例詳解
本文實(shí)例講述了JavaScript設(shè)計(jì)模式之調(diào)停者模式。分享給大家供大家參考,具體如下:
1、定義
調(diào)停者模式包裝了一系列對(duì)象相互作用的方式,使得這些對(duì)象不必相互明顯作用。從而使他們可以松散偶合。當(dāng)某些對(duì)象之間的作用發(fā)生改變時(shí),不會(huì)立即影響其他的一些對(duì)象之間的作用。保證這些作用可以彼此獨(dú)立的變化。調(diào)停者模式將多對(duì)多的相互作用轉(zhuǎn)化為一對(duì)多的相互作用。調(diào)停者模式將對(duì)象的行為和協(xié)作抽象化,把對(duì)象在小尺度的行為上與其他對(duì)象的相互作用分開(kāi)處理。
2、使用的原因
當(dāng)對(duì)象之間的交互操作很多,且每個(gè)對(duì)象的行為操作都依賴(lài)彼此時(shí),為防止在修改一個(gè)對(duì)象的行為時(shí),同時(shí)涉及到修改很多其他對(duì)象的行為,可采用調(diào)停者模式,來(lái)解決緊耦合問(wèn)題.
該模式將對(duì)象之間的多對(duì)多關(guān)系變成一對(duì)多關(guān)系,調(diào)停者對(duì)象將系統(tǒng)從網(wǎng)狀結(jié)構(gòu)變成以調(diào)停者為中心的星形結(jié)構(gòu),達(dá)到降低系統(tǒng)的復(fù)雜性,提高可擴(kuò)展性的作用.
調(diào)停者設(shè)計(jì)模式結(jié)構(gòu)圖:
調(diào)停者模式包括以下角色:
●抽象調(diào)停者(Mediator)角色:定義出同事對(duì)象到調(diào)停者對(duì)象的接口,其中主要方法是一個(gè)(或多個(gè))事件方法。
●具體調(diào)停者(ConcreteMediator)角色:實(shí)現(xiàn)了抽象調(diào)停者所聲明的事件方法。具體調(diào)停者知曉所有的具體同事類(lèi),并負(fù)責(zé)具體的協(xié)調(diào)各同事對(duì)象的交互關(guān)系。
●抽象同事類(lèi)(Colleague)角色:定義出調(diào)停者到同事對(duì)象的接口。同事對(duì)象只知道調(diào)停者而不知道其余的同事對(duì)象。
●具體同事類(lèi)(ConcreteColleague)角色:所有的具體同事類(lèi)均從抽象同事類(lèi)繼承而來(lái)。實(shí)現(xiàn)自己的業(yè)務(wù),在需要與其他同事通信的時(shí)候,就與持有的調(diào)停者通信,調(diào)停者會(huì)負(fù)責(zé)與其他的同事交互。
JS實(shí)現(xiàn)代碼:
CD光驅(qū)
function CDDriver( mediator ) { //持有一個(gè)調(diào)停者對(duì)象 this.mediator = mediator; /** * 獲取當(dāng)前同事類(lèi)對(duì)應(yīng)的調(diào)停者對(duì)象 */ this.getMediator = function() { return mediator; } //光驅(qū)讀取出來(lái)的數(shù)據(jù) this.data = ""; /** * 獲取光盤(pán)讀取出來(lái)的數(shù)據(jù) */ this.getData = function() { return this.data; } /** * 讀取光盤(pán) */ this.readCD = function(){ //逗號(hào)前是視頻顯示的數(shù)據(jù),逗號(hào)后是聲音 this.data = "西游記,老孫來(lái)也!"; //通知主板,自己的狀態(tài)發(fā)生了改變 this.getMediator().changed(this); } }
CPU處理器
function CPU( mediator ) { //持有一個(gè)調(diào)停者對(duì)象 this.mediator = mediator; /** * 獲取當(dāng)前同事類(lèi)對(duì)應(yīng)的調(diào)停者對(duì)象 */ this.getMediator = function() { return mediator; } //分解出來(lái)的視頻數(shù)據(jù) this.videoData = ""; //分解出來(lái)的聲音數(shù)據(jù) this.soundData = ""; /** * 獲取分解出來(lái)的視頻數(shù)據(jù) */ this.getVideoData = function() { return this.videoData; } /** * 獲取分解出來(lái)的聲音數(shù)據(jù) */ this.getSoundData = function() { return this.soundData; } /** * 處理數(shù)據(jù),把數(shù)據(jù)分成音頻和視頻的數(shù)據(jù) */ this.executeData = function(data){ //把數(shù)據(jù)分解開(kāi),前面是視頻數(shù)據(jù),后面是音頻數(shù)據(jù) var array = data.split(","); this.videoData = array[0]; this.soundData = array[1]; //通知主板,CPU完成工作 this.getMediator().changed(this); } }
顯卡
function VideoCard( mediator ) { //持有一個(gè)調(diào)停者對(duì)象 this.mediator = mediator; /** * 獲取當(dāng)前同事類(lèi)對(duì)應(yīng)的調(diào)停者對(duì)象 */ this.getMediator = function() { return mediator; } /** * 顯示視頻數(shù)據(jù) */ this.showData = function(data){ console.log("正在播放的是:" + data); } }
聲卡
function SoundCard( mediator ){ //持有一個(gè)調(diào)停者對(duì)象 this.mediator = mediator; /** * 獲取當(dāng)前同事類(lèi)對(duì)應(yīng)的調(diào)停者對(duì)象 */ this.getMediator = function() { return mediator; } /** * 按照聲頻數(shù)據(jù)發(fā)出聲音 */ this.soundData = function(data){ console.log("輸出音頻:" + data); } }
具體調(diào)停者類(lèi)
function MainBoard() { //需要知道要交互的同事類(lèi)——光驅(qū)類(lèi) this.cdDriver = null; //需要知道要交互的同事類(lèi)——CPU類(lèi) this.cpu = null; //需要知道要交互的同事類(lèi)——顯卡類(lèi) this.videoCard = null; //需要知道要交互的同事類(lèi)——聲卡類(lèi) this.soundCard = null; this.setCdDriver = function(cdDriver) { this.cdDriver = cdDriver; } this.setCpu = function(cpu) { this.cpu = cpu; } this.setVideoCard = function(videoCard) { this.videoCard = videoCard; } this.setSoundCard = function(soundCard) { this.soundCard = soundCard; } this.changed = function(c) { if(c instanceof CDDriver){ //表示光驅(qū)讀取數(shù)據(jù)了 this.opeCDDriverReadData(c); }else if(c instanceof CPU){ this.opeCPU(c); } } /** * 處理光驅(qū)讀取數(shù)據(jù)以后與其他對(duì)象的交互 */ this.opeCDDriverReadData = function(cd){ //先獲取光驅(qū)讀取的數(shù)據(jù) var data = cd.getData(); //把這些數(shù)據(jù)傳遞給CPU進(jìn)行處理 cpu.executeData(data); } /** * 處理CPU處理完數(shù)據(jù)后與其他對(duì)象的交互 */ this.opeCPU = function(cpu){ //先獲取CPU處理后的數(shù)據(jù) var videoData = cpu.getVideoData(); var soundData = cpu.getSoundData(); //把這些數(shù)據(jù)傳遞給顯卡和聲卡展示出來(lái) this.videoCard.showData(videoData); this.soundCard.soundData(soundData); } }
客戶(hù)端
//創(chuàng)建調(diào)停者——主板 var mediator = new MainBoard(); //創(chuàng)建同事類(lèi) var cd = new CDDriver(mediator); var cpu = new CPU(mediator); var vc = new VideoCard(mediator); var sc = new SoundCard(mediator); //讓調(diào)停者知道所有同事 mediator.setCdDriver(cd); mediator.setCpu(cpu); mediator.setVideoCard(vc); mediator.setSoundCard(sc); //開(kāi)始看電影,把光盤(pán)放入光驅(qū),光驅(qū)開(kāi)始讀盤(pán) cd.readCD();
打印效果
調(diào)停者模式的優(yōu)點(diǎn)
● 松散耦合:調(diào)停者模式通過(guò)把多個(gè)同事對(duì)象之間的交互封裝到調(diào)停者對(duì)象里面,從而使得同事對(duì)象之間松散耦合,基本上可以做到互補(bǔ)依賴(lài)。這樣一來(lái),同事對(duì)象就可以獨(dú)立地變化和復(fù)用,而不再像以前那樣“牽一處而動(dòng)全身”了。
● 集中控制交互:多個(gè)同事對(duì)象的交互,被封裝在調(diào)停者對(duì)象里面集中管理,使得這些交互行為發(fā)生變化的時(shí)候,只需要修改調(diào)停者對(duì)象就可以了,當(dāng)然如果是已經(jīng)做好的系統(tǒng),那么就擴(kuò)展調(diào)停者對(duì)象,而各個(gè)同事類(lèi)不需要做修改。
● 多對(duì)多變成一對(duì)多:沒(méi)有使用調(diào)停者模式的時(shí)候,同事對(duì)象之間的關(guān)系通常是多對(duì)多的,引入調(diào)停者對(duì)象以后,調(diào)停者對(duì)象和同事對(duì)象的關(guān)系通常變成雙向的一對(duì)多,這會(huì)讓對(duì)象的關(guān)系更容易理解和實(shí)現(xiàn)。
調(diào)停者模式的缺點(diǎn)
調(diào)停者模式的一個(gè)潛在缺點(diǎn)是,過(guò)度集中化。如果同事對(duì)象的交互非常多,而且比較復(fù)雜,當(dāng)這些復(fù)雜性全部集中到調(diào)停者的時(shí)候,會(huì)導(dǎo)致調(diào)停者對(duì)象變得十分復(fù)雜,而且難于管理和維護(hù)。
更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專(zhuān)題:《javascript面向?qū)ο笕腴T(mén)教程》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
- JavaScript設(shè)計(jì)模式經(jīng)典之命令模式
- 深入理解JavaScript系列(34):設(shè)計(jì)模式之命令模式詳解
- JS基于設(shè)計(jì)模式中的單例模式(Singleton)實(shí)現(xiàn)封裝對(duì)數(shù)據(jù)增刪改查功能
- JS設(shè)計(jì)模式之觀察者模式實(shí)現(xiàn)實(shí)時(shí)改變頁(yè)面中金額數(shù)的方法
- JS設(shè)計(jì)模式之狀態(tài)模式概念與用法分析
- JS設(shè)計(jì)模式之策略模式概念與用法分析
- JS設(shè)計(jì)模式之訪問(wèn)者模式定義與用法分析
- JS設(shè)計(jì)模式之責(zé)任鏈模式實(shí)例詳解
- JavaScript編程設(shè)計(jì)模式之構(gòu)造器模式實(shí)例分析
- JavaScript 設(shè)計(jì)模式 安全沙箱模式
- JS設(shè)計(jì)模式之命令模式概念與用法分析
相關(guān)文章
js設(shè)置隨機(jī)切換背景圖片的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇js設(shè)置隨機(jī)切換背景圖片的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11js實(shí)現(xiàn)文本框輸入文字個(gè)數(shù)限制代碼
這篇文章主要介紹了js實(shí)現(xiàn)文本框輸入文字個(gè)數(shù)限制代碼,文本框輸入的文字個(gè)數(shù)并不是無(wú)限制的,一般都會(huì)限定一個(gè)輸入最高上限,如何限制,請(qǐng)看本文2015-12-12JavaScript使用canvas繪制坐標(biāo)和線(xiàn)
這篇文章主要為大家詳細(xì)介紹了JavaScript使用canvas繪制坐標(biāo)和線(xiàn),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-04-04JavaScript實(shí)現(xiàn)添加及刪除事件的方法小結(jié)
這篇文章主要介紹了JavaScript實(shí)現(xiàn)添加及刪除事件的方法,實(shí)例總結(jié)了javascript對(duì)事件的添加及刪除的技巧,涉及javascript事件綁定的方法及瀏覽器兼容的相關(guān)注意事項(xiàng),需要的朋友可以參考下2015-08-08JavaScript實(shí)現(xiàn)圖片滑動(dòng)切換的代碼示例分享
這篇文章主要介紹了JavaScript實(shí)現(xiàn)圖片滑動(dòng)切換的代碼示例分享,能夠控制包括滑動(dòng)時(shí)間和切換數(shù)量等,需要的朋友可以參考下2016-03-03JavaScript數(shù)據(jù)結(jié)構(gòu)之優(yōu)先隊(duì)列與循環(huán)隊(duì)列實(shí)例詳解
這篇文章主要介紹了JavaScript數(shù)據(jù)結(jié)構(gòu)之優(yōu)先隊(duì)列與循環(huán)隊(duì)列,結(jié)合實(shí)例形式較為詳細(xì)的分析了javascrip數(shù)據(jù)結(jié)構(gòu)中優(yōu)先隊(duì)列與循環(huán)隊(duì)列的原理、定義與使用方法,需要的朋友可以參考下2017-10-10js實(shí)現(xiàn)數(shù)字滾動(dòng)特效
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)數(shù)字滾動(dòng)特效,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-12-12js異步之a(chǎn)sync和await實(shí)現(xiàn)同步寫(xiě)法
本文主要介紹了js異步之a(chǎn)sync和await實(shí)現(xiàn)同步寫(xiě)法,文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-03-03