0

0

JavaScript调停者模式实例详解

小云云

小云云

发布时间:2018-02-05 09:40:45

|

1484人浏览过

|

来源于php中文网

原创

本文主要和大家介绍javascript设计模式之调停者模式,详细分析了调停者模式的概念、原理、优缺点并结合javascript实例形式给出了相关使用技巧,需要的朋友可以参考下,希望能帮助到大家。

1、定义

调停者模式包装了一系列对象相互作用的方式,使得这些对象不必相互明显作用。从而使他们可以松散偶合。当某些对象之间的作用发生改变时,不会立即影响其他的一些对象之间的作用。保证这些作用可以彼此独立的变化。调停者模式将多对多的相互作用转化为一对多的相互作用。调停者模式将对象的行为和协作抽象化,把对象在小尺度的行为上与其他对象的相互作用分开处理。

2、使用的原因

当对象之间的交互操作很多,且每个对象的行为操作都依赖彼此时,为防止在修改一个对象的行为时,同时涉及到修改很多其他对象的行为,可采用调停者模式,来解决紧耦合问题.

立即学习Java免费学习笔记(深入)”;

该模式将对象之间的多对多关系变成一对多关系,调停者对象将系统从网状结构变成以调停者为中心的星形结构,达到降低系统的复杂性,提高可扩展性的作用.

调停者设计模式结构图:

调停者模式包括以下角色:

●抽象调停者(Mediator)角色:定义出同事对象到调停者对象的接口,其中主要方法是一个(或多个)事件方法。
●具体调停者(ConcreteMediator)角色:实现了抽象调停者所声明的事件方法。具体调停者知晓所有的具体同事类,并负责具体的协调各同事对象的交互关系。
●抽象同事类(Colleague)角色:定义出调停者到同事对象的接口。同事对象只知道调停者而不知道其余的同事对象。
●具体同事类(ConcreteColleague)角色:所有的具体同事类均从抽象同事类继承而来。实现自己的业务,在需要与其他同事通信的时候,就与持有的调停者通信,调停者会负责与其他的同事交互。

JS实现代码:

CD光驱


function CDDriver( mediator ) {
  //持有一个调停者对象
  this.mediator = mediator;
  /**
   * 获取当前同事类对应的调停者对象
   */
  this.getMediator = function() {
    return mediator;
  }
 //光驱读取出来的数据
 this.data = "";
  /**
   * 获取光盘读取出来的数据
   */
  this.getData = function() {
    return this.data;
  }
  /**
   * 读取光盘
   */
  this.readCD = function(){
    //逗号前是视频显示的数据,逗号后是声音
    this.data = "西游记,老孙来也!";
    //通知主板,自己的状态发生了改变
    this.getMediator().changed(this);
  }
}

CPU处理器


function CPU( mediator ) {
 //持有一个调停者对象
 this.mediator = mediator;
 /**
  * 获取当前同事类对应的调停者对象
  */
 this.getMediator = function() {
   return mediator;
 }
  //分解出来的视频数据
  this.videoData = "";
  //分解出来的声音数据
  this.soundData = "";
  /**
   * 获取分解出来的视频数据
   */
  this.getVideoData = function() {
    return this.videoData;
  }
  /**
   * 获取分解出来的声音数据
   */
  this.getSoundData = function() {
    return this.soundData;
  }
  /**
   * 处理数据,把数据分成音频和视频的数据
   */
  this.executeData = function(data){
    //把数据分解开,前面是视频数据,后面是音频数据
    var array = data.split(",");
    this.videoData = array[0];
    this.soundData = array[1];
    //通知主板,CPU完成工作
    this.getMediator().changed(this);
  }
}

显卡


function VideoCard( mediator ) {
  //持有一个调停者对象
  this.mediator = mediator;
  /**
   * 获取当前同事类对应的调停者对象
   */
  this.getMediator = function() {
    return mediator;
  }
  /**
   * 显示视频数据
   */
  this.showData = function(data){
    console.log("正在播放的是:" + data);
  }
}

声卡

Pixlr Remove BG
Pixlr Remove BG

几秒钟删除图片背景

下载


function SoundCard( mediator ){
  //持有一个调停者对象
  this.mediator = mediator;
  /**
   * 获取当前同事类对应的调停者对象
   */
  this.getMediator = function() {
    return mediator;
  }
  /**
   * 按照声频数据发出声音
   */
  this.soundData = function(data){
    console.log("输出音频:" + data);
  }
}

具体调停者类


function MainBoard() {
  //需要知道要交互的同事类——光驱类
  this.cdDriver = null;
  //需要知道要交互的同事类——CPU类
  this.cpu = null;
  //需要知道要交互的同事类——显卡类
  this.videoCard = null;
  //需要知道要交互的同事类——声卡类
  this.soundCard = null;
  this.setCdDriver = function(cdDriver) {
    this.cdDriver = cdDriver;
  }
  this.setCpu = function(cpu) {
    this.cpu = cpu;
  }
  this.setVideoCard = function(videoCard) {
    this.videoCard = videoCard;
  }
  this.setSoundCard = function(soundCard) {
    this.soundCard = soundCard;
  }
  this.changed = function(c) {
    if(c instanceof CDDriver){
      //表示光驱读取数据了
      this.opeCDDriverReadData(c);
    }else if(c instanceof CPU){
      this.opeCPU(c);
    }
  }
  /**
   * 处理光驱读取数据以后与其他对象的交互
   */
  this.opeCDDriverReadData = function(cd){
    //先获取光驱读取的数据
    var data = cd.getData();
    //把这些数据传递给CPU进行处理
    cpu.executeData(data);
  }
  /**
   * 处理CPU处理完数据后与其他对象的交互
   */
  this.opeCPU = function(cpu){
    //先获取CPU处理后的数据
    var videoData = cpu.getVideoData();
    var soundData = cpu.getSoundData();
    //把这些数据传递给显卡和声卡展示出来
    this.videoCard.showData(videoData);
    this.soundCard.soundData(soundData);
  }
}

