JavaScript設(shè)計模式之調(diào)停者模式實例詳解
本文實例講述了JavaScript設(shè)計模式之調(diào)停者模式。分享給大家供大家參考,具體如下:
1、定義
調(diào)停者模式包裝了一系列對象相互作用的方式,使得這些對象不必相互明顯作用。從而使他們可以松散偶合。當某些對象之間的作用發(fā)生改變時,不會立即影響其他的一些對象之間的作用。保證這些作用可以彼此獨立的變化。調(diào)停者模式將多對多的相互作用轉(zhuǎn)化為一對多的相互作用。調(diào)停者模式將對象的行為和協(xié)作抽象化,把對象在小尺度的行為上與其他對象的相互作用分開處理。
2、使用的原因
當對象之間的交互操作很多,且每個對象的行為操作都依賴彼此時,為防止在修改一個對象的行為時,同時涉及到修改很多其他對象的行為,可采用調(diào)停者模式,來解決緊耦合問題.
該模式將對象之間的多對多關(guān)系變成一對多關(guān)系,調(diào)停者對象將系統(tǒng)從網(wǎng)狀結(jié)構(gòu)變成以調(diào)停者為中心的星形結(jié)構(gòu),達到降低系統(tǒng)的復(fù)雜性,提高可擴展性的作用.
調(diào)停者設(shè)計模式結(jié)構(gòu)圖:

調(diào)停者模式包括以下角色:
●抽象調(diào)停者(Mediator)角色:定義出同事對象到調(diào)停者對象的接口,其中主要方法是一個(或多個)事件方法。
●具體調(diào)停者(ConcreteMediator)角色:實現(xiàn)了抽象調(diào)停者所聲明的事件方法。具體調(diào)停者知曉所有的具體同事類,并負責具體的協(xié)調(diào)各同事對象的交互關(guān)系。
●抽象同事類(Colleague)角色:定義出調(diào)停者到同事對象的接口。同事對象只知道調(diào)停者而不知道其余的同事對象。
●具體同事類(ConcreteColleague)角色:所有的具體同事類均從抽象同事類繼承而來。實現(xiàn)自己的業(yè)務(wù),在需要與其他同事通信的時候,就與持有的調(diào)停者通信,調(diào)停者會負責與其他的同事交互。
JS實現(xiàn)代碼:
CD光驅(qū)
function CDDriver( mediator ) {
//持有一個調(diào)停者對象
this.mediator = mediator;
/**
* 獲取當前同事類對應(yīng)的調(diào)停者對象
*/
this.getMediator = function() {
return mediator;
}
//光驅(qū)讀取出來的數(shù)據(jù)
this.data = "";
/**
* 獲取光盤讀取出來的數(shù)據(jù)
*/
this.getData = function() {
return this.data;
}
/**
* 讀取光盤
*/
this.readCD = function(){
//逗號前是視頻顯示的數(shù)據(jù),逗號后是聲音
this.data = "西游記,老孫來也!";
//通知主板,自己的狀態(tài)發(fā)生了改變
this.getMediator().changed(this);
}
}
CPU處理器
function CPU( mediator ) {
//持有一個調(diào)停者對象
this.mediator = mediator;
/**
* 獲取當前同事類對應(yīng)的調(diào)停者對象
*/
this.getMediator = function() {
return mediator;
}
//分解出來的視頻數(shù)據(jù)
this.videoData = "";
//分解出來的聲音數(shù)據(jù)
this.soundData = "";
/**
* 獲取分解出來的視頻數(shù)據(jù)
*/
this.getVideoData = function() {
return this.videoData;
}
/**
* 獲取分解出來的聲音數(shù)據(jù)
*/
this.getSoundData = function() {
return this.soundData;
}
/**
* 處理數(shù)據(jù),把數(shù)據(jù)分成音頻和視頻的數(shù)據(jù)
*/
this.executeData = function(data){
//把數(shù)據(jù)分解開,前面是視頻數(shù)據(jù),后面是音頻數(shù)據(jù)
var array = data.split(",");
this.videoData = array[0];
this.soundData = array[1];
//通知主板,CPU完成工作
this.getMediator().changed(this);
}
}
顯卡
function VideoCard( mediator ) {
//持有一個調(diào)停者對象
this.mediator = mediator;
/**
* 獲取當前同事類對應(yīng)的調(diào)停者對象
*/
this.getMediator = function() {
return mediator;
}
/**
* 顯示視頻數(shù)據(jù)
*/
this.showData = function(data){
console.log("正在播放的是:" + data);
}
}
聲卡
function SoundCard( mediator ){
//持有一個調(diào)停者對象
this.mediator = mediator;
/**
* 獲取當前同事類對應(yīng)的調(diào)停者對象
*/
this.getMediator = function() {
return mediator;
}
/**
* 按照聲頻數(shù)據(jù)發(fā)出聲音
*/
this.soundData = function(data){
console.log("輸出音頻:" + data);
}
}
具體調(diào)停者類
function MainBoard() {
//需要知道要交互的同事類——光驅(qū)類
this.cdDriver = null;
//需要知道要交互的同事類——CPU類
this.cpu = null;
//需要知道要交互的同事類——顯卡類
this.videoCard = null;
//需要知道要交互的同事類——聲卡類
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ù)以后與其他對象的交互
*/
this.opeCDDriverReadData = function(cd){
//先獲取光驅(qū)讀取的數(shù)據(jù)
var data = cd.getData();
//把這些數(shù)據(jù)傳遞給CPU進行處理
cpu.executeData(data);
}
/**
* 處理CPU處理完數(shù)據(jù)后與其他對象的交互
*/
this.opeCPU = function(cpu){
//先獲取CPU處理后的數(shù)據(jù)
var videoData = cpu.getVideoData();
var soundData = cpu.getSoundData();
//把這些數(shù)據(jù)傳遞給顯卡和聲卡展示出來
this.videoCard.showData(videoData);
this.soundCard.soundData(soundData);
}
}
客戶端
//創(chuàng)建調(diào)停者——主板 var mediator = new MainBoard(); //創(chuàng)建同事類 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); //開始看電影,把光盤放入光驅(qū),光驅(qū)開始讀盤 cd.readCD();
打印效果

