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 复杂的嵌套环境中输出单引号和双引号
May 26 Javascript
在javascript中关于节点内容加强
Apr 11 Javascript
node.js中的console.log方法使用说明
Dec 09 Javascript
Juery解决tablesorter中文排序和字符范围的方法
May 06 Javascript
DOM中事件处理概览与原理的全面解析
Aug 16 Javascript
JS实现控制图片显示大小的方法【图片等比例缩放功能】
Feb 18 Javascript
js实现适配不同的屏幕大小
Apr 10 Javascript
深究AngularJS中$sce的使用
Jun 12 Javascript
详解在Vue中有条件地使用CSS类
Sep 30 Javascript
如何用Node写页面爬虫的工具集
Oct 26 Javascript
JS数组方法push()、pop()用法实例分析
Jan 18 Javascript
javascript函数式编程基础
Sep 15 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
全国FM电台频率大全 - 21 海南省
2020/03/11 无线电
PHP+MYSQL的文章管理系统(二)
2006/10/09 PHP
解析PHPExcel使用的常用说明以及把PHPExcel整合进CI框架的介绍
2013/06/24 PHP
使用PHP接收POST数据,解析json数据
2013/06/28 PHP
php时间戳转换的示例
2014/03/31 PHP
PHP格式化MYSQL返回float类型的方法
2016/03/30 PHP
PHP简单字符串过滤方法示例
2016/09/04 PHP
JavaScript时间转换处理函数
2015/04/14 Javascript
使用AOP改善javascript代码
2015/05/01 Javascript
移动端滑动插件Swipe教程
2016/10/16 Javascript
js实现符合国情的日期插件详解
2017/01/19 Javascript
node.js(express)中使用Jcrop进行图片剪切上传功能
2017/04/21 Javascript
原生JS实现Ajax跨域请求flask响应内容
2017/10/24 Javascript
vue+webpack中配置ESLint
2018/11/07 Javascript
JavaScript数组去重的方法总结【12种方法,号称史上最全】
2019/02/28 Javascript
Node.js动手撸一个静态资源服务器的方法
2019/03/09 Javascript
详解django模板与vue.js冲突问题
2019/07/07 Javascript
Django rest framework实现分页的示例
2018/05/24 Python
PyCharm设置每行最大长度限制的方法
2019/01/16 Python
PyCharm 创建指定版本的 Django(超详图解教程)
2019/06/18 Python
python字符串Intern机制详解
2019/07/01 Python
python和php哪个容易学
2020/06/19 Python
adidas瑞典官方网站:购买阿迪达斯鞋子和运动服
2019/12/11 全球购物
上海天奕面试题笔试题
2015/04/19 面试题
智乐游戏测试笔试题
2014/05/21 面试题
应届大专毕业生个人自荐信
2013/09/22 职场文书
十八大报告观后感
2014/01/28 职场文书
关于母亲节的感言
2014/02/04 职场文书
平面设计专业大学生职业规划书
2014/03/12 职场文书
我的画教学反思
2014/04/28 职场文书
会计学习心得体会
2014/09/09 职场文书
2014年社区妇联工作总结
2014/12/02 职场文书
2014年音乐教师工作总结
2014/12/03 职场文书
《法国号》教学反思
2016/02/22 职场文书
分享CSS盒子模型隐藏的几种方式
2022/02/28 HTML / CSS
在python中读取和写入CSV文件详情
2022/06/28 Python