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;
            }
        }

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

坚持努力,无惧未来!

相关文章
|
2月前
|
设计模式 JavaScript 前端开发
JavaScript设计模式--访问者模式
【10月更文挑战第1天】
33 3
|
3月前
|
设计模式 Java 程序员
Java设计模式-适配器模式(8)
Java设计模式-适配器模式(8)
|
2月前
|
设计模式 Java
Java设计模式之适配器模式
这篇文章详细讲解了Java设计模式中的适配器模式,包括其应用场景、实现方式及代码示例。
51 0
|
3月前
|
设计模式 Java
设计模式--适配器模式 Adapter Pattern
这篇文章介绍了适配器模式,包括其基本介绍、工作原理以及类适配器模式、对象适配器模式和接口适配器模式三种实现方式。
|
4月前
|
设计模式 JavaScript 前端开发
从工厂到单例再到策略:Vue.js高效应用JavaScript设计模式
【8月更文挑战第30天】在现代Web开发中,结合使用JavaScript设计模式与框架如Vue.js能显著提升代码质量和项目的可维护性。本文探讨了常见JavaScript设计模式及其在Vue.js中的应用。通过具体示例介绍了工厂模式、单例模式和策略模式的应用场景及其实现方法。例如,工厂模式通过`NavFactory`根据用户角色动态创建不同的导航栏组件;单例模式则通过全局事件总线`eventBus`实现跨组件通信;策略模式用于处理不同的表单验证规则。这些设计模式的应用不仅提高了代码的复用性和灵活性,还增强了Vue应用的整体质量。
59 1
|
4月前
|
设计模式 XML 存储
【六】设计模式~~~结构型模式~~~适配器模式(Java)
文章详细介绍了适配器模式(Adapter Pattern),这是一种结构型设计模式,用于将一个类的接口转换成客户期望的另一个接口,使原本不兼容的接口能够一起工作,提高了类的复用性和系统的灵活性。通过对象适配器和类适配器两种实现方式,展示了适配器模式的代码应用,并讨论了其优点、缺点以及适用场景。
|
4月前
|
设计模式 JavaScript 前端开发
小白请看 JS大项目宝典:设计模式 教你如何追到心仪的女神
小白请看 JS大项目宝典:设计模式 教你如何追到心仪的女神
|
5月前
|
设计模式 JavaScript Go
js设计模式【详解】—— 状态模式
js设计模式【详解】—— 状态模式
83 7
|
5月前
|
设计模式 JavaScript
js设计模式【详解】—— 桥接模式
js设计模式【详解】—— 桥接模式
73 6
|
5月前
|
设计模式 JavaScript
js设计模式【详解】—— 原型模式
js设计模式【详解】—— 原型模式
53 6