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模块的相互关系就是中介者模式,您觉得呢?

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 205,132评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,802评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,566评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,858评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,867评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,695评论 1 282
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,064评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,705评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,915评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,677评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,796评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,432评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,041评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,992评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,223评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,185评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,535评论 2 343

推荐阅读更多精彩内容