Javascript设计模式-16-中介者模式

Javascript 设计模式 - 16 - 中介者模式

简介

中介者模式的作用就是解除对象与对象之间的紧耦合关系,增加一个中介者对象后,所有相关的对象都通过中介者对象来通信,而不是相互引用,所以当一个对象发生改变时,只需要通知中介者对象即可,中介者模式使得网状的多对多关系变成了相对简单的一对多关系

下边例子借用了 《javascript 设计模式与开发实践》

优缺点

  • 中介者模式使得各个对象之间得以解耦,以中介中和对象之间的一对多关系取代了对象之间的网状多对多关系,各个对象只要关注自身的功能实现,对象之间的关系交给中介者实现和维护

  • 最大的缺点是系统中会新增一个中介者对象,因为对象之间交互的复杂性,转移成了中介者对象的复杂性,使得中介者对象经常是巨大的,难以维护的。

    /* ===== 创建玩家 ===== */ 
    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 + ' lose ' );
    }

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

    /* ===== 创建玩家的工厂 ===== */ 
    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.playerDead = function (player) {
            var teamColor = player.teamColor;
            // 找到玩家所在队伍
            var teamPlayers = players[teamColor];
            var all_dead = true;

            for (var i = 0; i < teamPlayers.length; i++) {
                if (teamPlayers[i].state !== 'dead') {
                    all_dead = false;
                    break;
                }
            }

            // 全部死亡发布结果
            if (all_dead === true) {
                // 本队全部失败
                for (var k = 0; k < teamPlayers.length; k++) {
                    teamPlayers[k].lose();
                }

                // 其他队伍全部成功
                for ( var color in players ){ 
                    if ( color !== teamColor ){ 
                        var otherTeamPlayers = players[ color ]; 
                        for ( var j = 0; j < otherTeamPlayers.length; j++){ 
                            otherTeamPlayers[j].win(); 
                        } 
                    } 
                }
            }
        }

        var reciveMessage = function () {
            var message = Array.prototype.shift.call(arguments);

            operations[ message ].apply( this, arguments );
        }

        return {reciveMessage};
    }())


    // 测试
    // 红队: 
    var player1 = playerFactory( 'AA', 'red' ), 
        player2 = playerFactory( 'BB', 'red' ), 
        player3 = playerFactory( 'CC', 'red' ), 
        player4 = playerFactory( 'DD', 'red' );

    // 蓝队: 
    var player5 = playerFactory( 'aa', 'blue' ), 
        player6 = playerFactory( 'bb', 'blue' ), 
        player7 = playerFactory( 'cc', 'blue' ), 
        player8 = playerFactory( 'dd', 'blue' );

    player1.die(); 
    player2.die();
    player3.die(); 
    player4.die();
    /*
        AA lose 
        BB lose 
        CC lose 
        DD lose 
        aa won 
        bb won 
        cc won 
        dd won 
    */ 

文章列表

  1. javascript设计模式 – 设计原则
  2. JavaScript设计模式–高阶函数
  3. Javascript 设计模式 - 01 - 原型模式
  4. Javascript 设计模式 - 02 - 单例模式
  5. Javascript 设计模式 - 03 - 建造者模式
  6. Javascript 设计模式 - 04 - 工厂模式
  7. Javascript 设计模式 - 05 - 外观模式
  8. Javascript 设计模式 - 06 - 代理模式
  9. Javascript 设计模式 - 07 - 观察者模式(发布订阅模式)
  10. Javascript 设计模式 - 08 - 策略模式
  11. Javascript 设计模式 - 09 - 命令模式
  12. Javascript 设计模式 - 10 - 迭代器模式
  13. Javascript 设计模式 - 11 - 职责链模式
  14. Javascript 设计模式 - 12 - 适配器模式
  15. Javascript 设计模式 - 13 - 模板方法
  16. Javascript 设计模式 - 14 - 组合模式
  17. Javascript 设计模式 - 15 - 享元模式
  18. Javascript 设计模式 - 16 - 中介者模式
  19. Javascript 设计模式 - 17 - 装饰者模式
  20. Javascript 设计模式 - 18 - 状态模式
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript 设计模式是在 JavaScript 编程中经常使用的一种代码组织和架构方法。设计模式可以帮助开发者解决常见的问题,并提供可复用的解决方案。 以下是一些常见的 JavaScript 设计模式: 1. 工厂模式(Factory Pattern):通过使用工厂方法创建对象,将对象的创建和使用分离开来,提高代码的可扩展性和可维护性。 2. 单例模式(Singleton Pattern):确保一个类只有一个实例,并提供一个全局访问点来访问该实例。 3. 观察者模式(Observer Pattern):定义了对象之间的一对多依赖关系,当一个对象的状态发生改变时,所有依赖它的对象都会被自动通知并更新。 4. 发布-订阅模式(Publish-Subscribe Pattern):也是一种观察者模式的变体,在这种模式中,发布者(Publisher)和订阅者(Subscriber)之间通过消息队列进行通信。 5. 原型模式(Prototype Pattern):通过复制现有对象来创建新对象,避免了使用类进行实例化的复杂性。 6. 适配器模式(Adapter Pattern):将一个类的接口转换成客户端所期望的另一个接口,使得原本不兼容的类可以一起工作。 7. 装饰者模式(Decorator Pattern):动态地给对象添加新的功能,而不影响其他对象。 8. 策略模式(Strategy Pattern):定义一系列算法,将每个算法封装起来,并使它们可以互换使用。 这些设计模式可以帮助开发者在编写 JavaScript 代码时更好地组织和设计代码结构,提高代码的可读性、可维护性和可扩展性。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值