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


Posted in Javascript onApril 20, 2020

本文实例讲述了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.3water.com/code/HtmlJsRun测试上述代码运行效果。

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

Javascript 相关文章推荐
Javascript里使用Dom操作Xml
Sep 20 Javascript
JavaScipt中的Math.ceil() 、Math.floor() 、Math.round() 三个函数的理解
Apr 29 Javascript
javascript forEach通用循环遍历方法
Oct 11 Javascript
js中方法重载如何实现?以及函数的参数问题
Aug 01 Javascript
用JavaScript计算在UTF-8下存储字符串占用字节数
Aug 08 Javascript
用js一次改变多个input的readonly属性值的方法
Jun 11 Javascript
跟我学习javascript的执行上下文
Nov 18 Javascript
jQuery中each()、find()和filter()等节点操作方法详解(推荐)
May 25 Javascript
微信小程序 底部导航栏目开发资料
Dec 05 Javascript
详解如何在React组件“外”使用父组件的Props
Jan 12 Javascript
vue如何进行动画的封装
Sep 26 Javascript
Vue实现固定定位图标滑动隐藏效果
May 30 Javascript
javascript设计模式 ? 命令模式原理与用法实例分析
Apr 20 #Javascript
JS实现横向跑马灯效果代码
Apr 20 #Javascript
vue2.x数组劫持原理的实现
Apr 19 #Javascript
vue2.x 对象劫持的原理实现
Apr 19 #Javascript
基于js判断浏览器是否支持webGL
Apr 18 #Javascript
JavaScript对象字面量和构造函数原理与用法详解
Apr 18 #Javascript
javascript 内存模型实例详解
Apr 18 #Javascript
You might like
坏狼的PHP学习教程之第2天
2008/06/15 PHP
PHP 图片上传代码
2011/09/13 PHP
解析在zend Farmework下如何创立一个FORM表单
2013/06/28 PHP
详解PHP处理密码的几种方式
2016/11/30 PHP
jquery 图片截取工具jquery.imagecropper.js
2010/04/09 Javascript
javascript下对于事件、事件流、事件触发的顺序随便说说
2010/07/17 Javascript
在浏览器中获取当前执行的脚本文件名的代码
2011/07/19 Javascript
ExtJs使用总结(非常详细)
2012/03/22 Javascript
document.all的一个比较完整的总结及案例
2013/01/31 Javascript
解析Javascript中难以理解的11个问题
2013/12/09 Javascript
js实时获取并显示当前时间的方法
2015/07/31 Javascript
JS中的hasOwnProperty()和isPrototypeOf()属性实例详解
2016/08/11 Javascript
微信小程序分页加载的实例代码
2017/07/11 Javascript
基于Vue生产环境部署详解
2017/09/15 Javascript
JavaScript模板引擎实现原理实例详解
2018/12/14 Javascript
微信小程序在ios下Echarts图表不能滑动的问题解决
2019/07/10 Javascript
JS精确判断数据类型代码实例
2019/12/18 Javascript
[04:26]2014DOTA2国际邀请赛-Newbee顺利进入胜者组决赛 独家专访战神7
2014/07/19 DOTA
Python 命令行参数sys.argv
2008/09/06 Python
c++生成dll使用python调用dll的方法
2014/01/20 Python
Python数据结构之Array用法实例
2014/10/09 Python
在SAE上部署Python的Django框架的一些问题汇总
2015/05/30 Python
Python机器学习k-近邻算法(K Nearest Neighbor)实例详解
2018/06/25 Python
Python requests库用法实例详解
2018/08/14 Python
Python3对称加密算法AES、DES3实例详解
2018/12/06 Python
pyqt5中动画的使用详解
2020/04/01 Python
如何用Python 加密文件
2020/09/10 Python
美国美发品牌:Bumble and Bumble
2016/10/08 全球购物
租租车:国际租车、美国租车、欧洲租车、特价预订国外租车(中文服务)
2018/03/28 全球购物
欧尚俄罗斯网上超市:Auchan俄罗斯
2018/05/03 全球购物
King Apparel官网:英国街头服饰品牌
2019/09/05 全球购物
互联网创业计划书的书写步骤
2014/01/28 职场文书
学校校庆演讲稿
2014/05/22 职场文书
小学班主任经验交流材料
2014/12/16 职场文书
社区国庆节活动总结
2015/03/23 职场文书
《鲁滨逊漂流记》之六读后感(4篇)
2019/09/29 职场文书