目录

  1. 介绍
  2. 表单数据同步实例

  3. 玩家对战实例

    1. 初始代码
    2. 改造代码

介绍

中介者模式的作用是解决对象与对象之间的紧耦合关系，增加一个中介者对象后，所有的相关对象都通过中介者对象来通信，而不是相互引用，所以当一个对象发生改变时，只需要通知中介者对象即可。

中介者使各对象之间耦合松散，而且可以独立地改变它们之间的交互，中介者模式使网状的多对多关系变成了相对简单的一对多关系。

表单数据同步实例

接下来我们将使用中介者模式实现一个表单中的两个文本框之间的数据同步，代码如下:

  1. <form name="form">
  2.     <label for="phone1">电话号码1：</label>
  3.     <input name="phone1" type="text" />
  5.     <label for="phone2">电话号码2：</label>
  6.     <input name="phone2" type="text" />
  7. </form>
  9. <script>
  10. var Listener = function (formName) {
  11.     this.form = document.forms[formName];
  12.     this.fieldEls = [];
  13. };
  15. Listener.prototype.register = function (field) {
  16.     var self = this;
  17.     this.fieldEls.push(form[field]);
  18.     (function(field) {
  19.         self.form[field].addEventListener('keyup', function(e) {
  20.             for (var i = 0; i < self.fieldEls.length; i++) {
  21.                 if (self.fieldEls[i].name !== field) {
  22.                     self.fieldEls[i].value = e.target.value;
  23.                 }
  24.             }
  25.         });
  26.     })(field);
  27. }
  29. var listener = new Listener('form');
  30. listener.register('phone1');
  31. listener.register('phone2');
  32. </script>

以上代码的中介者就是由构造函数 Listener 生成的 listener 实例，我们调用 listener 的register()方法分别注册两个表单元素(phone1 和 phone2)，这样就实现了两个表单元素输入内容的同步化。register()内部的具体代码实现，如果感兴趣可以深入研究下。

如果不使用中介者模式，要实现表单元素间的数据同步，我们可能要给每个表单元素绑定输入内容变化侦听句柄，并且要将每个表单元素加入到一个”公共组织”，当一个表单元素的值发生改变时，在侦听句柄中进行”公共组织”所有成员的数据同步操作，这其实就是耦合，所以在这个场景下使用中介者模式恰到好处。

玩家对战实例

接下来的玩家对战实例的实现原理实际上和表单数据同步的原理差不多。我们将分别展示不使用中介者模式和使用中介者模式的代码实现。

初始代码

没有使用中介者模式的代码:

  1. // 玩家列表
  2. var players = [];
  4. // 玩家类
  5. function Player(name, teamColor) {
  6.     this.partners = []; // 队友列表
  7.     this.enemies = []; // 敌人列表
  8.     this.name = name; // 角色名字
  9.     this.state = 'live'; // 玩家状态
  10.     this.teamColor = teamColor; // 队伍颜色
  11. };
  13. Player.prototype.win = function () {
  14.     console.log('winner: ' + this.name);
  15. };
  17. Player.prototype.lose = function () {
  18.     console.log('loser: ' + this.name);
  19. };
  21. Player.prototype.die = function () {
  22.     var all_dead = true;
  23.     this.state = 'dead'; // 玩家状态设为死亡
  25.     // 遍历队友列表
  26.     for (var i = 0, l = this.partners.length; i < l; i++) {
  27.         // 如果还有一个队友没有死亡，则游戏还未结束
  28.         if (this.partners[i].state !== 'dead') {
  29.             all_dead = false;
  30.             break;
  31.         }
  32.     }
  34.     if (all_dead) {
  35.         this.lose();
  37.         // 通知所有队友游戏失败
  38.         for (var i = 0, l = this.partners.length; i < l; i++) {
  39.             this.partners[i].lose();
  40.         }
  42.         // 通知所有敌人游戏胜利
  43.         for (var i = 0, l = this.ememies.length; i < l; i++){
  44.             this.ememies[i].win();
  45.         }
  46.     }
  47. };
  49. // 定义一个工厂来创建玩家
  50. var playerFactory = function (name, teamColor) {
  51.     var newPlayer = new Player(name, teamColor); // 创建新玩家
  53.     // 通知所有玩家，有新玩家加入游戏
  54.     for (var i = 0, l = players.length; i < l; i++) {
  55.         if (players[i].teamColor === newPlayer.teamColor) {
  56.             // 相互添加到队友列表
  57.             players[i].partners.push(newPlayer);
  58.             newPlayer.partners.push(players[i]);
  59.         } else {
  60.             // 相互添加到敌人列表
  61.             players[i].enemies.push(newPlayer);
  62.             newPlayer.enemies.push(players[i]);
  63.         }
  64.     }
  66.     players.push(newPlayer);
  67.     return newPlayer;
  68. }

