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

目录
  • 一、桥接设计模式
    • 桥接设计模式在工作中的使用
  • 二、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设计模式 内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

时间: 2022-06-20

Javascript 模式实例 中介者模式

问题: 在页面上,用户会有很多的操作 ,每进行一次操作我们需要去展示操作的结果,在这里我们有了一个问题,我们应如何去展示不同的结果呢?在展示的过程中我们还要考虑当页面功能不断的增加与修改,结果展示也不断的增多,我们要用一个应对这些变化最好的方法解决问题. 解决方法: 在115的网盘开发中就遇到了这样的一个问题,经过几番的思考,决定了用如下的方式去解决这个问题,先看图: 从图中我们可以知道,会使用到一个中介专门去接收使用者的信息,再发送到相应的展示主题,这样我们就可以解决了展示方式不段改变的问题,

Javascript 中介者模式实例

问题: 在页面上,用户会有很多的操作 ,每进行一次操作我们需要去展示操作的结果,在这里我们有了一个问题,我们应如何去展示不同的结果呢?在展示的过程中我们还要考虑当页面功能不断的增加与修改,结果展示也不断的增多,我们要用一个应对这些变化最好的方法解决问题. 解决方法: 在网盘开发中就遇到了这样的一个问题,经过几番的思考,决定了用如下的方式去解决这个问题,先看图: 从图中我们可以知道,会使用到一个中介专门去接收使用者的信息,再发送到相应的展示主题,这样我们就可以解决了展示方式不段改变的问题,如何去展

javascript设计模式 – 桥接模式原理与应用实例分析

本文实例讲述了javascript设计模式 – 桥接模式原理与应用.分享给大家供大家参考,具体如下: 介绍:如果软件系统中某个类存在两个或多个独立变化的维度,可以通过桥接模式将这些维度分离出来,使两者可以独立扩展,让系统更符合单一职责原则. 定义:将抽象部分与其实现部分分离,使他们都可以独立的变化.它是一种对象结构型模式,又称为柄体模式或接口模式. 场景:我们做一个简单的画圆,将圆的半径和颜色这两个维度进行分离,使每一个维度都可以单独扩展,很多同学都说这么简单一个需求我5行代码就实现了.为什么写

详解JavaScript设计模式开发中的桥接模式使用

桥接模式将抽象部分与实现部分分离开来,使两者都可以独立的变化,并且可以一起和谐地工作.抽象部分和实现部分都可以独立的变化而不会互相影响,降低了代码的耦合性,提高了代码的扩展性. 按照GoF的定义,桥接模式的作用在于"将抽象与其实现隔离开来,以便二者独立变化".这种模式对于Javascript中常见的事件驱动的编程大有裨益. 桥接模式最常见和实际的应用场合之一是事件监听器回调函数. example:事件监听器,把事件处理的语句封装到回调函数中,通过接口而不是实现进行编程. 基本理论 桥接

javascript设计模式 – 中介者模式原理与用法实例分析

本文实例讲述了javascript设计模式 – 中介者模式原理与用法.分享给大家供大家参考,具体如下: 介绍:在前端开发的过程中,组件与组件之间的通讯特别常见,一个组件的change需要引起数个组件的change,这就需要组件与组件之间存在复杂的多对多关系链.如何来减轻维护这些关系的复杂度,让组件和组件之间实现低耦合?这就是我们即将介绍的中介者模式. 定义:用一个中介对象(中介者)来封装一系列的对象交互,中介者使个对象不需要显式的相互引用,从而使其耦合松散,而且可以独立的改变他们之间的交互.中介

深入理解JavaScript系列(44):设计模式之桥接模式详解

