JavaScript设计模式-适配器模式(11)

简介: JavaScript设计模式-适配器模式(11)

适配器设计模式可以用生活中常用的笔记本电脑来做例子,笔记本使用电压在20v左右,但是我们家用电压在220v左右,所以我们希望用家用电适配对应的笔记本电压,这个时候就需要使用电源适配器


我们可以用我们刚刚说的笔记本电脑来举例子

这是家用电,家用电电压为220V,所以我们返回一下电压数

// 家用电
        class Power{
            charge(){
                return '220V';
            }
        }

笔记本电源适配器,我们创建一个家用电实例,在通过方法对电压进行转换为笔记本可充电的电压

class Adaptor{
            constructor(){
                this.power= new Power();
            }
            charge(){
                // 先拿到家用电电压
                let voltage=this.power.charge;
                // 返回一个转换值
                return `${voltage}=>20V`
            }
        }

电脑,我们创建一个电脑适配器实例,然后电脑适配器实例的电压转换方法对电压进行转换充电

class Computer{
        constructor(){
            this.adaptor=new Adaptor()
        }
        // 电脑充电
        use(){
            console.log(this.adaptor.charge());
        }
    }

使用

const cop=new Computer();
//充电
cop.use();

在工作中我们需要使用到多个功能,比如我们项目中使用到了百度地图数据接口和高德地图数据接口,这个时候我们就可以去使用适配器模式

//对百度地图的数据接口操作
const BaiduMap={
           show(){
              //获取百度地图数据
           }
       }
       //对高德地图的数据接口操作
       const GaodeiMap={
           show(){
           //获取高德地图数据
           }
       }
            //对腾讯地图的数据接口操作
       const TxMap={
           init(){
           //获取腾讯地图数据
           }
       }

由于他们都有共同点,所以请求数据都为show方法,如果有一天使用到其他的地图请求数据为init的API接口,我们去修改获取数据的方法的话成本太高,这个时候就需要使用到了适配器设计模式,通过switch语句进行匹配方法名,进行调用

//接收俩个参数,第一个是地图模块名,第二个是调用方法
function Adapter(V, fnName) {
            switch (fnName) {
                case 'show':
                    V.show()
                    break;
                case 'init':
                    V.init()
                    break;
            }
        }

适配器设计模式可以让彼此不兼容的功能在一块工作,有助于避免大规模的修改代码,并且易于扩展和兼容,但是如果过多的使用适配器,就会使得代码复杂程度增加,看起来十分混乱,维护起来有一定的困难

坚持努力,无惧未来!

相关文章
|
15小时前
|
设计模式 前端开发 JavaScript
【JavaScript 技术专栏】JavaScript 设计模式与实战应用
【4月更文挑战第30天】本文探讨JavaScript设计模式在提升开发效率和代码质量中的关键作用。涵盖单例、工厂、观察者、装饰器和策略模式,并通过实例阐述其在全局状态管理、复杂对象创建、实时数据更新、功能扩展和算法切换的应用。理解并运用这些模式能帮助开发者应对复杂项目,提升前端开发能力。
|
15小时前
|
设计模式 Java API
重构旧代码的秘诀:用设计模式 - 适配器模式(Adapter)给Java项目带来新生
【4月更文挑战第7天】适配器模式是解决接口不兼容问题的结构型设计模式,通过引入适配器类实现目标接口并持有不兼容类引用,实现旧代码与新接口的协作。适用于处理兼容性问题、整合遗留代码和集成第三方库。应用时,识别不兼容接口,创建适配器类转换方法调用,然后替换原有引用。注意保持适配器简单、使用组合和考虑扩展性。过度使用可能导致系统复杂和维护成本增加,应谨慎使用。
|
15小时前
|
设计模式 Java 中间件
23种设计模式,适配器模式的概念优缺点以及JAVA代码举例
【4月更文挑战第6天】适配器模式(Adapter Pattern)是一种结构型设计模式,它的主要目标是让原本由于接口不匹配而不能一起工作的类可以一起工作。适配器模式主要有两种形式:类适配器和对象适配器。类适配器模式通过继承来实现适配,而对象适配器模式则通过组合来实现
38 4
|
15小时前
|
设计模式 Java Go
【设计模式】适配器模式怎么理解?
【设计模式】适配器模式怎么理解?
8 1
|
15小时前
|
设计模式 JavaScript 前端开发
js设计模式-观察者模式与发布/订阅模式
观察者模式和发布/订阅模式是JavaScript中的两种设计模式,用于处理对象间的通信和事件处理。观察者模式中,一个主题对象状态改变会通知所有观察者。实现包括定义主题和观察者对象,以及在主题中添加、删除和通知观察者的功能。发布/订阅模式则引入事件管理器,允许发布者发布事件,订阅者通过订阅接收通知。
|
15小时前
|
设计模式 JavaScript 算法
js设计模式-策略模式与代理模式的应用
策略模式和代理模式是JavaScript常用设计模式。策略模式通过封装一系列算法,使它们可互换,让算法独立于客户端,提供灵活的选择。例如,定义不同计算策略并用Context类执行。代理模式则为对象提供代理以控制访问,常用于延迟加载或权限控制。如创建RealSubject和Proxy类,Proxy在调用RealSubject方法前可执行额外操作。这两种模式在复杂业务逻辑中发挥重要作用,根据需求选择合适模式解决问题。
|
15小时前
|
设计模式 Java Go
[设计模式Java实现附plantuml源码~结构型]不兼容结构的协调——适配器模式
[设计模式Java实现附plantuml源码~结构型]不兼容结构的协调——适配器模式
|
15小时前
|
设计模式 Go
[设计模式 Go实现] 结构型~适配器模式
[设计模式 Go实现] 结构型~适配器模式
|
15小时前
|
设计模式 Java
【设计模式系列笔记】适配器模式
适配器模式(Adapter Pattern)是一种结构型设计模式,用于将一个类的接口转换成客户端所期望的另一种接口。它允许原本由于接口不匹配而无法一起工作的类能够协同工作。适配器模式通常涉及一个称为适配器的类,它充当两个不兼容接口之间的桥梁。
39 6
|
15小时前
|
设计模式 Java 数据库
小谈设计模式(18)—适配器模式
小谈设计模式(18)—适配器模式