广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JavaScript设计模式中的桥接和中介者模式
  • 325
分享到

JavaScript设计模式中的桥接和中介者模式

2024-04-02 19:04:59 325人浏览 安东尼
摘要

目录一、桥接设计模式桥接设计模式在工作中的使用二、javascript中介者模式生活中的中介者中介者设计模式案例业务中的中介者一、桥接设计模式 桥接设计模式是一种偏向于组合的设计模式

一、桥接设计模式

桥接设计模式是一种偏向于组合的设计模式,而非继承的设计模式,实现的细节从一个模块推送给另一个具有单独模块的对象

桥接设计模式在开发中常用于事件监控,还有数组的一些方法都能够体现出来桥接设计模式的思想,例如数组方法的forEach方法

桥接设计模式在工作中的使用

有一个很多页面的网站,我们预期是让用户可以选择修改网站的主体,如果给每个页面都创建一个主题页面的副本,这样做会很麻烦,这个时候我们就可以使用桥接设计模式进行实现,进行控制网站的主题颜色,通过创建单独的主题根据用户的选择进行加载,接下来我们来实现一下

先声明俩个主题模块类,一个是外观主题,一个是内容主题,里面拥有一个方法,该方法可以进行设置主题颜色

// 外观主题
        class Large {
            constructor(theme) {
                // 主题颜色
                this.theme = theme;
            }
            // 设置主题颜色
            setThemeColor() {
            console.log("Large主题颜色设置为" + this.theme.getColor());
            }
        }
        // 内容主题
        class Small {
            constructor(theme) {
                // 主题颜色
                this.theme = theme;
            }
            // 设置主题颜色
            setThemeColor() {
 console.log("Small主题颜色设置为" + this.theme.getColor());
            }
        }

在声明几个主题颜色类,类里面有一个方法可以获取当前主题颜色

       class RedTheme {
            getColor() {
               return "red";
            }
        }
        class BlueTheme {
            getColor() {
                return "blue";
            }
        }
        class YellowTheme {
            getColor() {
                return "yellow";
            }
        }

我们进行创建主题模块类,在把主题颜色类传递过去调用主题模块设置主题颜色的方法

      // 创建主题颜色
        const RedTheme = new RedTheme();
        const BlueTheme = new BlueTheme();
        const YellowTheme = new YellowTheme();
        // 主题模块

     const Large = new Large(RedTheme);
        const Small = new Small(BlueTheme);
        // 设置外观主题和内容主题
        Large.setThemeColor()
        Small.setThemeColor()

桥接设计模式的优势在于就算其中某一模块发生变化,也不会影响其他模块的使用,降低了代码的耦合度,同时因桥接设计模式要求两个模块之间没有耦合关系,否则无法完成独立的变化,所以也是比继承方案更好的解决方案,提高了代码的可扩展性,但是因此桥接设计模式也提高了整体代码的复杂程度

二、JavaScript中介者模式

中介者设计模式是指通过一个中介者对象封装一系列的对象交互,中介者对象可以让每个对象不需要显式地相互引用,从降低耦合度,当其中一个对象发生改变时,只需要通知中介者对象即可

生活中的中介者

在生活中我们也经常使用到中介者设计模式,例如,医院的120急救中心调度站,当我们打电话给120急救中心时,急救中心120调度员接到电话会指派最近的急救车辆去我们身边,急救车辆只需要和急救中心调度台通信就能确定路线和需要救援人员位置,而不需要和所有的急救车辆通信,同时急救中心调度台作为中介者,知道每个车辆的位置与行驶路线,所以可以安排所有急救车辆的路线和调配

中介者设计模式案例

我们来照着急救中心调度站的例子来实现一下