介绍 桥接模式(Bridge)将抽象部分与它的实现部分分离,使它们都可以独立地变化. 正文 桥接模式最常用在事件监控上,先看一段代码: 复制代码 代码如下: addEvent(element, 'click', getBeerById); function getBeerById(e) { var id = this.id; asyncRequest('GET', 'beer.uri?id=' + id, function(resp) { // Callback response. consol

轻松掌握JavaScript中介者模式

中介者模式的作用就是解除对象与对象之间的紧耦合关系,它也称'调停者'.所有的对象都通过中介者对象来通信,而不是相互引用,所以当一个对象发生改变时,只需要通知中介者即可. 如:机场的指挥塔,每架飞机都只需要和指挥塔通信即可,指挥塔知道每架飞机的飞行状况,可以安排所有起降时间,调整航线等 中介者模式符合迪米特法则,即最少知识原则,指一个对象应该尽可能少地了解另外的对象.如果对象之间的耦合性太高,则改变一个对象,会牵动很多对象,难于维护.当对象耦合很紧时,要修改一个对象而不影响其它的对象是很困难的.

javascript设计模式之中介者模式Mediator

一,总体概要 1,笔者浅谈 我们从日常的生活中打个简单的比方,我们去房屋中介租房,房屋中介人在租房者和房东出租者之间形成一条中介.租房者并不关心他租谁的房.房东出租者也不关心他租给谁.因为有中介的存在,这场交易才变得如此方便. 在软件的开发过程中,势必会碰到这样一种情况,多个类或多个子系统相互交互,而且交互很繁琐,导致每个类都必须知道他需要交互的类,这样它们的耦合会显得异常厉害.牵一发而动全身,后果很严重,大熊很生气!~~~~(>_<)~~~~ 好了,既然问题提出来了,那有请我们这期的主角--

PHP设计模式之中介者模式(Mediator Pattern)入门与应用案例详解

本文实例讲述了PHP设计模式之中介者模式(Mediator Pattern).分享给大家供大家参考,具体如下: 咱们先来看下中介者模式(Mediator Pattern)的定义,它就是,用一个中介对象来封装一系列的对象交互,中介者使各对象不需要显式地相互引用,从而使其耦合松散,而且可以独立地改变它们之间的交互,这种模式又称为调停者模式,它是一种对象行为型模式. 我们先来看用户与用户直接聊天的设计方案. 在这个方案设计的过程中,我们可以发挥想象,用户对象之间存在很强的关联性,将导致系统出现如下问题

Java设计模式之中介者模式(Mediator Pattern)简介

Java设计模式的中介者模式是行为模式之一.定义一个中介对象来封装系列对象之间的交互.中介者使各个对象不需要显式地相互引用,从而使其耦合性松散,并且可以独立地改变他们之间的交互. 如下图所示: 生产者.消费者.代理商之间的中介模式实例: public abstract class PersonColleague { protected Mediator mediator; public Mediator getMediator() { return mediator; } public void

学习JavaScript设计模式之中介者模式

一.定义 面向对象设计鼓励将行为分布到各个对象中,把对象划分成更小的粒度,有助于增强对象的可复用性.但由于这些细粒度对象之间的联系激增,又可能反过来降低它们的可复用性. 中介者模式的作用就是解除对象与对象之间的紧耦合关系. 二.示例:购买商品 假设我们正在开发一个购买手机的页面,购买流程中,可以选择手机颜色以及输入购买数量,同时页面中可以对应展示输入内容.还有一个按钮动态显示下一步操作(该颜色库存量充足,显示下一步:否则显示库存不足). <div> <span>请选择颜色</

javascript设计模式之中介者模式学习笔记

先来理解这么一个问题,假如我们前端开发接的需求是需求方给我们需求,可能一个前端开发会和多个需求方打交道,所以会保持多个需求方的联系,那么在程序里面就意味着保持多个对象的引用,当程序的规模越大,对象会越来越多,他们之间的关系会越来越复杂,那现在假如现在有一个中介者(假如就是我们的主管)来对接多个需求方的需求,那么需求方只需要把所有的需求给我们主管就可以,主管会依次看我们的工作量来给我们分配任务,这样的话,我们前端开发就不需要和多个业务方联系,我们只需要和我们主管(也就是中介)联系即可,这样的好处就

Android编程设计模式之中介者模式详解

本文实例讲述了Android编程设计模式之中介者模式.分享给大家供大家参考,具体如下: 一.介绍 中介者模式(Mediator Pattern)也称为调解者模式或调停者模式,Mediator本身就有调停者和调解者的意思. 在日常生活中调停者或调解者这个角色我们见得比较多的是"和事老",也就是说调解两个有争端的人的角色,举个不恰当的例子,比如爸妈吵架,孩子或者双方父母则会出面劝架或阻止争吵,这里孩子或双方父母则是充当的是调解者的模式. 而对于中介呢?大家平时听得最多的莫过于房产中介了,在

JavaScript设计模式之调停者模式实例详解

本文实例讲述了JavaScript设计模式之调停者模式.分享给大家供大家参考,具体如下: 1.定义 调停者模式包装了一系列对象相互作用的方式,使得这些对象不必相互明显作用.从而使他们可以松散偶合.当某些对象之间的作用发生改变时,不会立即影响其他的一些对象之间的作用.保证这些作用可以彼此独立的变化.调停者模式将多对多的相互作用转化为一对多的相互作用.调停者模式将对象的行为和协作抽象化,把对象在小尺度的行为上与其他对象的相互作用分开处理. 2.使用的原因 当对象之间的交互操作很多,且每个对象的行为操

JavaScript设计模式经典之工厂模式

一.工厂模式概念 工厂模式定义一个用于创建对象的接口,这个接口由子类决定实例化哪一个类.该模式使一个类的实例化延迟到了子类.而子类可以重写接口方法以便创建的时候指定自己的对象类型(抽象工厂). 这个模式十分有用,尤其是创建对象的流程赋值的时候,比如依赖于很多设置文件等.并且,你会经常在程序里看到工厂方法,用于让子类定义需要创建的对象类型. 二.工厂模式的作用和注意事项 模式作用: 1.对象构建十分复杂--我们穿鞋很简单,但是制作鞋子的过程十分复杂 2.需要依赖具体的环境创建不同的实例--工厂可以

JavaScript设计模式经典之命令模式

一.命令模式概念 命令模式(Command)的定义是:用来对方法调用进行参数化处理和传送,经过这样处理过的方法调用可以在任何需要的时候执行.也就是说该模式旨在将函数的调用.请求和操作封装成一个单一的对象,然后对这个对象进行一些列的处理.他也可以用来消除调用操作的对象和实现操作的对象之间的耦合.这为各种具体的类的更换带来了极大的灵活性. 二.命令模式的作用和注意事项 模式作用: 1.将函数的封装.请求.调用结合为一体 2.调用具体的函数解耦命令对象与接收对象 3.提高程序模块化的灵活性 注意事项:

JavaScript设计模式之享元模式实例详解

本文实例讲述了JavaScript设计模式之享元模式.分享给大家供大家参考,具体如下: 通过两个例子的对比来凸显享元模式的特点:享元模式是一个为了提高性能(空间复杂度)的设计模式,享元模式可以避免大量非常相似类的开销. 第一实例,没有使用享元模式,计算所花费的时间和空间使用程度. 要求为:有一个城市要进行汽车的登记 (1)汽车类 /** * 制造商 * 型号 * 拥有者 * 车牌号码 * 最近一次登记日期 */ var Car = function(make,model,year,owner,t