客户端


//创建调停者——主板
var mediator = new MainBoard();
//创建同事类
var cd = new CDDriver(mediator);
var cpu = new CPU(mediator);
var vc = new VideoCard(mediator);
var sc = new SoundCard(mediator);
//让调停者知道所有同事
mediator.setCdDriver(cd);
mediator.setCpu(cpu);
mediator.setVideoCard(vc);
mediator.setSoundCard(sc);
//开始看电影,把光盘放入光驱,光驱开始读盘
 cd.readCD();

打印效果

调停者模式的优点

● 松散耦合:调停者模式通过把多个同事对象之间的交互封装到调停者对象里面,从而使得同事对象之间松散耦合,基本上可以做到互补依赖。这样一来,同事对象就可以独立地变化和复用,而不再像以前那样“牵一处而动全身”了。
● 集中控制交互:多个同事对象的交互,被封装在调停者对象里面集中管理,使得这些交互行为发生变化的时候,只需要修改调停者对象就可以了,当然如果是已经做好的系统,那么就扩展调停者对象,而各个同事类不需要做修改。
● 多对多变成一对多:没有使用调停者模式的时候,同事对象之间的关系通常是多对多的,引入调停者对象以后,调停者对象和同事对象的关系通常变成双向的一对多,这会让对象的关系更容易理解和实现。

调停者模式的缺点

调停者模式的一个潜在缺点是,过度集中化。如果同事对象的交互非常多,而且比较复杂,当这些复杂性全部集中到调停者的时候,会导致调停者对象变得十分复杂,而且难于管理和维护。

相关推荐:

php设计模式之服务定位器模式实例详解

详解PHP设计模式之委托模式

详解PHP设计模式之建造者模式

Node.js设计模式使用流进行编码

PHP设计模式之简单工厂模式


相关文章

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
pixiv网页版官网登录与阅读指南_pixiv官网直达入口与在线访问方法
pixiv网页版官网登录与阅读指南_pixiv官网直达入口与在线访问方法

本专题系统整理pixiv网页版官网入口及登录访问方式,涵盖官网登录页面直达路径、在线阅读入口及快速进入方法说明,帮助用户高效找到pixiv官方网站,实现便捷、安全的网页端浏览与账号登录体验。

145

2026.02.13

微博网页版主页入口与登录指南_官方网页端快速访问方法
微博网页版主页入口与登录指南_官方网页端快速访问方法

本专题系统整理微博网页版官方入口及网页端登录方式,涵盖首页直达地址、账号登录流程与常见访问问题说明,帮助用户快速找到微博官网主页,实现便捷、安全的网页端登录与内容浏览体验。

100

2026.02.13

Flutter跨平台开发与状态管理实战
Flutter跨平台开发与状态管理实战

本专题围绕Flutter框架展开,系统讲解跨平台UI构建原理与状态管理方案。内容涵盖Widget生命周期、路由管理、Provider与Bloc状态管理模式、网络请求封装及性能优化技巧。通过实战项目演示,帮助开发者构建流畅、可维护的跨平台移动应用。

34

2026.02.13

TypeScript工程化开发与Vite构建优化实践
TypeScript工程化开发与Vite构建优化实践

本专题面向前端开发者,深入讲解 TypeScript 类型系统与大型项目结构设计方法,并结合 Vite 构建工具优化前端工程化流程。内容包括模块化设计、类型声明管理、代码分割、热更新原理以及构建性能调优。通过完整项目示例,帮助开发者提升代码可维护性与开发效率。

13

2026.02.13

Redis高可用架构与分布式缓存实战
Redis高可用架构与分布式缓存实战

本专题围绕 Redis 在高并发系统中的应用展开,系统讲解主从复制、哨兵机制、Cluster 集群模式及数据分片原理。内容涵盖缓存穿透与雪崩解决方案、分布式锁实现、热点数据优化及持久化策略。通过真实业务场景演示,帮助开发者构建高可用、可扩展的分布式缓存系统。

19

2026.02.13

c语言 数据类型
c语言 数据类型

本专题整合了c语言数据类型相关内容,阅读专题下面的文章了解更多详细内容。

27

2026.02.12

雨课堂网页版登录入口与使用指南_官方在线教学平台访问方法
雨课堂网页版登录入口与使用指南_官方在线教学平台访问方法

本专题系统整理雨课堂网页版官方入口及在线登录方式,涵盖账号登录流程、官方直连入口及平台访问方法说明,帮助师生用户快速进入雨课堂在线教学平台,实现便捷、高效的课程学习与教学管理体验。

11

2026.02.12

豆包AI网页版入口与智能创作指南_官方在线写作与图片生成使用方法
豆包AI网页版入口与智能创作指南_官方在线写作与图片生成使用方法

本专题汇总豆包AI官方网页版入口及在线使用方式,涵盖智能写作工具、图片生成体验入口和官网登录方法,帮助用户快速直达豆包AI平台,高效完成文本创作与AI生图任务,实现便捷智能创作体验。

371

2026.02.12

PostgreSQL性能优化与索引调优实战
PostgreSQL性能优化与索引调优实战

本专题面向后端开发与数据库工程师,深入讲解 PostgreSQL 查询优化原理与索引机制。内容包括执行计划分析、常见索引类型对比、慢查询优化策略、事务隔离级别以及高并发场景下的性能调优技巧。通过实战案例解析,帮助开发者提升数据库响应速度与系统稳定性。

28

2026.02.12

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 5.1万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 3万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.3万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号