SOURCE

// // 属性
// function Player(name, teamColor) {
//     this.partners = []; // 队友列表 
//     this.enemies = []; // 敌人列表 
//     this.state = 'live'; // 玩家状态 
//     this.name = name; // 角色名字 
//     this.teamColor = teamColor; // 队伍颜色
// }

// Player.prototype.win = function () { // 胜利
//     console.log(this.name + ' won ');
// }
// Player.prototype.lose = function () { // 失败
//     console.log(this.name + ' lost');
// }

// Player.prototype.die = function () {
//     this.state = 'dead';
//     playerDirector.reciveMessage('playerDead', this) // 通知中介者
// }

// Player.prototype.remove = function () {
//     playerDirector.reciveMessage('removePlayer', this) // 通知中介者
// }

// // 换队
// Player.prototype.changeTeam = function (color) {
//     playerDirector.reciveMessage('changeTeam', this, color) // 通知中介者
// }

// // 工厂生产玩家
// var players = []
// var playerFactory = function (name, teamColor) {
//     var newPlayer = new Player(name, teamColor)
//     playerDirector.reciveMessage('addPlayer', newPlayer) // 通知中介者
//     return newPlayer;
// }


// // 中介者
// 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 = 0; i < teamPlayers.length; 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 (let player of teamPlayers) {
//             if (player.state !== 'dead') {
//                 all_dead = false
//                 break
//             }
//         }
//         // 全部阵亡
//         if (all_dead) {
//             for (let lPlyer of teamPlayers) { // 全部输
//                 lPlyer.lose()
//             }
//             for (let color in players) { // 全部赢
//                 if (color !== teamColor) {
//                     var teamPlayers = players[color] // 其他队伍的玩家
//                     for (let player of teamPlayers) {
//                         player.win() // 其他队伍赢
//                     }
//                 }
//             }
//         }
//     }

//     // 接收消息
//     var reciveMessage = function () {
//         // arguments 的第一个参数为消息名称
//         var message = Array.prototype.shift.call(arguments);
//         operations[message].apply(this, arguments);
//     }
//     return {
//         reciveMessage: reciveMessage
//     }
// })()

// // 红队:
// 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.remove(); 
// player2.remove(); 
// player3.changeTeam('blue'); 
// player4.die();


// ** 中介者模式的例子——购买商品**

var goods = { // 手机库存
    "red|32G": 3,
    "red|16G": 0,
    "blue|32G": 1,
    "blue|16G": 6
};

var mediator = (function () {
    var colorSelect = document.getElementById('colorSelect'),
        numberInput = document.getElementById('numberInput'),
        memorySelect = document.getElementById('memorySelect'),
        colorInfo = document.getElementById('colorInfo'),
        numberInfo = document.getElementById('numberInfo'),
        memoryInfo = document.getElementById('memoryInfo'),
        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.disabled = true;
                nextBtn.innerHTML = '请选择手机颜色';
                return;
            }

            if (!memory) {
                nextBtn.disabled = true;
                nextBtn.innerHTML = '请选择内存';
                return;
            }

            if (((number - 0) | 0) !== (number - 0) || !(number > 0)) {
                nextBtn.disabled = true;
                nextBtn.innerHTML = '请输入正确的购买数量';
                return;
            }

            if (number > stock) { // 当前选择数量没有超过库存量
                nextBtn.disabled = true;
                nextBtn.innerHTML = '库存不足';
                return;
            }

            nextBtn.disabled = false;
            nextBtn.innerHTML = '放入购物车';
        }
    }
})()

// 事件函数:
colorSelect.onchange = function () {
    mediator.changed(this);
};
memorySelect.onchange = function () {
    mediator.changed(this);
};
numberInput.oninput = function () {
    mediator.changed(this);
};

<html>

<body>
	<div>
		选择颜色: 选择内存:
		<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"/>
        <br/>
        您选择了颜色: <div id="colorInfo"></div>
        <br/> 您选择了内存: <div id="memoryInfo"></div>
        <br/> 您输入了数量: <div id="numberInfo"></div>
        <br/>
        <button id="nextBtn" disabled="true">请选择手机颜色和购买数量</button>
    </div>
</html>