从以上代码可以看出，玩家与队友，玩家与敌人存在耦合关系，每次增加一个新玩家，就要对所有玩家的队友列表或敌人列表进行更新，如果玩家数量越来越多，这种维护成本将会变的非常大。这个时候仔细分析一下，其实每个玩家都不需要牢牢记住自己的队友和敌人是哪些人，我们可以增加一个”系统”(中介者)来管理玩家之间的关系，当游戏结束时，也由这个”系统”对所有玩家发出通知，这样子就可以减少大量的遍历操作，玩家间的耦合关系也将变得松散。要达到这种目的，就要使用中介者模式来改造代码。

改造代码

首先简化玩家类:

  1. function Player(name, teamColor) {
  2.     this.name = name; // 角色名字
  3.     this.teamColor = teamColor; // 队伍颜色
  4.     this.state = 'alive'; // 玩家生存状态
  5. };
  7. Player.prototype.win = function () {
  8.     console.log('winner: ' + this.name);
  9. };
  11. Player.prototype.lose = function () {
  12.     console.log('loser: ' + this.name);
  13. };
  15. Player.prototype.die = function () {
  16.     this.state = 'dead';
  18.     // 给中介者发送消息，玩家死亡
  19.     playerDirector.ReceiveMessage('playerDead', this);
  20. };
  22. Player.prototype.remove = function () {
  23.     // 给中介者发送消息，移除一个玩家
  24.     playerDirector.ReceiveMessage('removePlayer', this);
  25. };

接下来要考虑如何设计中介者对象 playerDirector，其实现有两种方法:

  1. 利用发布-订阅模式。将 playerDirector 实现为订阅者，各 player 作为发布者，一旦 player 的状态发生变化，便推送消息给 playerDirector，playerDirector 处理消息后将反馈发送给其他 player;

  2. 在 playerDirector 中开放一些接收消息的接口，各 player 可以直接调用该接口来给 playerDirector 发送消息，player 只需传递一个参数给 playerDirector，这个参数的目的是使 playerDirector 可以识别发送者。同样，playerDirector 接收到消息后会将处理结果反馈给其他 player。

以第二种方式创建中介者对象为例:

  1. // 创建中介者对象
  2. var playerDirector = (function () {
  3.     var players = {}; // 保存所有玩家
  4.     var operations = {}; // 中介者可以执行的操作
  6.     // 新增一个玩家
  7.     operations.addPlayer = function (player) {
  8.         var teamColor = player.teamColor;
  9.         players[teamColor] = players[teamColor] || [];
  10.         players[teamColor].push(player);
  11.     };
  13.     // 移除一个玩家
  14.     operations.removePlayer = function (player) {
  15.         var teamColor = player.teamColor;
  16.         var teamPlayers = players[teamColor] || [];
  18.         for (var i = teamPlayers.length - 1; i >= 0; i--) {
  19.             if (teamPlayers[i] === player) {
  20.                 teamPlayers.splice(i, 1);
  21.             }
  22.         }
  23.     };
  25.     // 玩家角色死亡
  26.     operations.playerDead = function (player) {
  27.         var teamColor = player.teamColor;
  28.         var teamPlayers = players[teamColor];
  29.         var all_dead = true;
  31.         // 遍历队友列表
  32.         for (var i = 0, l = teamPlayers.length; i < l; i++) {
  33.             // 如果还有一个队友没有死亡，则游戏还未结束
  34.             if (teamPlayers[i].state !== 'dead') {
  35.                 all_dead = false;
  36.                 break;
  37.             }
  38.         }
  40.         if (all_dead) {
  41.             // 通知所有队友游戏失败
  42.             for (var i = 0, l = teamPlayers.length; i < l; i++) {
  43.                 teamPlayers[i].lose();
  44.             }
  46.             for (var color in players) {
  47.                 // 通知所有敌人游戏胜利
  48.                 if (color !== teamColor) {
  49.                     var teamPlayers = players[color];
  51.                     for (var i = 0, l = teamPlayers.length; i < l; i++) {
  52.                         teamPlayers[i].win();                        
  53.                     }
  54.                 }
  55.             }
  56.         }
  57.     };
  59.     var ReceiveMessage = function () {
  60.         // arguments的第一个参数为消息名称
  61.         var message = Array.prototype.shift.call(arguments);
  62.         operations[message].apply(this, arguments);
  63.     };
  65.     return {
  66.         ReceiveMessage: ReceiveMessage
  67.     }
  68. })();
  1. ID         : 60
  2. DATE       : 2018/01/14
  3. AUTHER     : WJT20
  4. TAG        : JavaScript