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

 更新时间:2022年06月23日 14:16:57   作者:​ 前端若水   ​  
这篇文章主要介绍了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 适配器模式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 京东优选小程序的实现代码示例

    京东优选小程序的实现代码示例

    这篇文章主要介绍了京东优选小程序的实现代码示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-02-02
  • JS循环中正确使用async、await的姿势分享

    JS循环中正确使用async、await的姿势分享

    async / await是ES7的重要特性之一,也是目前社区里公认的优秀异步解决方案,下面这篇文章主要给大家介绍了关于JS循环中正确使用async、await的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2021-12-12
  • JS中SetTimeout和SetInterval使用初探

    JS中SetTimeout和SetInterval使用初探

    这篇文章主要介绍了JS中SetTimeout和SetInterval使用初探,需要的朋友可以参考下
    2017-03-03
  • canvas 绘制圆形时钟

    canvas 绘制圆形时钟

    本文主要分享了利用canvas如何绘制圆形时钟的示例代码,具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • 小程序云开发部署攻略(图文教程)

    小程序云开发部署攻略(图文教程)

    微信小程序的云开发功能刚刚上线,这篇文章主要介绍了小程序云开发部署攻略(图文教程),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-10-10
  • JavaScript装饰器的实现原理详解

    JavaScript装饰器的实现原理详解

    最近在使用TS+Vue的开发模式,发现项目中大量使用了装饰器,看得我手足无措,今天特意研究一下实现原理,方便自己理解这块知识点,有需要的小伙伴也可以参考一下
    2022-10-10
  • js项目中前端如何实现无感刷新token

    js项目中前端如何实现无感刷新token

    本文主要介绍了js项目中前端如何实现无感刷新token,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-07-07
  • JS实现无限级网页折叠菜单(类似树形菜单)效果代码

    JS实现无限级网页折叠菜单(类似树形菜单)效果代码

    这篇文章主要介绍了JS实现无限级网页折叠菜单(类似树形菜单)效果代码,涉及JavaScript基于鼠标事件实现针对页面元素结点的遍历及样式操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-09-09
  • ECharts柱状图过多添加滚动条的步骤(亲测可用)

    ECharts柱状图过多添加滚动条的步骤(亲测可用)

    这篇文章主要介绍了ECharts柱状图过多添加滚动条的步骤(亲测可用),添加echarts柱状图滚动条,首先添加js用来判断当前视图要显示几个及是否显示滚动条,本文结合实例代码介绍的非常详细,需要的朋友参考下吧
    2024-01-01
  • JavaScript中实现sprintf、printf函数

    JavaScript中实现sprintf、printf函数

    这篇文章主要介绍了JavaScript中实现sprintf、printf函数,这两个函数在大多数编程语言中都有,但JS中却没有,本文介绍在js中实现这两个函数功能,需要的朋友可以参考下
    2015-01-01

最新评论