JavaScript设计模式笔记-中介者模式
定义
中介者模式的作用就是解除对象与对象之间的紧耦合关系.增加一个中介者对象之后,所有的相关对象都通过中介者对象来通信.而不是互相引用.所以当一个对象发生改变时候,只需要通知中介者对象即可.
14.1 现实中的中介者
- 机场指挥塔
- 博彩公司
14.2 中介者模式的例子——泡泡堂游戏
初期泡泡堂只支持双人对战.我们来定义一个构造函数 有三个方法Play.prototype.win,Play.prototype.lose,Play.prototype.die因为是两个人 所以当一个玩家死亡的时候游戏便结束
var Player=function(){
this.name=name
this.enemy=null;//敌人
}
Player.prototype.win=function(){
console.log(this.name+"won")
}
Player.prototype.lose=function(){
console.log(this.name+"lost")
}
Player.prototype.die=function(){
this.lose();
this.enemy.win();
}
接下来创建两个玩家对象
var player1=new Player("皮蛋")
var player2=new Player("小乖")
给玩家相互设置敌人
player1.enemy=player2
player2.enemy=player1
当player1被炸死的时候,只需要调用这一句代码便完成了一局游戏
player1.die()
14.2.1 为游戏增加队伍
现在我们改进下游戏 分成红蓝双方,每队都有4个人.用下面的方式设置无疑是很低效的
player1.partners=["player1","player2","player3","player4"]
player1.enemies=["player5","player6","player7","player8"]
player5.partners=["player5","player6","player7","player8"]
player5.enemies=["player1","player2","player3","player4"]
于是我们来改写一下 用一个数组players来保存所有玩家,在创建玩家之后,循环players来给每个玩家设置敌人和队友
var players=[];
再改写构造函数Player,使每个玩家对象都增加一些属性,分别是队友列表,敌人列表,玩家当前状态,角色名字以及玩家所在的队伍颜色
function Player(name,teamColor){
this.partners=[];//队友列表
this.enemies=[];//敌人列表
this.state="live";//玩家状态 初始状态都是存活
this.teamColor=teamColor;//队伍颜色
}
玩家胜利和失败之后的展现依然不变
Player.prototype.win = function(){ // 玩家团队胜利
console.log( 'winner: ' + this.name );
};
Player.prototype.lose = function(){ // 玩家团队失败
console.log( 'loser: ' + this.name );
};
玩家死亡的情况要变得复杂一点,我们需要在每个队友死亡的情况下遍历其他队友的生存情况 如果队友全部死亡 则这一局游戏失败,敌人队伍的所有玩家胜利
Player.prototype.die=function(){
var all_dead=true;//初始设定为全部死亡
this.state="dead";//设置玩家状态为死亡
for(var i=0,partners;partners=this.partners[i++]){//遍历队友列表
if(partners.state!=="dead"){//如果队友中还有一个玩家没死
all_dead=false;//关闭全部死亡这个设定
break;//跳出循环
}
}
if(all_dead===true){//如果队友全部死亡
this.lose();//通知自己游戏失败
for(var i=0,partners;partners=this.partners[i++]){//通知队友游戏失败
partners.lose()
}
for(var i=0,enemy;enemy=this.enemies[i++]){//通知敌方游戏胜利
enemy.win();
}
}
}
最后定义一个工厂来创建玩家
var playerFactory=function(name,teamColor){
var newPlayer=new Player(name,teamColor);//创建新玩家
for(var i=0,player;player=players[i++]){//通知所有玩家有新角色加入
if(player.teamColor===new Player.teamColor){//如果是同一队伍
player.partners.push(newPlayer);//相互添加到队友列表
newPlayer.partners.push(player);
}else{
player.enemies.push(newPlayer);//相互添加敌人
newPlayer.enemies.push(player);
}
}
players.push(newPlayer);
return newPlayer
}
然后用这段代码创建八个玩家
//红队：
var player1 = playerFactory( '皮蛋', 'red' ),
player2 = playerFactory( '小乖', 'red' ),
player3 = playerFactory( '宝宝', 'red' ),
player4 = playerFactory( '小强', 'red' );
//蓝队：
var player5 = playerFactory( '黑妞', 'blue' ),
player6 = playerFactory( '葱头', 'blue' ),
player7 = playerFactory( '胖墩', 'blue' ),
player8 = playerFactory( '海盗', 'blue' );
player1.die();
player2.die();
player4.die();
player3.die();
执行后不出所料 蓝队会胜利 红队是失败的
14.2.2 玩家增多带来的困扰
上述的代码是紧紧耦合在一起的.在此段代码中,每个玩家都有两个属性,this.partners和this.enemies,用来保存其他玩家对象的引用.每当玩家状态发送改变都需要显式的通知其他玩家.如果需求再复杂一点 比如解除队伍和替换队伍 上述代码可以很快GG
14.2.3 用中介者模式来改造泡泡堂游戏
首先仍然是定义Player构造函数和player对象的原型方法.在player原型方法中不再负责具体的执行逻辑,而是把操作转交给中介者对象.
function Player(name,teamColor){
this.name=name;//角色名字
this.teamColor=teamColor;//队伍颜色
this.state="alive";//玩家生存状态
}
Player.prototype.win=function(){
console.log(this.name+"won")
}
Player.prototype.lose=function(){
console.log(this.name+"lose")
}
//玩家死亡
Player.prototype.die=function(){
this.state="dead";
playerDirector.ReceiveMessage("playerDead",this);//给中介者发送消息,玩家死亡
}
//移除玩家
Player.prototype.remove=function(){
playerDirector.ReceiveMessage("removePlayer",this);//给中介者发送消息,移除一个玩家
}
//玩家换队
Player.prototype.changeTeam=function(color){
playerDirector.ReceiveMessage("changeTeam",this,color);//给中介者发送消息,玩家换队
}
再继续改写之前创建玩家对象的工厂函数,可以看到,因为工厂函数里不需要再给创建的玩家设置队友和敌人,这个工厂函数几乎失去了工厂的意义
var playerFactory=function(name,teamColor){
var newPlayer=new Player(name,teamColor);//创建一个新的玩家对象
playerDirector.ReceiveMessage("addPlayer",newPlayer);//给中介者发送消息,新增玩家
return newPlayer
}
最后, 我们需要实现playerDirector对象 一般有以下两种方式
- 利用发布-订阅模式.将playerDirector实现为订阅者,各player作为发布者.一旦player的状态发生改变,便将消息推送给playerDirector.playerDirector处理消息后将反馈给其他player
- 在playerDirector中开放一些接收消息的接口,各player可以直接调用该接口来给playerDirector发送消息,player只需要传递一个参数给playerDirector,这个参数的目的是使playerDirector可以识别发送者.同样.playerDirector处理消息后将反馈给其他player
这里采用第二种方式.playerDirector开放一个对外暴露的接口ReceiveMessage.负责接收player对象发送的消息,而player对象发送消息的时候,总是把自身this作为参数发送给playerDirector,以便playerDirector识别消息来自于哪个对象
var playerDirector=(function(){
var players={};//保存所有玩家
var operations={};//保存中介者可以执行的操作
//新增一个玩家
operations.addPlayer=function(player){
var teamColor=player.teamColor;//玩家的队伍颜色
players[teamColor]=players[teamColor]||[];//如果该颜色的玩家还没有成立队伍,则新成立一个队伍
players[teamColor].push(player);//添加玩家进队伍
}
//移除一个玩家
operations.removePlayer=function(player){
var teamColor=player.teamColor;//玩家队伍颜色
var teamPlayers=players[teamColor]||[];//该队伍的所有成员
for(var i=teamPlayers.length-1;i>=0;i--){//遍历删除
if(teamPlayers[i]===player){
teamPlayers.splice(i,1);//移出队伍
}
}
}
//玩家换队
operations.changeTeam=function(player,newTeamColor){
operations.removePlayer(player);//从原队伍中删除
player.teamColor=newTeamColor;//更变队伍颜色
operations.addPlayer(player);//增加到新队伍中
}
//玩家死亡
operations.playerDead=function(player){
var teamColor=player.teamColor;//玩家队伍
var teamPlayers=players[teamColor];//玩家所在的队伍人员
var all_dead=true;//默认设定为全部死亡
for(var i=0,player;player=teamPlayers[i++]){
if(player.state!="dead"){//如果玩家队伍还存活一人
all_dead=false;
break;
}
}
if(all_dead===true){//如果本队队友全部死亡
for(var i=0,player;player=teamPlayers[i++];){
player.lose();//本队所有玩家lose
}
for(var color in players){//遍历所有玩家颜色
if(color!==teamColor){//如果玩家不属于当前死亡玩家的颜色 也就是获取敌方人员
var teamPlayers=players[color];//其他队伍玩家
for(var i=0,player;player=teamPlayers[i++];){
player.win();//向敌方玩家通知胜利
}
}
}
}
}
var ReceiveMessage=function(){
var message=Array.prototype.shift.call(arguments);//argument的第一个参数为消息名称
operations[message].apply(this,argument);//找到相应的处理函数进行处理
}
return{
ReceiveMessage:ReceiveMessage
}
})()
可以看到除了中介者本身,没有一个玩家需要知道其他任何玩家的存在,玩家与玩家之间的耦合关系以及完全解除.我们还可以给中介者扩展更多的功能,以适应游戏需求的不断变化.运行与演示请购买本书,这里不做笔记
14.3 中介者模式的例子——购买商品
页面有两个区域 选择购买内容 输入购买数量 购买按钮相应的样式详细介绍请参考原书上内容
我们需要定义5个节点
- 下拉选择框 colorSelect
- 文本输入框 numberInput
- 展示颜色信息 colorInfo
- 展示购买数量信息 numberInfo
- 决定下一步操作的按钮 nextBtn
14.3.1 开始编写代码
从HTML开始编写
<body>
选择颜色:
<select id="colorSelect">
<option value="">请选择</option>
<option value="red">红色</option>
<option value="blue">蓝色</option>
</select>
输入购买数量:
<input type="text" id="numberInput" />
您选择了颜色:
<div id="colorInfo">
</div><br>
您输入了数量:
<div id="numberInfo">
</div><br>
<button id="nextBtn" disabled="true">请选择手机颜色和购买数量</button>
</body>
接下来分别监听colorSelect的onchange事件和numberInput的oninput事件,并且在这两个事件中做出相应的处理
<script type="text/javascript">
var colorSelect=document.getElementById("colorSelect"),
numberInput=document.getElementById("numberInput"),
colorInfo=document.getElementById("colorInfo"),
numberInfo=document.getElementById("numberInfo"),
nextBtn=document.getElementById("nextBtn");
var goods={//手机库存
"red":3,
"blue":6
}
colorSelect.onchange=function(){
var color=this.value,//颜色
number=numberInput.value,//数量
stock=goods[color];//该颜色的当前库存
colorInfo.innerHTML=color;
if(!color){
nextBtn.disable=true;
nextBtn.innerHTML="请选择手机颜色";
return
}
if(((number-0)|0)!==number-0){//用户输入的购买数量是否为正整数
nextBtn.disable=true;
nextBtn.innerHTML="请输入正确的购买数量";
return
}
if(number>stock){//当前选择数量超过库存
nextBtn.disable=true;
nextBtn.innerHTML="库存不足";
return
}
nextBtn.disable=false;
nextBtn.innerHTML="放入购物车";
}
</script>
14.3.2 对象之间的联系
当触发了colorSelect的onchange后,首先要让colorInfo中显示当前选中的颜色,然后获取用户当前输入的购买数量,对用户的输入值进行一些合法判断,再根据库存数量来判断nextBtn的显示状态.然后来编写numberInput的事件相关代码:
numberInput.oninput=function(){
var color=this.value,//颜色
number=numberInput.value,//数量
stock=goods[color];//该颜色的当前库存
numberInfo.innerHTML=number;
if(!color){
nextBtn.disable=true;
nextBtn.innerHTML="请选择手机颜色";
return
}
if(((number-0)|0)!==number-0){//用户输入的购买数量是否为正整数
nextBtn.disable=true;
nextBtn.innerHTML="请输入正确的购买数量";
return
}
if(number>stock){//当前选择数量超过库存
nextBtn.disable=true;
nextBtn.innerHTML="库存不足";
return
}
nextBtn.disable=false;
nextBtn.innerHTML="放入购物车";
}
14.3.3 可能遇到的困难
虽然目前顺利完成代码编写.但是如果有新需求加入那么又要重写一边代码.比如我们接下来要增加一个新的下拉栏,代表选择手机内存.现在我们需要计算 颜色 内存 和购买数量来判断nextBtn是显示库存不足还是放入购物车现在我们要增加两个HTML节点
<body>
选择颜色:
<select id="colorSelect">
<option value="">请选择</option>
<option value="red">红色</option>
<option value="blue">蓝色</option>
</select>
选择颜色:
<select id="memorySelect">
<option value="">请选择</option>
<option value="32G">32G</option>
<option value="16G">16G</option>
</select>
输入购买数量:
<input type="text" id="numberInput" />
您选择了颜色:
<div id="colorInfo">
</div><br>
您选择了内存:
<div id="memoryInfo">
</div><br>
您输入了数量:
<div id="numberInfo">
</div><br>
<button id="nextBtn" disabled="true">请选择手机颜色和购买数量</button>
</body>
<script type="text/javascript">
var colorSelect=document.getElementById("colorSelect"),
memorySelect=document.getElementById("memorySelect"),
numberInput=document.getElementById("numberInput"),
colorInfo=document.getElementById("colorInfo"),
memoryInfo=document.getElementById("memoryInfo"),
numberInfo=document.getElementById("numberInfo"),
nextBtn=document.getElementById("nextBtn");
</script>
接下来修改表示存库的JSON对象以及修改colorSelect的onchange事件
<script type="text/javascript">
var goods={//手机库存
"red|32G":3,//红色32G,库存数量为3
"red|16G":0,
"blue|16G":1,
"blue|16G":6,
}
colorSelect.onchange=function(){
var color=this.value,
memory=memorySelect.value,
stock=goods[color+"|"+memory];
number=numberInput.value;//数量
colorInfo.innerHTML=color;
if(!color){
nextBtn.disable=true;
nextBtn.innerHTML="请选择手机颜色";
return
}
if(!memory){
nextBtn.disable=true;
nextBtn.innerHTML="请选择手机内存";
return
}
if(((number-0)|0)!==number-0){//用户输入的购买数量是否为正整数
nextBtn.disable=true;
nextBtn.innerHTML="请输入正确的购买数量";
return
}
if(number>stock){//当前选择数量超过库存
nextBtn.disable=true;
nextBtn.innerHTML="库存不足";
return
}
nextBtn.disable=false;
nextBtn.innerHTML="放入购物车";
}
</script>
同样我们需要改变numberInput的事件相关代码…..我的天…还要新增加一个memorySelect的onchange事件.
memory.onchange=function(){
var color=this.value,
memory=memorySelect.value,
stock=goods[color+"|"+memory];
memoryInfo.innerHTML=memory;
if(!color){
nextBtn.disable=true;
nextBtn.innerHTML="请选择手机颜色";
return
}
if(!memory){
nextBtn.disable=true;
nextBtn.innerHTML="请选择手机内存";
return
}
if(((number-0)|0)!==number-0){//用户输入的购买数量是否为正整数
nextBtn.disable=true;
nextBtn.innerHTML="请输入正确的购买数量";
return
}
if(number>stock){//当前选择数量超过库存
nextBtn.disable=true;
nextBtn.innerHTML="库存不足";
return
}
nextBtn.disable=false;
nextBtn.innerHTML="放入购物车";
}
仅仅是增加一个内存选择条件,就需要改动所有的事件监听函数…每个节点对象都是耦合在一起的
14.3.4 引入中介者
引入中介者对象,所有的节点对象都只跟中介者通信
var goods={//手机库存
"red|32G":3,
"red|16G":0,
"blue|32G":1,
"blue|16G":6,
}
var mediator=(function(){
var colorSelect=document.getElementById("colorSelect"),
memorySelect=document.getElementById("memorySelect"),
numberInput=document.getElementById("numberInput"),
colorInfo=document.getElementById("colorInfo"),
memoryInfo=document.getElementById("memoryInfo"),
numberInfo=document.getElementById("numberInfo"),
nextBtn=document.getElementById("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.disable=true;
nextBtn.innerHTML="请选择手机颜色";
return
}
if(!memory){
nextBtn.disable=true;
nextBtn.innerHTML="请选择手机内存";
return
}
if(((number-0)|0)!==number-0){//用户输入的购买数量是否为正整数
nextBtn.disable=true;
nextBtn.innerHTML="请输入正确的购买数量";
return
}
if(number>stock){//当前选择数量超过库存
nextBtn.disable=true;
nextBtn.innerHTML="库存不足";
return
}
nextBtn.disable=false;
nextBtn.innerHTML="放入购物车";
}
}
})()
//事件函数
colorSelect.onchange=function(){
mediator.changed(this);
};
memorySelect.onchange=function(){
mediator.changed(this);
}
numberInput.oninput=function(){
mediator.changed(this)
}
可以想象,某天我们又要新增一些跟需求相关的节点.我们只需要改动中介者函数即可
小结
中介者模式是迎合迪米特法则的中实现,迪米特法则也叫最小知识原则.是指一个对象应该尽可能的少了解另外的对象.中介者模式可以非常方便的对模块进行解耦,但是中介者本身就是一个很难维护的对象.毕竟我们写程序是为了快速完成项目需求,而不是堆砌模式和过度设计.关键就在于如何衡量对象之间的耦合程度.