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 相关文章推荐
js 幻灯片的实现
Dec 06 Javascript
js关闭模态窗口刷新父页面或跳转页面
Dec 13 Javascript
js获取指定的cookie的具体实现
Feb 20 Javascript
jqeury-easyui-layout问题解决方法
Mar 24 Javascript
JavaScript验证电子邮箱的函数
Aug 22 Javascript
javascript求日期差的方法
Mar 02 Javascript
仿百度换肤功能的简单实例代码
Jul 11 Javascript
RGB和YUV 多媒体编程基础详细介绍
Nov 04 Javascript
angular2中router路由跳转navigate的使用与刷新页面问题详解
May 07 Javascript
vue登录路由验证的实现
Dec 13 Javascript
webpack分离css单独打包的方法
Jun 12 Javascript
快速解决Vue项目在IE浏览器中显示空白的问题
Sep 04 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
echo(),print(),print_r()之间的区别?
2006/11/19 PHP
PHP在字符串中查找指定字符串并删除的代码
2008/10/02 PHP
PHP目录函数实现创建、读取目录教程实例
2011/01/13 PHP
PHP基于GD库的缩略图生成代码(支持jpg,gif,png格式)
2014/06/19 PHP
php从数据库中获取数据用ajax传送到前台的方法
2018/08/20 PHP
jquery制作多功能轮播图插件
2015/04/02 Javascript
JS图片放大效果简单实现代码
2016/09/08 Javascript
angular ng-repeat数组中的数组实例
2017/02/18 Javascript
bootstrap suggest搜索建议插件使用详解
2017/03/25 Javascript
详解Vue实战指南之依赖注入(provide/inject)
2018/11/13 Javascript
vue 父组件给子组件传值子组件给父组件传值的实例代码
2019/04/15 Javascript
vscode vue 文件模板的配置方法
2019/07/23 Javascript
nuxt引入组件和公共样式的操作
2020/11/05 Javascript
跨平台python异步回调机制实现和使用方法
2013/11/26 Python
详解Python的Flask框架中的signals信号机制
2016/06/13 Python
[原创]使用豆瓣提供的国内pypi源
2017/07/02 Python
python使用锁访问共享变量实例解析
2018/02/08 Python
Python爬虫实现(伪)球迷速成
2018/06/10 Python
python读写配置文件操作示例
2019/07/03 Python
在python中实现调用可执行文件.exe的3种方法
2019/07/07 Python
Django文件存储 默认存储系统解析
2019/08/02 Python
Python 用三行代码提取PDF表格数据
2019/10/13 Python
python 如何利用argparse解析命令行参数
2020/09/11 Python
Blue Nile蓝色尼罗河香港官网:世界最大在线钻石珠宝销售商
2020/05/07 全球购物
新媒传信软件测试面试题
2013/02/24 面试题
涉外经济法专业毕业生推荐信
2013/11/24 职场文书
个人党性剖析材料
2014/02/03 职场文书
给全校老师的建议书
2014/03/13 职场文书
敬老模范事迹
2014/05/21 职场文书
抗洪救灾先进集体事迹材料
2014/05/26 职场文书
2015年出纳个人工作总结
2015/04/02 职场文书
2015年度培训工作总结范文
2015/04/02 职场文书
2015年体育教师个人工作总结
2015/05/12 职场文书
刑事上诉状(无罪)
2015/05/23 职场文书
使用tensorflow 实现反向传播求导
2021/05/26 Python
学习nginx基础知识
2021/09/04 Servers