javascript中介者模式-咸鱼网的思考

在字典里,中介者是指“协助谈判和解决冲突的中立方”。在模式设计里,中介者是一种行为设计模式,它允许我们公开一个统一的接口,系统不同部分可以通过该接口进行通讯。
也许一个对象可以和十个对象之间发生联系,十个对象之间有可以发生相互联系,从而形成一张巨大的关系网,要想在这么复杂的关系网中理清关系不是一件容易的事情。
中介者模式就是要把对象之间的相互耦合关系解除。通过增加一个中介者对象,每个对象都和中介者对象通讯,对象之间不直接发生联系。
中介者对象是的对象之间的网状结构变为一对多的关系。

拿咸鱼网来说。以前如果我们有闲置的东西,可以在小区的路上摆个摊子,这样看到东西的邻居可能会来买。可是这种关系是十分不稳定和复杂的,交易发生都有偶然性。
如果我们把闲置发布到咸鱼,那么发布者和购买者不会直接发生联系。之间的关系都是通过咸鱼来完成的。这样的模式就比直接交易便利的多。

参考《javascript设计模式与开发实践》第14章。《javascript设计模式》动物书 第9章。9.6

看一个简单的例子
这是一个捉对厮杀的游戏。

function Player( name ){ //玩家构造函数
        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();
    };
    //接下来创建2 个玩家对象:
    var player1 = new Player( '皮蛋' );
    var player2 = new Player( '小乖' );
    //给玩家相互设置敌人:
    player1.enemy = player2;
    player2.enemy = player1;

    player1.die();// 输出:皮蛋 lost、小乖 won

这样两个对象之间的相互作用还是比较简单的。
当增加玩家组队的时候,就比较复杂了,看看依照上面的思路的代码

var players = []; //玩家的数组,使用的时候是二维数组,一维是队颜色

    function Player( name, teamColor ){//构造函数
        this.partners = []; // 队友列表
        this.enemies = []; // 敌人列表
        this.state = 'live'; // 玩家状态
        this.name = name; // 角色名字
        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, partner; partner = this.partners[ i++ ]; ){ 
      // 遍历队友列表
            if ( partner.state !== 'dead' ){ 
    // 如果还有一个队友没有死亡,则游戏还未失败
                all_dead = false;
                break;
            }
        }
        if ( all_dead === true ){ // 如果队友全部死亡
            this.lose(); // 通知自己游戏失败
            for ( var i = 0, partner; partner = this.partners[ i++ ]; ){
 // 通知所有队友玩家游戏失败
                partner.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 === newPlayer.teamColor ){ 
// 如果是同一队的玩家
                player.partners.push( newPlayer ); 
// 相互添加到队友列表
                newPlayer.partners.push( player );
            }else{
                player.enemies.push( newPlayer ); 
// 相互添加到敌人列表
                newPlayer.enemies.push( player );
            }
        }
        players.push( newPlayer );
        return newPlayer;
    };

    //红队:4个玩家
    var player1 = playerFactory( '皮蛋', 'red' ),
    player2 = playerFactory( '小乖', 'red' ),
    player3 = playerFactory( '宝宝', 'red' ),
    player4 = playerFactory( '小强', 'red' );
    //蓝队:4个玩家
    var player5 = playerFactory( '黑妞', 'blue' ),
    player6 = playerFactory( '葱头', 'blue' ),
    player7 = playerFactory( '胖墩', 'blue' ),
    player8 = playerFactory( '海盗', 'blue' );

    player1.die();
    player2.die();
    player4.die();
    player3.die();


以上的代码就有点复杂了。当玩家失败(死亡)以后要遍历其他队友等等。加入队伍的时候也比较麻烦,要相互确认。队友之间的相互交叉变化很麻烦。

下面看看中介者模式改造的代码。
重要的是添加了playerDirector这个中介者对象。
playerDirector中介者对象中添加接口,receiveMessage()通知中介者来进行相关操作。可以先在中介者对象中看看这个方法
reciveMessage( ‘playerDead’, this );第一个参数是通知中介者的方法。第二个参数就是创建的玩家对象。

  /********************中介者模式********************/
 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 +' 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 playerDirector= ( function(){ //中介者构造函数
        var players = {}, // 保存所有玩家
            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, // 玩家的队伍颜色
        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,
        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(); // 其他队伍所有玩家win
                    }
                }
            }
        }
    };
         
       var reciveMessage = function(){
            //被中介者中使用通知中介者的方法
        var message = Array.prototype.shift.call( arguments ); // 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.die();
    player2.die();
    player3.die();
    player4.die();

    player1.remove();
    player2.remove();
    player3.die();
    player4.die();

    player1.changeTeam( 'blue' );
    player2.die();
    player3.die();
    player4.die();

中介者模式中,使用者之间是不发生任何关系的。发生任何的操作都是通知中介者。中介者再通知其他使用者。
使用者之间的耦合解除了。

数组的使用上灵活度很大要注意,其他的地方还是很好理解的。

我感觉react组件和redux模块的相互关系就是中介者模式,您觉得呢?

    原文作者:smartphp
    原文地址: https://www.jianshu.com/p/b3f81eb21f99
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