javascript中介者模式-咸魚網(wǎng)的思考

在字典里,中介者是指“協(xié)助談判和解決沖突的中立方”。在模式設(shè)計里,中介者是一種行為設(shè)計模式,它允許我們公開一個統(tǒng)一的接口,系統(tǒng)不同部分可以通過該接口進(jìn)行通訊。
也許一個對象可以和十個對象之間發(fā)生聯(lián)系,十個對象之間有可以發(fā)生相互聯(lián)系,從而形成一張巨大的關(guān)系網(wǎng),要想在這么復(fù)雜的關(guān)系網(wǎng)中理清關(guān)系不是一件容易的事情。
中介者模式就是要把對象之間的相互耦合關(guān)系解除。通過增加一個中介者對象,每個對象都和中介者對象通訊,對象之間不直接發(fā)生聯(lián)系。
中介者對象是的對象之間的網(wǎng)狀結(jié)構(gòu)變?yōu)橐粚Χ嗟年P(guān)系。

拿咸魚網(wǎng)來說。以前如果我們有閑置的東西,可以在小區(qū)的路上擺個攤子,這樣看到東西的鄰居可能會來買??墒沁@種關(guān)系是十分不穩(wěn)定和復(fù)雜的,交易發(fā)生都有偶然性。
如果我們把閑置發(fā)布到咸魚,那么發(fā)布者和購買者不會直接發(fā)生聯(lián)系。之間的關(guān)系都是通過咸魚來完成的。這樣的模式就比直接交易便利的多。

參考《javascript設(shè)計模式與開發(fā)實踐》第14章。《javascript設(shè)計模式》動物書 第9章。9.6

看一個簡單的例子
這是一個捉對廝殺的游戲。

function Player( name ){ //玩家構(gòu)造函數(shù)
        this.name = name //玩家名字
        this.enemy = null; // 敵人
    };

    Player.prototype.win = function(){ //獲勝函數(shù)
        console.log( this.name + ' won ' );
    };
    Player.prototype.lose = function(){//失敗函數(shù)
        console.log( this.name +' lost' );
    };
    Player.prototype.die = function(){//失敗函數(shù)
        this.lose();
        this.enemy.win();
    };
    //接下來創(chuàng)建2 個玩家對象:
    var player1 = new Player( '皮蛋' );
    var player2 = new Player( '小乖' );
    //給玩家相互設(shè)置敵人:
    player1.enemy = player2;
    player2.enemy = player1;

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

這樣兩個對象之間的相互作用還是比較簡單的。
當(dāng)增加玩家組隊的時候,就比較復(fù)雜了,看看依照上面的思路的代碼

var players = []; //玩家的數(shù)組,使用的時候是二維數(shù)組,一維是隊顏色

    function Player( name, teamColor ){//構(gòu)造函數(shù)
        this.partners = []; // 隊友列表
        this.enemies = []; // 敵人列表
        this.state = 'live'; // 玩家狀態(tài)
        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'; // 設(shè)置玩家狀態(tài)為死亡,標(biāo)記變量
        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 ); 
// 創(chuàng)建新玩家
        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' );
    //藍(lán)隊:4個玩家
    var player5 = playerFactory( '黑妞', 'blue' ),
    player6 = playerFactory( '蔥頭', 'blue' ),
    player7 = playerFactory( '胖墩', 'blue' ),
    player8 = playerFactory( '海盜', 'blue' );

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


以上的代碼就有點復(fù)雜了。當(dāng)玩家失敗(死亡)以后要遍歷其他隊友等等。加入隊伍的時候也比較麻煩,要相互確認(rèn)。隊友之間的相互交叉變化很麻煩。

下面看看中介者模式改造的代碼。
重要的是添加了playerDirector這個中介者對象。
playerDirector中介者對象中添加接口,receiveMessage()通知中介者來進(jìn)行相關(guān)操作??梢韵仍谥薪檎邔ο笾锌纯催@個方法
reciveMessage( 'playerDead', this );第一個參數(shù)是通知中介者的方法。第二個參數(shù)就是創(chuàng)建的玩家對象。

  /********************中介者模式********************/
 function Player( name, teamColor ){//構(gòu)造函數(shù)
        this.name = name; // 角色名字
        this.teamColor = teamColor; // 隊伍顏色,玩家數(shù)組的第一維
        this.state = 'alive'; // 玩家生存狀態(tài)
    };

    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 ); 
              // 給中介者發(fā)送消息,玩家死亡
    };
    /*******************移除玩家*****************/
    Player.prototype.remove = function(){
        playerDirector.reciveMessage( 'removePlayer', this );     
               // 給中介者發(fā)送消息,移除一個玩家
    };

    /*******************玩家換隊*****************/
    Player.prototype.changeTeam = function( color ){
        playerDirector.reciveMessage( 'changeTeam', this, color );     
          // 給中介者發(fā)送消息,玩家換隊
    };
       
    var playerDirector= ( function(){ //中介者構(gòu)造函數(shù)
        var players = {}, // 保存所有玩家
            operations = {}; // 中介者可以執(zhí)行的操作
        /****************新增一個玩家***************************/
        operations.addPlayer = function( player ){
            var teamColor = player.teamColor; // 玩家的隊伍顏色
            players[ teamColor ] = players[ teamColor ] || []; 
                   // 如果該顏色的玩家還沒有成立隊伍,則創(chuàng)建

            players[ teamColor ].push( player ); // 添加玩家進(jìn)隊伍
        };
/****************移除一個玩家***************************/
    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 的第一個參數(shù)為消息名稱
        operations[ message ].apply( this, arguments );
    };

    return {
        reciveMessage: reciveMessage//揭示模式的方法
    }

})();

    // 紅隊:
    var player1 = playerFactory( '皮蛋', 'red' ),
    player2 = playerFactory( '小乖', 'red' ),
    player3 = playerFactory( '寶寶', 'red' ),
    player4 = playerFactory( '小強', 'red' );
    // 藍(lán)隊:
    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();

中介者模式中,使用者之間是不發(fā)生任何關(guān)系的。發(fā)生任何的操作都是通知中介者。中介者再通知其他使用者。
使用者之間的耦合解除了。

數(shù)組的使用上靈活度很大要注意,其他的地方還是很好理解的。

我感覺react組件和redux模塊的相互關(guān)系就是中介者模式,您覺得呢?

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容