調(diào)停者模式的優(yōu)點
● 松散耦合:調(diào)停者模式通過把多個同事對象之間的交互封裝到調(diào)停者對象里面,從而使得同事對象之間松散耦合,基本上可以做到互補依賴。這樣一來,同事對象就可以獨立地變化和復(fù)用,而不再像以前那樣“牽一處而動全身”了。
● 集中控制交互:多個同事對象的交互,被封裝在調(diào)停者對象里面集中管理,使得這些交互行為發(fā)生變化的時候,只需要修改調(diào)停者對象就可以了,當然如果是已經(jīng)做好的系統(tǒng),那么就擴展調(diào)停者對象,而各個同事類不需要做修改。
● 多對多變成一對多:沒有使用調(diào)停者模式的時候,同事對象之間的關(guān)系通常是多對多的,引入調(diào)停者對象以后,調(diào)停者對象和同事對象的關(guān)系通常變成雙向的一對多,這會讓對象的關(guān)系更容易理解和實現(xiàn)。
調(diào)停者模式的缺點
調(diào)停者模式的一個潛在缺點是,過度集中化。如果同事對象的交互非常多,而且比較復(fù)雜,當這些復(fù)雜性全部集中到調(diào)停者的時候,會導(dǎo)致調(diào)停者對象變得十分復(fù)雜,而且難于管理和維護。
更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題:《javascript面向?qū)ο笕腴T教程》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
- JavaScript設(shè)計模式經(jīng)典之命令模式
- 深入理解JavaScript系列(34):設(shè)計模式之命令模式詳解
- JS基于設(shè)計模式中的單例模式(Singleton)實現(xiàn)封裝對數(shù)據(jù)增刪改查功能
- JS設(shè)計模式之觀察者模式實現(xiàn)實時改變頁面中金額數(shù)的方法
- JS設(shè)計模式之狀態(tài)模式概念與用法分析
- JS設(shè)計模式之策略模式概念與用法分析
- JS設(shè)計模式之訪問者模式定義與用法分析
- JS設(shè)計模式之責任鏈模式實例詳解
- JavaScript編程設(shè)計模式之構(gòu)造器模式實例分析
- JavaScript 設(shè)計模式 安全沙箱模式
- JS設(shè)計模式之命令模式概念與用法分析
相關(guān)文章
JavaScript實現(xiàn)添加及刪除事件的方法小結(jié)
這篇文章主要介紹了JavaScript實現(xiàn)添加及刪除事件的方法,實例總結(jié)了javascript對事件的添加及刪除的技巧,涉及javascript事件綁定的方法及瀏覽器兼容的相關(guān)注意事項,需要的朋友可以參考下2015-08-08
JavaScript實現(xiàn)圖片滑動切換的代碼示例分享
這篇文章主要介紹了JavaScript實現(xiàn)圖片滑動切換的代碼示例分享,能夠控制包括滑動時間和切換數(shù)量等,需要的朋友可以參考下2016-03-03
JavaScript數(shù)據(jù)結(jié)構(gòu)之優(yōu)先隊列與循環(huán)隊列實例詳解
這篇文章主要介紹了JavaScript數(shù)據(jù)結(jié)構(gòu)之優(yōu)先隊列與循環(huán)隊列,結(jié)合實例形式較為詳細的分析了javascrip數(shù)據(jù)結(jié)構(gòu)中優(yōu)先隊列與循環(huán)隊列的原理、定義與使用方法,需要的朋友可以參考下2017-10-10
js異步之a(chǎn)sync和await實現(xiàn)同步寫法
本文主要介紹了js異步之a(chǎn)sync和await實現(xiàn)同步寫法,文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-03-03

