轻松掌握JavaScript中介者模式

中介者模式的作用就是解除对象与对象之间的紧耦合关系,它也称‘调停者'。所有的对象都通过中介者对象来通信,而不是相互引用,所以当一个对象发生改变时,只需要通知中介者即可。 

如:机场的指挥塔,每架飞机都只需要和指挥塔通信即可,指挥塔知道每架飞机的飞行状况,可以安排所有起降时间,调整航线等 

中介者模式符合迪米特法则,即最少知识原则,指一个对象应该尽可能少地了解另外的对象。如果对象之间的耦合性太高,则改变一个对象,会牵动很多对象,难于维护。当对象耦合很紧时,要修改一个对象而不影响其它的对象是很困难的。 

如果对象之间的复杂耦合确实导致调用和维护出现了困难,而且这些耦合度随项目的变化呈指数增长,那我们就可以考虑用中介者模式来重构代码!中介者通过解耦来提升代码的可维护性。 

例子1:游戏 

玩家对象是通过Player()构造函数来创建的,有自己的points和name属性。原型上的play()方法负责给自己加一分然后通知中介者:

function Player(name) {

this.points = 0;

this.name = name;

}

Player.prototype.play = function () {

this.points += 1;

mediator.played();

};

scoreboard对象(计分板)有一个update()方法,它会在每次玩家玩完后被中介者调用。计分析根本不知道玩家的任何信息,也不保存分数,它只负责显示中介者给过来的分数:

var scoreboard = {

element: document.getElementById('results'),

update: function (score) {

var i, msg = '';

for (i in score) {

if (score.hasOwnProperty(i)) {

msg += '<p><span>' + i + '<\/span>: ';

msg += score[i];

msg += '<\/p>';

}

}

this.element.innerHTML = msg;

}

};

现在我们来看一下mediator对象(中介者)。在游戏初始化的时候,在setup()方法中创建游戏者,然后放后players属性以便后续使用。played()方法会被游戏者在每轮玩完后调用,它更新score哈希然表然后将它传给scoreboard用于显示。最后一个方法是keypress(),负责处理键盘事件,决定是哪位玩家玩的,并且通知它:

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; // IE

if (e.which === 49) { // key "1"

mediator.players.home.play();

return;

}

if (e.which === 48) { // key "0"

mediator.players.guest.play();

return;

}

}

};

最后一件事是初始化和结束游戏:

// go!

mediator.setup();

window.onkeypress = mediator.keypress;

// game over in 30 seconds

setTimeout(function () {

window.onkeypress = null;

alert('Game over!');

}, 30000);

例子2:卖手机

var goods = { //库存

'red|32G':3,

'red|16G':5,

'blue|32G':3,

'blue|16G':6

}

//中介者

var mediator = (function(){

function id(id){

return document.getElementById(id);

}

var colorSelect = id('colorSelect'),

memorySelect = id('memorySelect'),

numberInput = id('numberInput'),

colorInfo = id('colorInfo'),

memoryInfo = id('memoryInfo'),

numberInfo = id('numberInfo'),

nextBtn = id('nextBtn');

return{

changed:function(obj){

var color = colorSelect.value,

memory = memorySelect.value,

number = numberInput.value,

stock = goods[color+'|'+memory];

if(obj === colorSelect){

colorInfo.innerHTML = color;

}else if(obj === memorySelect){

memoryInfo.innerHTML = memory;

}else if(obj === numberInput){

numberInfo.innerHTML = number;

}

if(!color){

nextBtn.disabled = true;

nextBtn.innerHTML = '请选择手机颜色';

return;

}

if(!memory){

nextBtn.disabled = true;

nextBtn.innerHTML = '请选择内存大小';

return;

}

if(Number.isInteger(number-0) && number > 0){

nextBtn.disabled = true;

nextBtn.innerHTML = '请输入正确的购买数量';

return;

}

nextBtn.disabled = false;

nextBtn.innerHTML = '放入购物车';

}

}

})();

//添加事件

colorSelect.onchange = function(){

mediator.changed(this);

}

memorySelect.onchange = function(){

mediator.changed(this);

}

numberInput.onchange = function(){

mediator.changed(this);

}

参考文献: 《JavaScript模式》 《JavaScript设计模式与开发实践》

以上是 轻松掌握JavaScript中介者模式 的全部内容, 来源链接: utcz.com/z/329917.html

回到顶部