创建一个急救中心调度站,里面有俩个属性代表救护车编号和需要急救的病人,还有俩个方法给急救车分配任务,以及询问当前急救车辆是否有急救任务

        class Firstaid {
            constructor(identifier) {
                // 救护车编号
                this.identifier = identifier;
                // 需要救得病人
                this.patient = null;
            }
            // 添加病人
            setPatient(patient) {
                this.patient = patient;
            }
            // 是否已有急救任务
            receivePatient() {
                // 通过是否分配病人进行判断
                if (this.patient) {
                    console.log(this.identifier + '已接收病人');
                } else {
                    console.log(this.identifier + '未接收病人,可接收急救任务');
                }
            }
        }

创建急救车实例,并进行分派任务

     // 创建急救车
        let first1 = new FirstAid('急救车1');
        let first2 = new FirstAid('急救车2');
        //分派急救任务
        first1.setPatient('小孩');
        //询问是否可接收急救任务
        first1.receivePatient();
        first2.receivePatient();

业务中的中介者

中介者设计模式在我们书写业务中也经常会用到,比如电商网站做的购物车需求,该需求中有存在商品选择表单,颜色选择表单  ,购买数量表单等等,都会触发change事件,这个时候我们就可以通过中介者进行转发处理这些事件,实现每个事件的解耦,我们只需要维护中介者对象即可

redux和Vuex都属于中介者设计模式的实际应用,我们把共享的数据抽离成一个store,每个都通过store这个中介者来进行操作

中介者设计模式通过让对象之间的关联性变低降低了代码耦合度提高了可复用性,通过将控制逻辑集中,提高代码可维护性,但是中介者在其中承担了较多的责任,一旦中介者出现问题,整个系统就都会受到影响

到此这篇关于JavaScript设计模式中的桥接和中介者模式的文章就介绍到这了,更多相关JavaScript设计模式 内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: JavaScript设计模式中的桥接和中介者模式

