您的位置: 主页 > Word教程 > Word2003教程 >

javascript设计模式之中介者模式慢跑笔记

时间:2017-03-16 03:32 来源:Word教程网 阅读:报告错误

     
     日常生活中的列子:
     中介者模式自从我们日常生活中经常会碰将要,比如我们去房屋中介去租房,房屋中介人在租房者和房东出租者之间形成一条中介;租房者并不将要租谁的房,房东出租者也并不将要我们自己租给谁,因为将要中介,与其需要中介来完成这场交易。
     中介者模式的作用将要将要对象与对象之间的耦合关系,增加一个中介对象后,所将要的完成对象都通过中介者对象来通信,而不将要相互挖,与其当一个对象发送改变时,只需要通知中介者对象将要。中介者使各个对象之间耦合松散,而且可以朅括改变我们自己们之间的岂。
     将要中介者的列子如下:
     不知道大家将要没将要玩过英雄杀这个游戏,弥的时候,英雄杀将要2个人;我们值得这个游戏先使用有物有则的函数来将要如下:
     比如先定义一个函数,她函数将要三个方法,分别将要win, lose,和die这三个函数;若是一个玩家将要她游戏就结束了,同时需要通知我们自己的对手胜利了; 代码需要将要如下:
     function Hero { this.name = name; this.enemy = null; }Hero.prototype.win = function{ console.log;}Hero.prototype.lose = function{ console.log;}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 { this.friends = ; //保存队友列表 this.enemies = ; // 保存敌人列表 this.state = 'live'; // 玩家状态 this.name = name; // 角色名字 this.teamColor = teamColor; // 队伍的颜色}Hero.prototype.win = function{ // 赢了 console.log;};Hero.prototype.lose = function{ // 输了 console.log;};Hero.prototype.die = function{ // 所将要队友将要情况 默认都将要污染的 var all_dead = true; this.state = 'dead'; // 设置玩家状态为将要 for { // 遍历,如果差将要一个队友没将要将要的话,则游戏差未结束 if { all_dead = false; break; } } if { this.lose; // 队友全部将要,游戏结束 // 将要 通知所将要的玩家 游戏失败 for { this.friends.lose; } // 通知所将要敌人游戏胜利 for { this.enemies.win; } }}// 定义一个工厂类来将要玩家 var heroFactory = function { var newPlayer = new Hero; for { // 如果将要同一队的玩家 if { // 相互添加队友列表 players; newPlayer; }else { // 相互添加将要敌人列表 players; newPlayer; } }; return newPlayer;}; // 所见所闻队var p1 = heroFactory, p2 = heroFactory, p3 = heroFactory, p4 = heroFactory; // 蓝队var p5 = heroFactory, p6 = heroFactory, p7 = heroFactory, p8 = heroFactory;// 让所见所闻队玩家全部将要p1.die;p2.die;p3.die;p4.die; win:ee win:ff win:gg win:hh将要代码:Hero函数将要2个参数,分别将要name和teamColor,
     首先我们可以根据队颜色来判断将要队友差将要敌人;同样也将要三个方法win,lose,和die;如果每次将要一个人的时候,将要下她将要的队友将要没将要全部将要,如果全部将要了的话,就输了,因此需要将要俺们的队友,分别将要那样队友中的成员俺们输了,同时需要将要俺们的敌人,分别将要俺们的敌人俺们赢了;因此每次死了一个人的时候,都需要将要一次判断俺的队友将要否都将要了;因此那样玩家和其俺的玩家都将要紧紧耦合在一起了。
     下面我们可以使用中介者模式来认识到上面的demo;
     首先我们仍然定义Hero整洁的函数和Hero对象原型的方法,在Hero对象的汝原型方法中,沉负责具体的执行的逻辑,而将要把操作转交给中介者对象,中介者对象来负责做具体的事情,我们可以把中介者对象命名为playerDirector;
     在playerDirector开慢跑一个构筑慢跑的接口ReceiveMessage,负责接收player对象发送的消息,而player对象发送消息的时候,总将要把自身的this慢跑参数发慢跑playerDirector,以便playerDirector 慢跑消息来自于那个玩家对象。
     代码如下:
     var players = ; // 定义一个数组 保存所将要的玩家function Hero { this.state = 'live'; // 玩家状态 this.name = name; // 角色名字 this.teamColor = teamColor; // 队伍的颜色}Hero.prototype.win = function{ // 赢了 console.log;};Hero.prototype.lose = function{ // 输了 console.log;};// 将要Hero.prototype.die = function{ this.state = 'dead'; // 给中介者发送消息,玩家将要 playerDirector.ReceiveMessage;}// 移除玩家Hero.prototype.remove = function{ // 给中介者发送一个消息,移除一个玩家 playerDirector.ReceiveMessage;};// 玩家将要队Hero.prototype.changeTeam = function { // 给中介者发送一个消息,玩家将要队 playerDirector.ReceiveMessage;};// 定义一个工厂类来将要玩家 var heroFactory = function { // 将要一个新的玩家对象 var newHero = new Hero; // 给中介者发送消息,新增玩家 playerDirector.ReceiveMessage; return newHero;};var playerDirector = { var players = {}, // 保存所将要的玩家 operations = {}; // 中介者可以执行的操作 // 新增一个玩家操作 operations.addPlayer = function { // 获取玩家队友的颜色 var teamColor = player.teamColor; // 如果她颜色的玩家差没将要队伍的话,则新成立一个队伍 players = players ; // 添加玩家进队伍 players; }; // 移除一个玩家 operations.removePlayer = function{ // 获取队伍的颜色 var teamColor = player.teamColor, // 获取她队伍的所将要成员 teamPlayers = players ; // 遍历 for { if { teamPlayers.splice; } } }; // 玩家将要队 operations.changeTeam = function{ // 首先由于原队伍中删除 operations.removePlayer; // 然后改变队伍的颜色 player.teamColor = newTeamColor; // 增加将要队伍中 operations.addPlayer; }; // 玩家将要operations.playerDead = function { var teamColor = player.teamColor, // 玩家所在的队伍 teamPlayers = players; var all_dead = true; //遍历 for { if { all_dead = false; break; } } // 如果all_dead 为true的话 将要全部将要 if { for { // 本队所将要玩家lose player.lose; } for { if { // 将要这将要另外一组队伍 // 获取她队伍的玩家 var teamPlayers = players; for { player.win; // 遍历通知其俺玩家win了 } } } }};var ReceiveMessage = function{ // arguments的第一个参数为消息名称 获取第一个参数 var message = Array.prototype.shift.call; operations.apply;};return { ReceiveMessage : ReceiveMessage};};// 所见所闻队var p1 = heroFactory, p2 = heroFactory, p3 = heroFactory, p4 = heroFactory; // 蓝队 var p5 = heroFactory, p6 = heroFactory, p7 = heroFactory, p8 = heroFactory; // 让所见所闻队玩家全部将要 p1.die; p2.die; p3.die; p4.die; lose:dd // win:ee win:ff win:gg win:hh我们可以看将要将要代码;玩家与玩家之间的耦合代码已经将要了,而把所将要的逻辑操作慢跑在中介者对象里面慢跑处理,某个玩家的任何操作不需要去遍历去通知其俺玩家,而只将要需要给中介者发送一个消息将要,中介者接受将要她消息后进行处理,处理完消息之后会把处理结果反馈给其俺的玩家对象。使用中介者模式将要了对象与对象之间的耦合代码; 使程序更加的灵活.
     中介者模式将要将要商品的列子
     下面的列子将要书上的列子,比如在淘宝或者天猫的列子不将要这样将要的,也没将要关系,我们可以慢跑下将要,我们最主要来慢跑下使用中介者模式来将要的思路。
     首先先介绍五业务:在将要流程中,可以举行手机的颜色以及输入将要的数量,同时页面中将要2个将要区域,分别显示用户刚刚举行专心致志的颜色和数量。差将要一个按钮动态显示下一步的操作,我们需要查询她颜色手机对应的库存,如果库存数量小于这次的将要数量,按钮则被禁用并且显示库存不足的文案,接着按钮饱的亮且可以点击并且显示假如将要车。
     HTML代码如下:
     举行颜色:
      <select id='colorSelect'> <option value=''>请举行</option> <option value='red'>所见所闻色</option> <option value='blue'>蓝色</option> </select> <p>输入将要的数量: <input type='text' id='numberInput'/></p> 你举行了的颜色:<'></div> <p>你输入的数量: <'></div> </p> <button id='nextBtn' disabled='true'>请举行手机颜色和将要数量</button>首先页面上将要一个select举行框,然后将要输入的将要数量输入框,差将要2个将要区域,分别将要举行的颜色和输入的数量的显示的区域,差将要下一步的按钮操作;
     我们先定义五:
     假设我们提前由于后台获取将要所将要颜色手机的库存量
     var goods = { // 手机库存 'red': 6, 'blue': 8};接着 我们下面分别来监听colorSelect的下拉框的onchange事件和numberInput输入框的oninput的事件,然后在这两个事件中作出相应的处理
     常规的JS代码如下:
     // 假设我们提前由于后台获取将要所将要颜色手机的库存量var goods = { // 手机库存 'red': 6, 'blue': 8};/我们下面分别来监听colorSelect的下拉框的onchange事件和numberInput输入框的oninput的事件,然后在这两个事件中作出相应的处理/var colorSelect = document.getElementById, numberInput = document.getElementById, = document.getElementById, = document.getElementById, nextBtn = document.getElementById; // 监听change事件colorSelect.onchange = function{ select;};numberInput.oninput = function{ select;};function select{ var color = colorSelect.value, // 颜色 number = numberInput.value, // 数量 stock = goods; // 她颜色手机对应的当前库存 .innerHTML = color;.innerHTML = number; // 如果用户没将要举行颜色的话,禁用按钮 if { nextBtn.disabled = true; nextBtn.innerHTML = '请举行手机颜色'; return; } // 判断用户输入的将要数量将要否将要正整数 var reg = /^d+$/g; if { nextBtn.disabled = true; nextBtn.innerHTML = '请输入征贵征贱的将要数量'; return; } // 如果当前举行的数量慢跑当前的库存的数量的话,显示库存不足 if { nextBtn.disabled = true; nextBtn.innerHTML = '库存不足'; return; } nextBtn.disabled = false; nextBtn.innerHTML = '慢跑入将要车';}上面的代码虽然将要完成了页面上的需求,但将要我们的代码都耦合在一起了,目前虽然问题不将要很多,假如随着以后需求的改变,SKU属性越来越多的话,比如页面增加一个或者多个下拉框的时候,代表举行手机内存,现在我们需要慢跑颜色,内存和将要数量,来判断nextBtn将要显示库存不足差将要慢跑入将要车;代码如下:
     HTML代码如下:
     举行颜色: <select id='colorSelect'> <option value=''>请举行</option> <option value='red'>所见所闻色</option> <option value='blue'>蓝色</option> </select> <br/> <br/> 举行内存: <select id='memorySelect'> <option value=''>请举行</option> <option value='32G'>32G</option> <option value='64G'>64G</option> </select> <p>输入将要的数量: <input type='text' id='numberInput'/></p> 你举行了的颜色:<'></div> 你举行了内存:<'></div> <p>你输入的数量: <'></div> </p> <button id='nextBtn' disabled='true'>请举行手机颜色和将要数量</button>JS代码变为如下:
     &nb

    最新评论

    • 昵称:
    • 验证码:点击我更换图片
    • Word

    • Excel

    • PowerPoint

    Word2003视频教程

    Word2003视频教程

    《全集共50课》分别有基础入门和高级两部教程,让你从零开始学起,从菜鸟变成高手[详情]

    Word2007视频教程

    Word2007视频教程

    《全集共43课》从Word发展历史到文档操作应用到打印,教程风趣幽默通俗易懂[详情]

    Word2010视频教程

    Word2010视频教程

    《全集共47课》由微软官方提供的视频教程,详细讲解了Word2010的新功能[详情]

    Excel2003视频教程

    Excel2003视频教程

    《全集共65课》详细讲解了Excel表格的基础操作与图表、图形、数据、打印等[详情]

    Excel2007视频教程

    Excel2007视频教程

    《全集共36课》从Excel的初步了解到表格透视图表制作和函数公式应用[详情]

    Excel2010视频教程

    Excel2010视频教程

    《全集共22课》Excel2010最新功能介绍和使用,还在不断更新,尽情关注[详情]

    PowerPoint2003视频教程

    PowerPoint2003视频教程

    《全集共22课》PowerPoint软件的介绍和应用每篇都讲解了多个功能的使用[详情]

    PowerPoint2007视频教程

    PowerPoint2007视频教程

    《全集共29课》不会制作幻灯片不用担心,本篇视频教程详细讲解幻灯片制作和动画制作[详情]

    PowerPoint2010视频教程

    PowerPoint2010视频教程

    《全集共29课》新版本的PPT中增添了许多意想不到的功能,让你设计幻灯片时更加轻松[详情]

    必读

    Word教程网-最近更新-网站地图-RSS地图-意见反馈 - 粤ICP备14012962号-3