javascript设计模式 – 中介者模式原理与用法实例分析

本文实例讲述了javascript设计模式 – 中介者模式原理与用法。分享给大家供大家参考，具体如下：

介绍：在前端开发的过程中，组件与组件之间的通讯特别常见，一个组件的change需要引起数个组件的change，这就需要组件与组件之间存在复杂的多对多关系链。如何来减轻维护这些关系的复杂度，让组件和组件之间实现低耦合？这就是我们即将介绍的中介者模式。

定义：用一个中介对象（中介者）来封装一系列的对象交互，中介者使个对象不需要显式的相互引用，从而使其耦合松散，而且可以独立的改变他们之间的交互。中介者模式又称为调停者模式，它是一种对象行为型模式。

场景：我们来实现一个打招呼的小demo，由牛牛发送一条消息给中介者，中介者收到后通知risker发消息给牛牛

示例：

var Mediator = {
  Niuniu: null,
  Risker: null,
  showMessage: function(component, message){
    console.log(component.getName() + '说：' + message);
    if(component.getName() === 'Niuniu'){
      this.Risker.showMessage('hello Niuniu');
    }
  }
}

var Niuniu = function(){
  this.name = 'Niuniu';
  this.getName = function(){
    return this.name;
  }
  this.showMessage = function(message){
    Mediator.showMessage(this, message);
  }
}

var Risker = function(){
  this.name = 'Risker';
  this.getName = function(){
    return this.name;
  }
  this.showMessage = function(message){
    Mediator.showMessage(this, message);
  }
}

var niuniu = new Niuniu();
var risker = new Risker();
Mediator.niuniu = niuniu;
Mediator.Risker = risker;

niuniu.showMessage('hello Risker');

// Niuniu说：hello Risker
// Risker说：hello Niuniu

这个例子里面Niuniu和Risker称为同事对象，同事对象之间存在关联关系，既会被别的对象影响，也会影响别的对象。

Mediator称为中介者，其实中介者模式做的只是把之前网状的关系结构转化成了以Mediator为中心的星型结构。关联关系并没有少，只是在Mediator中集中处理了。

中介者模式总结：

优点：
* 中介者模式简化了同事对象之间的交互，它用中介者和同事的一对多交互代替了原来同事之间的多对多交互。
* 将各同事对象解耦，中介者有利于各同事对象之间的松耦合

缺点：
* 在中介者中包含了大量同事之间的交互细节，会导致中介者非常复杂难以维护。

适用场景：
* 系统中对象之间存在复杂的引用关系，系统结构混乱难以理解
* 一个对象由于引用了其他很多对象并且直接和这些对象通信，导致难以复用该对象

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

赞 (0)

