javascript设计模式之中介者模式学习笔记

先来理解这么一个问题,假如我们前端开发接的需求是需求方给我们需求,可能一个前端开发会和多个需求方打交道,所以会保持多个需求方的联系,那么在程序里面就意味着保持多个对象的引用,当程序的规模越大,对象会越来越多,他们之间的关系会越来越复杂,那现在假如现在有一个中介者(假如就是我们的主管)来对接多个需求方的需求,那么需求方只需要把所有的需求给我们主管就可以,主管会依次看我们的工作量来给我们分配任务,这样的话,我们前端开发就不需要和多个业务方联系,我们只需要和我们主管(也就是中介)联系即可,这样的好处就弱化了对象之间的耦合。

日常生活中的列子:

中介者模式对于我们日常生活中经常会碰到,比如我们去房屋中介去租房,房屋中介人在租房者和房东出租者之间形成一条中介;租房者并不关心租谁的房,房东出租者也并不关心它租给谁,因为有中介,所以需要中介来完成这场交易。

中介者模式的作用是解除对象与对象之间的耦合关系,增加一个中介对象后,所有的相关对象都通过中介者对象来通信,而不是相互引用,所以当一个对象发送改变时,只需要通知中介者对象即可。中介者使各个对象之间耦合松散,而且可以独立地改变它们之间的交互。

实现中介者的列子如下:

不知道大家有没有玩过英雄杀这个游戏,最早的时候,英雄杀有2个人(分别是敌人和自己);我们针对这个游戏先使用普通的函数来实现如下:

比如先定义一个函数,该函数有三个方法,分别是win(赢), lose(输),和die(敌人死亡)这三个函数;只要一个玩家死亡该游戏就结束了,同时需要通知它的对手胜利了; 代码需要编写如下:

function Hero(name) { this.name = name; this.enemy = null; } Hero.prototype.win = function(){ console.log(this.name + 'Won'); } Hero.prototype.lose = function(){ console.log(this.name + 'lose'); } Hero.prototype.die = function(){ this.lose(); this.enemy.win(); } // 初始化2个对象 var h1 = new Hero("朱元璋"); var h2 = new Hero("刘伯温"); // 给玩家设置敌人 h1.enemy = h2; h2.enemy = h1; // 朱元璋死了 也就输了 h1.die(); // 输出 朱元璋lose 刘伯温Won

现在我们再来为游戏添加队友

比如现在我们来为游戏添加队友,比如英雄杀有6人一组,那么这种情况下就有队友,敌人也有3个;因此我们需要区分是敌人还是队友需要队的颜色这个字段,如果队的颜色相同的话,那么就是同一个队的,否则的话就是敌人;

我们可以先定义一个数组players来保存所有的玩家,在创建玩家之后,循环players来给每个玩家设置队友或者敌人;

var players = [];

接着我们再来编写Hero这个函数;代码如下:

var players = []; // 定义一个数组 保存所有的玩家 function Hero(name,teamColor) { this.friends = []; //保存队友列表 this.enemies = []; // 保存敌人列表 this.state = 'live'; // 玩家状态 this.name = name; // 角色名字 this.teamColor = teamColor; // 队伍的颜色 } Hero.prototype.win = function(){ // 赢了 console.log("win:" + this.name); }; Hero.prototype.lose = function(){ // 输了 console.log("lose:" + this.name); }; Hero.prototype.die = function(){ // 所有队友死亡情况 默认都是活着的 var all_dead = true; this.state = 'dead'; // 设置玩家状态为死亡 for(var i = 0,ilen = this.friends.length; i < ilen; i+=1) { // 遍历,如果还有一个队友没有死亡的话,则游戏还未结束 if(this.friends[i].state !== 'dead') { all_dead = false; break; } } if(all_dead) { this.lose(); // 队友全部死亡,游戏结束 // 循环 通知所有的玩家 游戏失败 for(var j = 0,jlen = this.friends.length; j < jlen; j+=1) { this.friends[j].lose(); } // 通知所有敌人游戏胜利 for(var j = 0,jlen = this.enemies.length; j < jlen; j+=1) { this.enemies[j].win(); } } } // 定义一个工厂类来创建玩家 var heroFactory = function(name,teamColor) { var newPlayer = new Hero(name,teamColor); for(var i = 0,ilen = players.length; i < ilen; i+=1) { // 如果是同一队的玩家 if(players[i].teamColor === newPlayer.teamColor) { // 相互添加队友列表 players[i].friends.push(newPlayer); newPlayer.friends.push(players[i]); }else { // 相互添加到敌人列表 players[i].enemies.push(newPlayer); newPlayer.enemies.push(players[i]); } } players.push(newPlayer); return newPlayer; }; // 红队 var p1 = heroFactory("aa",'red'), p2 = heroFactory("bb",'red'), p3 = heroFactory("cc",'red'), p4 = heroFactory("dd",'red'); // 蓝队 var p5 = heroFactory("ee",'blue'), p6 = heroFactory("ff",'blue'), p7 = heroFactory("gg",'blue'), p8 = heroFactory("hh",'blue'); // 让红队玩家全部死亡 p1.die(); p2.die(); p3.die(); p4.die(); // lose:dd lose:aa lose:bb lose:cc // win:ee win:ff win:gg win:hh

如上代码:Hero函数有2个参数,分别是name(玩家名字)和teamColor(队颜色),

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wwgwsw.html