Skip to content

Commit 0b40ce8

Browse files
中介者模式
1 parent c1d7366 commit 0b40ce8

4 files changed

Lines changed: 203 additions & 230 deletions

File tree

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
中介者模式使各个对象之间得以解耦,以中介者和对象之间的一对多关系取代了对象之间的网状多对多关系
2+
各个对象只需关注自身功能的实现,对象之间的交互关系交给了中介者对象来实现和维护
3+
中介者模式是迎合迪米特法则(最少知识原则)的一种实现
4+
迪米特法则是指:一个对象应该尽可能少地了解另外的对象(不和陌生人说话)
5+
在中介者模式里,对象之间几乎不知道彼此的存在,它们只能通过中介者对象来互相影响对方
6+
7+
<script>
8+
/**
9+
* 定义 Player 类
10+
*/
11+
function Player( name, teamColor ){
12+
this.name = name; // 角色名字
13+
this.teamColor = teamColor; // 队伍颜色
14+
this.state = 'alive'; // 玩家生存状态
15+
};
16+
Player.prototype.win = function(){
17+
console.log( this.name + ' won ' );
18+
};
19+
Player.prototype.lose = function(){
20+
console.log( this.name +' lost' );
21+
};
22+
// 玩家死亡
23+
Player.prototype.die = function(){
24+
this.state = 'dead';
25+
playerDirector.reciveMessage( 'playerDead', this ); // 给中介者发送消息,玩家死亡
26+
};
27+
// 移除玩家
28+
Player.prototype.remove = function(){
29+
playerDirector.reciveMessage( 'removePlayer', this ); // 给中介者发送消息,移除一个玩家
30+
};
31+
// 玩家换队
32+
Player.prototype.changeTeam = function( color ){
33+
playerDirector.reciveMessage( 'changeTeam', this, color ); // 给中介者发送消息,玩家换队
34+
};
35+
36+
/**
37+
* 定义中介者
38+
*/
39+
var playerDirector = ( function(){
40+
var players = {}, // 保存所有玩家
41+
operations = {}; // 中介者可以执行的操作
42+
// 新增一个玩家
43+
operations.addPlayer = function( player ){
44+
var teamColor = player.teamColor; // 玩家的队伍颜色
45+
players[ teamColor ] = players[ teamColor ] || [];
46+
players[ teamColor ].push( player ); // 添加玩家进队伍
47+
};
48+
// 移除一个玩家
49+
operations.removePlayer = function( player ){
50+
var teamColor = player.teamColor, // 玩家的队伍颜色
51+
teamPlayers = players[ teamColor ] || []; // 该队伍所有成员
52+
for ( var i = teamPlayers.length - 1; i >= 0; i-- ){ // 遍历删除
53+
if ( teamPlayers[ i ] === player ){
54+
teamPlayers.splice( i, 1 );
55+
}
56+
}
57+
};
58+
// 玩家换队
59+
operations.changeTeam = function( player, newTeamColor ){
60+
operations.removePlayer( player ); // 从原队伍中删除
61+
player.teamColor = newTeamColor; // 改变队伍颜色
62+
operations.addPlayer( player ); // 增加到新队伍中
63+
};
64+
// 玩家死亡
65+
operations.playerDead = function( player ){
66+
var teamColor = player.teamColor,
67+
teamPlayers = players[ teamColor ]; // 玩家所在队伍
68+
var all_dead = true;
69+
for ( var i = 0, player; player = teamPlayers[ i++ ]; ){
70+
if ( player.state !== 'dead' ){
71+
all_dead = false;
72+
break;
73+
}
74+
}
75+
// 通知
76+
if ( all_dead === true ){ // 全部死亡
77+
for ( var i = 0, player; player = teamPlayers[ i++ ]; ){
78+
player.lose(); // 本队所有玩家lose
79+
}
80+
for ( var color in players ){
81+
if ( color !== teamColor ){
82+
var teamPlayers = players[ color ]; // 其他队伍的玩家
83+
for ( var i = 0, player; player = teamPlayers[ i++ ]; ){
84+
player.win(); // 其他队伍所有玩家win
85+
}
86+
}
87+
}
88+
}
89+
};
90+
// 处理消息调用
91+
var reciveMessage = function(){
92+
var message = Array.prototype.shift.call( arguments ); // arguments 的第一个参数为消息名称
93+
operations[ message ].apply( this, arguments );
94+
};
95+
96+
return {
97+
reciveMessage: reciveMessage
98+
}
99+
})();
100+
101+
// 红队:
102+
var player1 = playerFactory( '皮蛋', 'red' ),
103+
player2 = playerFactory( '小乖', 'red' ),
104+
player3 = playerFactory( '宝宝', 'red' ),
105+
player4 = playerFactory( '小强', 'red' );
106+
// 蓝队:
107+
var player5 = playerFactory( '黑妞', 'blue' ),
108+
player6 = playerFactory( '葱头', 'blue' ),
109+
player7 = playerFactory( '胖墩', 'blue' ),
110+
player8 = playerFactory( '海盗', 'blue' );
111+
// player1.die();
112+
// player2.die();
113+
// player3.die();
114+
// player4.die();
115+
116+
// player1.remove();
117+
// player2.remove();
118+
// player3.die();
119+
// player4.die();
120+
121+
player1.changeTeam( 'blue' );
122+
player2.die();
123+
player3.die();
124+
player4.die();
125+
126+
</script>
Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
<body>
2+
选择颜色: <select id="colorSelect">
3+
<option value="">请选择</option>
4+
<option value="red">红色</option>
5+
<option value="blue">蓝色</option>
6+
</select>
7+
选择内存: <select id="memorySelect">
8+
<option value="">请选择</option>
9+
<option value="32G">32G</option>
10+
<option value="16G">16G</option>
11+
</select>
12+
输入购买数量: <input type="text" id="numberInput"/><br/>
13+
您选择了颜色: <div id="colorInfo"></div><br/>
14+
您选择了内存: <div id="memoryInfo"></div><br/>
15+
您输入了数量: <div id="numberInfo"></div><br/>
16+
<button id="nextBtn" disabled="true">请选择手机颜色和购买数量</button>
17+
</body>
18+
19+
<script>
20+
var goods = { // 手机库存
21+
"red|32G": 3,
22+
"red|16G": 0,
23+
"blue|32G": 1,
24+
"blue|16G": 6
25+
};
26+
var mediator = (function () {
27+
var colorSelect = document.getElementById('colorSelect'),
28+
memorySelect = document.getElementById('memorySelect'),
29+
numberInput = document.getElementById('numberInput'),
30+
colorInfo = document.getElementById('colorInfo'),
31+
memoryInfo = document.getElementById('memoryInfo'),
32+
numberInfo = document.getElementById('numberInfo'),
33+
nextBtn = document.getElementById('nextBtn');
34+
return {
35+
changed: function (obj) {
36+
var color = colorSelect.value, // 颜色
37+
memory = memorySelect.value,// 内存
38+
number = numberInput.value, // 数量
39+
stock = goods[color + '|' + memory]; // 颜色和内存对应的手机库存数量
40+
if (obj === colorSelect) { // 如果改变的是选择颜色下拉框
41+
colorInfo.innerHTML = color;
42+
} else if (obj === memorySelect) {
43+
memoryInfo.innerHTML = memory;
44+
} else if (obj === numberInput) {
45+
numberInfo.innerHTML = number;
46+
}
47+
if (!color) {
48+
nextBtn.disabled = true;
49+
nextBtn.innerHTML = '请选择手机颜色';
50+
return;
51+
}
52+
if (!memory) {
53+
nextBtn.disabled = true;
54+
nextBtn.innerHTML = '请选择内存大小';
55+
return;
56+
}
57+
if (((number - 0) | 0) !== number - 0) { // 输入购买数量是否为正整数
58+
nextBtn.disabled = true;
59+
nextBtn.innerHTML = '请输入正确的购买数量';
60+
return;
61+
}
62+
nextBtn.disabled = false;
63+
nextBtn.innerHTML = '放入购物车';
64+
}
65+
}
66+
})();
67+
// 事件函数:
68+
colorSelect.onchange = function () {
69+
mediator.changed(this);
70+
};
71+
memorySelect.onchange = function () {
72+
mediator.changed(this);
73+
};
74+
numberInput.oninput = function () {
75+
mediator.changed(this);
76+
};
77+
</script>

06-设计模式/temp/13/13.html

Lines changed: 0 additions & 11 deletions
This file was deleted.

0 commit comments

Comments
 (0)