相关推荐

  • 深入理解JavaScript系列（36）：设计模式之中介者模式详解

    介绍 中介者模式(Mediator),用一个中介对象来封装一系列的对象交互.中介者使各对象不需要显式地相互引用,从而使其耦合松散,而且可以独立地改变它们之间的交互. 主要内容来自:http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/#mediatorpatternjavascript 正文 软件开发中,中介者是一个行为设计模式,通过提供一个统一的接口让系统的不同部分进行通信.一般,如果系统有很多子模块需要直接沟通,

  • javascript设计模式 – 享元模式原理与用法实例分析

    本文实例讲述了javascript设计模式 – 享元模式原理与用法.分享给大家供大家参考,具体如下: 介绍:在我们日常开发中需要创建很多对象,虽然垃圾回收机制能帮我们进行回收,但是在一些需要重复创建对象的场景下,就需要有一种机制来进行优化,提高系统资源的利用率. 享元模式就是解决这类问题,主要目的是减少创建对象的数量.享元模式提倡重用现有同类对象,如未找到匹配的对象则创建新对象 定义:运用共享技术有效的支持大量细粒度对象的复用.系统只适用少量的对象,而这些对象都很相似,状态变化很小,可以实现对象

  • javascript设计模式 – 装饰模式原理与应用实例分析

    本文实例讲述了javascript设计模式 – 装饰模式原理与应用.分享给大家供大家参考,具体如下: 介绍:装饰模式可以在不改变一个对象本身功能的基础上给对象增加额外的新行为.在现实生活中,这种情况也到处存在,例如一张照片,可以不改变照片本身,通过增加一个相框,使其具有防潮的功能.装饰模式是一种用于替代继承的技术,它使用对象之间的关联关系来取代继承关系. 定义:动态的给一个对象增加一些额外的职责,就增加对象功能来说,装饰模式比生成子类实现更为灵活.装饰模式是一种对象结构模型. 场景:我们现有一个

  • javascript设计模式 – 组合模式原理与应用实例分析

    本文实例讲述了javascript设计模式 – 组合模式原理与应用.分享给大家供大家参考,具体如下: 介绍:组合模式又叫部分整体模式,用于把一组相似的对象当作一个单一的对象.组合模式依据树形结构来组合对象,用来表示部分以及整体层次 定义:组合多个对象形成树形结构以表示具有整体一部分关系的层次机构.组合模式对单个对象(即叶子对象)和组合对象(即容器对象)的使用具有一致性,组合模式又可以成为整体一部分模式. 它是一种对象结构型模式. 场景:我们对公司的人员架构进行一下打印,假设所有管理岗和开发岗的区

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

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

  • javascript设计模式 – 外观模式原理与用法实例分析

    本文实例讲述了javascript设计模式 – 外观模式原理与用法.分享给大家供大家参考,具体如下: 介绍:外观模式是一种使用频率非常高的结构型设计模式,它通过引入一个外观角色来简化客户端与子系统之间的交互,为复杂的子系统调用提供一个统一的入口,隐藏系统复杂度,降低子系统与客户端的耦合度. 定义: 为子系统中的一组接口提供一个统一的入口.外观模式定义了一个高层接口,这个接口使得这一子系统更加容易使用. 场景:我们还是用画圆的方式来介绍下外观模式. 示例: var Rectangle = func

  • javascript设计模式之中介者模式Mediator

    javascript设计模式之中介者模式Mediator

    一,总体概要 1,笔者浅谈 我们从日常的生活中打个简单的比方,我们去房屋中介租房,房屋中介人在租房者和房东出租者之间形成一条中介.租房者并不关心他租谁的房.房东出租者也不关心他租给谁.因为有中介的存在,这场交易才变得如此方便. 在软件的开发过程中,势必会碰到这样一种情况,多个类或多个子系统相互交互,而且交互很繁琐,导致每个类都必须知道他需要交互的类,这样它们的耦合会显得异常厉害.牵一发而动全身,后果很严重,大熊很生气!~~~~(>_<)~~~~ 好了,既然问题提出来了,那有请我们这期的主角--

  • 学习JavaScript设计模式之中介者模式

    一.定义 面向对象设计鼓励将行为分布到各个对象中,把对象划分成更小的粒度,有助于增强对象的可复用性.但由于这些细粒度对象之间的联系激增,又可能反过来降低它们的可复用性. 中介者模式的作用就是解除对象与对象之间的紧耦合关系. 二.示例:购买商品 假设我们正在开发一个购买手机的页面,购买流程中,可以选择手机颜色以及输入购买数量,同时页面中可以对应展示输入内容.还有一个按钮动态显示下一步操作(该颜色库存量充足,显示下一步:否则显示库存不足). <div> <span>请选择颜色</

  • javascript设计模式 – 代理模式原理与用法实例分析

    本文实例讲述了javascript设计模式 – 代理模式原理与用法.分享给大家供大家参考,具体如下: 介绍:代理使我们很常见的一众模式,proxy,nginx都称之为代理,代理是什么意思呢?代理模式在客户端和目标对象之间加入一个新的代理对象,代理对象起到一个中介作用,去掉客户不能看到的内容和服务,或者增添客户需要的额外服务. 定义:给某一个对象提供一个代理,并由代理对象控制对原对象的引用.代理模式是一种对象结构型模式. 场景:我们还是以画图形为例,我将所有的绘图动作包装到Shape类中,使用代理

  • javascript设计模式 – 解释器模式原理与用法实例分析

    本文实例讲述了javascript设计模式 – 解释器模式原理与用法.分享给大家供大家参考,具体如下: 介绍:之前在做java开发时,数据库的增删改查特别频繁,并且场景不同需要用到的SQL语句页都不同,如何用调用方法的形式来使用sql语句,拼接sql?这就是这一节我们要讲的解释器模式. 定义:定义一个语言的文法,并且建立一个解释器来解释该语言中的句子,这里的语言是指使用规定格式和语法的代码.解释器模式是一种类行为型模式. 场景:我们实现一个解释器,用来判断传递的数字是奇数还是偶数,是正数还是负数

  • javascript设计模式 – 职责链模式原理与用法实例分析

    本文实例讲述了javascript设计模式 – 职责链模式原理与用法.分享给大家供大家参考,具体如下: 介绍:很多情况下,在一个软件系统中可以处理某个请求的对象不止一个.例如一个网络请求过来,需要有对象去解析request Body,需要有对象去解析请求头,还需要有对象去对执行对应controller.请求一层层传递,让每一个对象都基于请求完成自己的任务,然后将请求传递给下一个处理程序.是不是感觉有点中间件的感觉. 定义:职责链就是避免请求发送者与接收者耦合在一起,让多个对象都有可能接收请求.将

  • javascript设计模式 – 命令模式原理与用法实例分析

    本文实例讲述了javascript设计模式 – 命令模式原理与用法.分享给大家供大家参考,具体如下: 介绍:命令模式是一种数据驱动的设计模式,将请求以命令的形式包裹在对象中,并传递给调用对象.命令模式的核心在于引入了命令类,通过命令类来降低发送者和接受者的耦合度. 定义:将一个请求封装为一个对象,从而可用不同的请求对客户进行参数化:对请求排队或者记录请求日志,以及支持可撤销的操作.命令模式是一种对象行为型模式,其别名为动作(Action)模式或事务(Transaction)模式. 场景:我们通过

随机推荐