javascript設(shè)計(jì)模式之中介者模式Mediator
一,總體概要
1,筆者淺談
我們從日常的生活中打個(gè)簡(jiǎn)單的比方,我們?nèi)シ课葜薪樽夥浚课葜薪槿嗽谧夥空吆头繓|出租者之間形成一條中介。租房者并不關(guān)心他租誰的房。房東出租者也不關(guān)心他租給誰。因?yàn)橛兄薪榈拇嬖?,這場(chǎng)交易才變得如此方便。
在軟件的開發(fā)過程中,勢(shì)必會(huì)碰到這樣一種情況,多個(gè)類或多個(gè)子系統(tǒng)相互交互,而且交互很繁瑣,導(dǎo)致每個(gè)類都必須知道他需要交互的類,這樣它們的耦合會(huì)顯得異常厲害。牽一發(fā)而動(dòng)全身,后果很嚴(yán)重,大熊很生氣!~~~~(>_<)~~~~
好了,既然問題提出來了,那有請(qǐng)我們這期的主角------中介者模式出場(chǎng)吧
中介者的功能就是封裝對(duì)象之間的交互。如果一個(gè)對(duì)象的操作會(huì)引起其他相關(guān)對(duì)象的變化,而這個(gè)對(duì)象又不希望自己來處理這些關(guān)系,那么就可以去找中介者,讓它來處理這些麻煩的關(guān)系。看下面的小例子:
var Participant = function(name) {
this.name = name;
this.chatroom = null;
};
Participant.prototype = {
send: function(message, to) {
this.chatroom.send(message, this, to);
},
receive: function(message, from) {
log.add(from.name + " to " + this.name + ": " + message);
}
};
var Chatroom = function() {
var participants = {};
return {
register: function(participant) {
participants[participant.name] = participant;
participant.chatroom = this;
},
send: function(message, from, to) {
if (to) {
to.receive(message, from);
} else {
for (key in participants) {
if (participants[key] !== from) {
participants[key].receive(message, from);
}
}
}
}
};
};
var log = (function() {
var log = "";
return {
add: function(msg) { log += msg + "\n"; },
show: function() { alert(log); log = ""; }
}
})();
function run() {
var yoko = new Participant("Yoko");
var john = new Participant("John");
var paul = new Participant("Paul");
var ringo = new Participant("Ringo");
var chatroom = new Chatroom();
chatroom.register(yoko);
chatroom.register(john);
chatroom.register(paul);
chatroom.register(ringo);
yoko.send("All you need is love.");
yoko.send("I love you John.");
john.send("Hey, no need to broadcast", yoko);
paul.send("Ha, I heard that!");
ringo.send("Paul, what do you think?", paul);
log.show();
}
在示例代碼中我們有四個(gè)參與者,加入聊天會(huì)話通過注冊(cè)一個(gè)聊天室(中介)。每個(gè)參與者的參與對(duì)象的代表。參與者相互發(fā)送消息和聊天室的處理路由。
這里的聊天室對(duì)象就起到了中介的作用,協(xié)調(diào)其他的對(duì)象,進(jìn)行合理的組織,降低耦合。
二,源碼案例參考
我們應(yīng)該很熟悉MVC三層模型實(shí)體模型(Model)、視圖表現(xiàn)層(View)還有控制層(Control/Mediator)。
控制層便是位于表現(xiàn)層與模型層之間的中介者?;\統(tǒng)地說MVC也算是中介者模式在框架設(shè)計(jì)中的一個(gè)應(yīng)用。
三,案例引入
function Player(name) {
this.points = 0;
this.name = name;
}
Player.prototype.play = function () {
this.points += 1;
mediator.played();
};
var scoreboard = {
element:document.getElementById('results'),
update:function (score) {
var i, msg = '';
for (i in score) {
if (score.hasOwnProperty(i)) {
msg += '<p><strong>' + i + '<\/strong>: ';
msg += score[i];
msg += '<\/p>';
}
}
this.element.innerHTML = msg;
}
};
var mediator = {
players:{},
setup:function () {
var players = this.players;
players.home = new Player('Home');
players.guest = new Player('Guest');
},
played:function () {
var players = this.players,
score = {
Home:players.home.points,
Guest:players.guest.points
};
scoreboard.update(score);
},
keypress:function (e) {
e = e || window.event;
if (e.which === 49) {
mediator.players.home.play();
return;
}
if (e.which === 48) {
mediator.players.guest.play();
return;
}
}
};
mediator.setup();
window.onkeypress = mediator.keypress;
setTimeout(function () {
window.onkeypress = null;
console.log('Game over!');
}, 30000);
四,總結(jié)一下
Why Mediator ?
各個(gè)對(duì)象之間的交互操作非常多,每個(gè)對(duì)象的行為操作都依賴彼此對(duì)方,修改一個(gè)對(duì)象的行為,同時(shí)會(huì)涉及到修改很多其他對(duì)象的行為,
如果使用Mediator模式,可以使各個(gè)對(duì)象間的耦合松散,只需關(guān)心和 Mediator的關(guān)系,使多對(duì)多的關(guān)系變成了一對(duì)多的關(guān)系,
可以降低系統(tǒng)的復(fù)雜性,提高可修改擴(kuò)展性。
使用中介者模式的場(chǎng)合
1.一組定義良好的對(duì)象,現(xiàn)在要進(jìn)行復(fù)雜的通信。
2.定制一個(gè)分布在多個(gè)類中的行為,而又不想生成太多的子類。
可以看出,中介對(duì)象主要是用來封裝行為的,行為的參與者就是那些對(duì)象,但是通過中介者,這些對(duì)象不用相互知道。(迪米特法則的具體實(shí)現(xiàn))
使用中介者模式的優(yōu)點(diǎn):
1.降低了系統(tǒng)對(duì)象之間的耦合性,使得對(duì)象易于獨(dú)立的被復(fù)用。
2.提高系統(tǒng)的靈活性,使得系統(tǒng)易于擴(kuò)展和維護(hù)。
使用中介者模式的缺點(diǎn):
中介者模式的缺點(diǎn)是顯而易見的,因?yàn)檫@個(gè)“中介“承擔(dān)了較多的責(zé)任,所以一旦這個(gè)中介對(duì)象出現(xiàn)了問題,那么整個(gè)系統(tǒng)就會(huì)受到重大的影響。
相關(guān)文章
js中火星坐標(biāo)、百度坐標(biāo)、WGS84坐標(biāo)轉(zhuǎn)換實(shí)現(xiàn)方法示例
這篇文章主要介紹了js中火星坐標(biāo)、百度坐標(biāo)、WGS84坐標(biāo)轉(zhuǎn)換實(shí)現(xiàn)方法,涉及JavaScript數(shù)值計(jì)算相關(guān)操作技巧,需要的朋友可以參考下2020-03-03原生JavaScript實(shí)現(xiàn)todolist功能
本篇文章給大家介紹了通過原生JavaScript實(shí)現(xiàn)todolist功能相關(guān)知識(shí)點(diǎn),對(duì)此有需要的朋友可以學(xué)習(xí)下。2018-03-03微信小程序開發(fā)之組件設(shè)計(jì)規(guī)范
這篇文章主要給大家介紹了關(guān)于微信小程序開發(fā)之組件設(shè)計(jì)規(guī)范的相關(guān)資料,對(duì)剛?cè)腴T學(xué)習(xí)微信小程序的同學(xué)們還是挺有幫助的,需要的朋友可以參考下2021-05-05JavaScript將頁面表格導(dǎo)出為Excel的具體實(shí)現(xiàn)
如何將頁面表格導(dǎo)出為Excel,這在日常工作中很常見,下面為大家詳細(xì)的介紹下使用JavaScript是如何實(shí)現(xiàn)的2013-12-12javascript加減乘除的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)硪黄猨avascript加減乘除的簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-07-07javascript設(shè)計(jì)模式 – 簡(jiǎn)單工廠模式原理與應(yīng)用實(shí)例分析
這篇文章主要介紹了javascript設(shè)計(jì)模式 – 簡(jiǎn)單工廠模式,結(jié)合實(shí)例形式分析了javascript簡(jiǎn)單工廠模式基本概念、原理、定義、應(yīng)用場(chǎng)景及操作注意事項(xiàng),需要的朋友可以參考下2020-04-04