JavaScript设计模式适配器模式实例

前言：

适配器设计模式可以用生活中常用的笔记本电脑来做例子，笔记本使用电压在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;
            }
        }

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

到此这篇关于JavaScript设计模式适配器模式实例的文章就介绍到这了,更多相关JavaScript 适配器模式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！