本文链接: https://www.lsjlt.com/news/152400.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • JavaScript设计模式中的桥接和中介者模式
    目录一、桥接设计模式桥接设计模式在工作中的使用二、JavaScript中介者模式生活中的中介者中介者设计模式案例业务中的中介者一、桥接设计模式 桥接设计模式是一种偏向于组合的设计模式...
    99+
    2022-11-13
  • JavaScript设计模式中的桥接和中介者模式怎么实现
    这篇文章主要介绍“JavaScript设计模式中的桥接和中介者模式怎么实现”,在日常操作中,相信很多人在JavaScript设计模式中的桥接和中介者模式怎么实现问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”J...
    99+
    2023-07-02
  • Java设计模式中的桥接模式
    目录模式介绍UML类图桥接模式案例桥接模式的注意事项和细节常见的应用场景模式介绍 桥接模式(Bridge模式)是指:将实现与抽象放在两个不同的类层次中,使两个层次可以独立改变。是一种...
    99+
    2022-11-13
  • JavaScript设计模式之中介者模式详解
    目录中介者模式现实中的中介者中介者模式的例子泡泡堂游戏为游戏增加队伍玩家增多带来的困扰用中介者模式改造泡泡堂游戏小结中介者模式 在我们生活的世界中,每个人每个物体之间都会产生一些错综...
    99+
    2022-11-13
    JavaScript 设计模式 JavaScript 中介者模式
  • Java设计模式之中介者模式
    在我们实际业务中,可能存在多个类之间相互调用,形成了一个复杂的网状结构。这时候就需要有一种模式去“捋顺”他们之间的关系,引出一个中间者让类之间不再相互调用,该...
    99+
    2022-11-13
    Java 设计模式 中介者模式
  • Python设计模式中的结构型桥接模式
    目录一、桥接模式二、应用场景三、代码示例一、桥接模式 桥接模式,希望能够将一个事物的两个维度分离(解耦),使其都可以独立地变化,并通过桥梁连接起来。 (类)抽象部分(Abstract...
    99+
    2022-11-13
  • JavaScript设计模式中的观察者模式
    目录观察者设计模式初始数据被观察者观察者观察者设计模式 观察者设计模式中分为被观察者和观察者,当被观察者触发了某个边界条件,观察者就会触发事件,这里需要俩个构造函数进行观察者设计模式...
    99+
    2022-11-13
  • Golang设计模式中的桥接模式详细讲解
    目录桥接模式概念示例桥接模式 桥接是一种结构型设计模式, 可将业务逻辑或一个大类拆分为不同的层次结构, 从而能独立地进行开发。 层次结构中的第一层 (通常称为抽象部分) 将包含对第二...
    99+
    2023-01-11
    Go桥接模式 Go设计模式
  • PHP设计模式之中介者模式浅析
    目录中介者模式PHP中的中介者模式中介者模式 中介者模式(Mediator Pattern)是一种常用的设计模式,用于解决各个对象之间的复杂依赖关系,使得各个对象之间可以独立地改变自...
    99+
    2023-05-14
    PHP中介者模式 PHP 设计模式 中介者模式
  • Java设计模式之桥接模式的实现
    桥接模式 桥接模式是将抽象部分与它的实现部分分离,使他们都可以独立地变化。它是一种对象结构型模式,又称为柄体(Handle and Body)模式或接口(Interface)模式。 ...
    99+
    2022-11-12
  • Java设计模式之中介者模式的实现方式
    目录介绍实现总结介绍 Java中介者模式(Mediator Pattern)是一种行为设计模式,它可以降低多个对象之间的耦合性,通过一个中介者对象来协调这些对象的交互. 在中介者模式...
    99+
    2023-05-18
    Java设计模式中介者模式 Java中介者模式
  • Java设计模式之java中介者模式详解
    目录引言介绍角色数据库同步数据案例不使用中介者模式的数据同步方案,各数据源维护各自的同步作业其实这样已经实现了我们的需求,但是存在一些问题中介者模式来重构,将数据同步的功能迁移到中介...
    99+
    2022-11-12
  • C++设计模式中的桥模式是什么
    这篇文章主要介绍了C++设计模式中的桥模式是什么,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。单一职责模式:在软件组件的设计中,如果责任划分的不清晰,使用继承得到的结果往往是...
    99+
    2023-06-29
  • Java设计模式的桥接模式如何实现
    本文小编为大家详细介绍“Java设计模式的桥接模式如何实现”,内容详细,步骤清晰,细节处理妥当,希望这篇“Java设计模式的桥接模式如何实现”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。什么是桥接模式桥接(Bri...
    99+
    2023-07-06
  • 如何理解Java设计模式的桥接模式
    这篇文章主要讲解了“如何理解Java设计模式的桥接模式”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“如何理解Java设计模式的桥接模式”吧!一、什么是桥接模式桥接模式(Bridge Patt...
    99+
    2023-06-25
  • Java设计模式的桥接模式怎么实现
    这篇文章主要讲解了“Java设计模式的桥接模式怎么实现”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Java设计模式的桥接模式怎么实现”吧!什么是桥接模式桥接(Bridge)模式的定义如下:...
    99+
    2023-06-30
  • 理解JavaScript设计模式中的建造者模式
    我们在前面已经提过设计模式创建型模式的 3 种工厂模式 和 单例模式;本篇带来同属创建型模式的“建造者模式” 建造者模式(Builder Pattern)使...
    99+
    2022-11-13
  • .Net行为型设计模式之中介者模式(Mediator)
    目录一、动机(Motivate)二、意图(Intent)三、结构图(Structure)四、模式的组成五、中介者模式的代码实现六、中介者模式的实现要点:1、中介者模式的优点2、中介者...
    99+
    2022-11-13
  • 深入理解Java设计模式之中介者模式
    目录一、什么是中介者模式二、中介者模式的结构三、中介者模式的优缺点四、中介者模式的使用场景五、中介者模式与发布/订阅模式的异同六、中介者模式的实现结果总结一、什么是中介者模式 用一个...
    99+
    2022-11-12
  • PHP设计模式之中介者模式怎么实现
    这篇“PHP设计模式之中介者模式怎么实现”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“PHP设计模式之中介者模式怎么实现”文...
    99+
    2023-07-05
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作