javascript模式
2019-12-03 本文已影响0人
洛音轩
模式一
中介者模式
- 应用程序无论其大小，都是由一些单个的对象所组成，。所有这些对象需要一种方式来实现相互通信，而这种通信方式在一定程度上不降低可维护性，也不损害那种安全的改变部分应用程序而不破环其余部分的能力。随着应用程序的增长，将添加越来越多的对象。然后在代码重构期间，对象将被删除或者重新整理。当对象相互知道太多的信息并且直接通信时，这将会导致产生不良的紧耦合问题。中介者模式缓解了该问题并促进形成松散耦合，而且还有助于提高可维护性。
-
在该模式中，独立的对象之间并不直接通信，而是通过mediator对象。当其中的一个colleague对象改变状态以后，它将会通知该mediator，而mediator将会把改变传达到任意其他应该知道此变化的colleague对象。
mediator.jpg
demo实现展示
分配玩家数及对应的key
结果展示
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/style.css" rel="stylesheet">
<style>
* {
padding: 0px;
margin: 0px;
}
.wrapper {
width: 80%;
margin: 100px auto;
border: 2px solid #000;
text-align: center;
}
.wrapper .startSection button {
width: 60px;
height: 40px;
color: #f40;
background-color: #000;
}
.wrapper .timeSection span {
color: #0ff;
}
.wrapper .playerSection p {
width: 60%;
margin: 10px auto;
height: 25px;
line-height: 25px;
border-bottom: 1px solid blue;
background-color: yellow;
color: #f00;
}
.wrapper .playerSection p #score {
color: #0f0;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="startSection">
<button id="btn">start</button>
</div>
<div class="timeSection">
<span id="time">倒计时3秒</span>
</div>
<div class="playerSection" id="playerSection">
</div>
</div>
<script type="text/javascript" src="game-707.js">
</script>
</body>
</html>
'use strict'
// 玩家构造函数
// 有分数 有名字 有唯一的键盘key 还可以自己玩 玩完之后 -> mediator
function Player () {
this.points = 0;
this.name = '';
this.key = '';
}
Player.prototype.play = function () {
this.points += 1;
mediator.playerPlay(this);
}
// 得分板对象
var scoreBoard = {
element: document.getElementById('playerSection'),
renderPage: function (allPlayers) {
//显示所有玩家信息
var innerHTMLStr = '';
var str = '';
for (var key in allPlayers) {
if (key === 'length') continue;
innerHTMLStr += '<p><span id="user">' + allPlayers[key].name + ': </span><span id="score' + allPlayers[key].key + '">' + allPlayers[key].points + '</span></p>';
}
this.element.innerHTML = innerHTMLStr;
},
upPlayerScore: function (player) {
var oSpanScore = document.getElementById('score' + player.key);
oSpanScore.innerText = player.points;
}
}
// mediator 中介者对象
var mediator = {
allPlayers: {
length: 0,
},
init: function () {
var playNum = parseInt( window.prompt('请输入玩家个数') ) || 2;
this.managePlayer(playNum);
scoreBoard.renderPage(this.allPlayers);
this.bindEvent();
},
bindEvent: function () {
var startBtn = document.getElementById('btn');
startBtn.onclick = this.gameStart.bind(this);
},
gameStart: function () {
var oSpanTime = document.getElementById('time');
var time = 3;
var outerTimer = null;
var innerTimer = null;
var stopTime = 10;
var _self = this;
outerTimer = setInterval(function () {
oSpanTime.innerText = '倒计时' + (time - 1) + '秒';
if(--time == 0) {
oSpanTime.innerText = 'Go!!!';
window.onkeypress = _self.keyPress.bind(_self);
clearInterval(outerTimer);
innerTimer = setInterval(function () {
oSpanTime.innerText = stopTime - 1;
if (--stopTime == 0) {
clearInterval(innerTimer);
window.onkeypress = null;
oSpanTime.innerText = 'over';
}
}, 1000);
}
}, 1000)
},
playerPlay: function (player) {
scoreBoard.upPlayerScore(player);
},
managePlayer: function (num) {
while(num--) {
this.addPlayer();
}
},
addPlayer: function () {
var newPlayer = new Player();
newPlayer.name = window.prompt('请设置玩家' + (this.allPlayers.length + 1) + '姓名');
var onlyKey = window.prompt('请为玩家' + (this.allPlayers.length + 1) + '分配唯一的按键');
while(this.allPlayers[onlyKey]) {
// 提示你重新分配按键
onlyKey = window.prompt('按键已经分配过，请为玩家重新分配唯一的按键');
}
newPlayer.key = onlyKey;
this.allPlayers[onlyKey] = newPlayer;
this.allPlayers.length++;
},
keyPress: function (e) {
var event = e || window.event;
var downKey = String.fromCharCode(event.charCode); //a
this.allPlayers[downKey].play();
}
}
mediator.init();
