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 相关文章推荐
添加到收藏夹代码(兼容几乎所有的浏览器)
Jan 09 Javascript
解决extjs在firefox中关闭窗口再打开后iframe中js函数访问不到的问题
Nov 06 Javascript
JS可以控制样式的名称写法一览
Jan 16 Javascript
Javascript加载速度慢的解决方案
Mar 11 Javascript
基于JS实现简单的样式切换效果代码
Sep 04 Javascript
JavaScript各类型的关系图解
Oct 16 Javascript
基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用
May 12 Javascript
JavaScript中cookie工具函数封装的示例代码
Oct 11 Javascript
React Native仿美团下拉菜单的实例代码
Aug 08 Javascript
ES6使用export和import实现模块化的方法
Sep 10 Javascript
微信小程序实现随机验证码功能
Dec 20 Javascript
聊聊JS ES6中的解构
Apr 29 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
用Socket发送电子邮件
2006/10/09 PHP
php获得用户ip地址的比较不错的方法
2014/02/08 PHP
php cookie中点号(句号)自动转为下划线问题
2014/10/21 PHP
jquery获取多个checkbox的值异步提交给php的方法
2015/06/24 PHP
WordPress中转义HTML与过滤链接的相关PHP函数使用解析
2015/12/22 PHP
thinkPHP中_initialize方法实例分析
2016/12/05 PHP
php微信公众号开发之快递查询
2018/10/20 PHP
PDO::inTransaction讲解
2019/01/28 PHP
jquery中dom操作和事件的实例学习 下拉框应用
2011/12/01 Javascript
javascript管中窥豹 形参与实参浅析
2011/12/17 Javascript
20个最新的jQuery插件
2012/01/13 Javascript
使用js画图之画切线
2015/01/12 Javascript
详解vue中computed 和 watch的异同
2017/06/30 Javascript
vue组件Prop传递数据的实现示例
2017/08/17 Javascript
vue-cli webpack2项目打包优化分享
2018/02/07 Javascript
node+koa2+mysql+bootstrap搭建一个前端论坛
2018/05/06 Javascript
Angular动画实现的2种方式以及添加购物车动画实例代码
2018/08/09 Javascript
node.js使用fs读取文件出错的解决方案
2019/10/23 Javascript
js验证密码强度解析
2020/03/18 Javascript
详解js中的原型,原型对象,原型链
2020/07/16 Javascript
详解Vue.js3.0 组件是如何渲染为DOM的
2020/11/10 Javascript
[02:29]完美世界高校联赛上海赛区回顾
2015/12/15 DOTA
利用Python操作消息队列RabbitMQ的方法教程
2017/07/19 Python
python中利用await关键字如何等待Future对象完成详解
2017/09/07 Python
解决Python 使用h5py加载文件,看不到keys()的问题
2019/02/08 Python
PyCharm如何导入python项目的方法
2020/02/06 Python
Django静态文件加载失败解决方案
2020/08/26 Python
Pytorch实现WGAN用于动漫头像生成
2021/03/04 Python
Under Armour安德玛英国官网:美国高端运动科技品牌
2018/09/17 全球购物
Three Graces London官网:英国奢侈品牌
2021/03/18 全球购物
电脑教师的自我评价
2013/12/18 职场文书
大学生求职工作的自我评价
2014/02/13 职场文书
大学生职业生涯规划书参考模板
2014/03/05 职场文书
工商局所长四风自我剖析及整改措施
2014/10/26 职场文书
写给孩子的新学期寄语
2015/02/27 职场文书
单位考核聘任报告
2015/03/02 职场文书