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 适配器模式内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • JavaScript设计模式之适配器模式介绍

    适配器模式说明 说明: 适配器模式,一般是为要使用的接口,不符本应用或本系统使用,而需引入的中间适配层类或对象的情况: 场景: 就好比我们买了台手机,买回来后发现,充电线插头是三插头,但家里,只有两插头的口的插座,怎么办?为了方便,也有为能在任何地方都能充上电,就得去买个通用充电适配器; 这样手机才能在自己家里充上电:不然只能放着,或跑到有这个插头的地方充电: 实际开发环境下,由于旧的系统,或第三方应用提供的接口,与我们定义的接口不匹配,在以面向接口编程的环境下,就无法使用这样旧的,或第三方的接

  • Adapter适配器模式在JavaScript设计模式编程中的运用分析

    定义 适配器模式(Adapter)是将一个类(对象)的接口(方法或属性)转化成客户希望的另外一个接口(方法或属性),适配器模式使得原本由于接口不兼容而不能一起工作的那些类(对象)可以一些工作.速成包装器(wrapper). 适配器的别名是包装器(wrapper),这是一个相对简单的模式.在程序开发中有许多这样的场景:当我们试图调用模块或者对象的某个接口时,却发现这个接口的格式并不符合目前的需求.这时候有两种解决办法,第一种是修改原来的接口实现,但如果原来的模块很复杂,或者我们拿到的模块是一段别人

  • JavaScript设计模式学习之适配器模式

    目录 概述 代码实现 总结 概述 适配器模式是设计模式行为型模式中的一种模式: 定义: 适配器用来解决两个已有接口之间不匹配的问题,它并不需要考虑接口是如何实现,也不用考虑将来该如何修改:适配器不需要修改已有接口,就可以使他们协同工作: 白话解释: 你买了某种电器产品,准备带回家好好感受该款产品的魅力:结果带回家之后准备通电使用的时候,发现该产品仅支持两孔插座,而你家里的电源插座都是三孔插座:这个时候你总不能又跑去电器专卖店退货吧:突然灵机一动,你想起来了家里还有多功能电源插座,而多功能电源插座

  • javascript设计模式之Adapter模式【适配器模式】实现方法示例

    本文实例讲述了javascript设计模式之Adapter模式.分享给大家供大家参考,具体如下: 所谓Adapter模式就是适配器模式,主要是指使两个原本没有关联的类结合一起使用. JS实现Adapter模式示例如下: <!DOCTYPE html> <html> <head> <title></title> <script type="text/javascript" src="json.js"&g

  • javascript设计模式 – 适配器模式原理与应用实例分析

    本文实例讲述了javascript设计模式 – 适配器模式原理与应用.分享给大家供大家参考,具体如下: 介绍:适配器模式的产生也来自具体的问题,拿mac来举例,我不能直接用mac链接VGA,不能直接连接网线接口,这是就需要提供一些转接头,来将一些特殊的接口与我们的火线口相链接. 在这个过程中转接头就相当于一类适配器,mac被转接头所扩展,所以mac称之为适配者.适配器的主要作用是将客户端的请求转化为对适配者接口的调用.好多场景下因为接口的不兼容, 多一个参数少一个参数,参数格式不正确,调用顺序等

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

    前言: 适配器设计模式可以用生活中常用的笔记本电脑来做例子,笔记本使用电压在20v左右,但是我们家用电压在220v左右,所以我们希望用家用电适配对应的笔记本电压,这个时候就需要使用电源适配器 我们可以用我们刚刚说的笔记本电脑来举例子,这是家用电,家用电电压为220V,所以我们返回一下电压数 // 家用电         class Power{             charge(){                 return '220V';             }         }

  • 结合ES6 编写 JavaScript 设计模式中的结构型模式

    目录 前言 什么是设计模式? 结构型设计模式 适配器模式 实例 桥接模式 实例 组合模式 实例 装饰者模式 实例 门面模式 实例 享元模式 实例 代理模式 实例 前言 本文将对 20 多种 JavaScript 设计模式进行简单概述,然后结合 ES6 类的方式来编写实例代码展示其使用方式. JavaScript 在现代前端中扮演重要的角色,相比过去能够做的事情已经不在一个级别上了.JavaScript 最大的特征是其灵活性,一般只要敢想敢写,可以把程序写得很简单,有可以写得很复杂.其灵活性导致编

  • JavaScript设计模式之原型模式和适配器模式示例详解

    目录 原型模式 原型模式介绍 代码实现 适配器模式 适配器模式介绍 代码实现 小结 原型模式 原型模式介绍 原型模式是指原型实例指向创建对象的种类,并通过拷贝这些原型创建新的对象,是一种用来创建对象的模式,也就是创建一个对象作为另一个对象的prototype属性 实现原型模式是在ECMAScript5中,提出的Object.create方法,使用现有的对象来提供新创建的对象的__proto__. 代码实现 var lynkCoPrototype = { model: "领克", get

  • JavaScript设计模式之单例模式实例

    JavaScript设计模式之单例模式实例

    <Practical Common Lisp>的作者 Peter Seibel 曾说,如果你需要一种模式,那一定是哪里出了问题.他所说的问题是指因为语言的天生缺陷,不得不去寻求和总结一种通用的解决方案. 不管是弱类型或强类型,静态或动态语言,命令式或说明式语言.每种语言都有天生的优缺点.一个牙买加运动员, 在短跑甚至拳击方面有一些优势,在练瑜伽上就欠缺一些. 术士和暗影牧师很容易成为一个出色的辅助,而一个背着梅肯满地图飞的敌法就会略显尴尬. 换到程序中, 静态语言里可能需要花很多功夫来实现装饰

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

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

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

  • JavaScript设计模式之构造函数模式实例教程

    JavaScript设计模式之构造函数模式实例教程

    本文实例讲述了JavaScript设计模式之构造函数模式.分享给大家供大家参考,具体如下: 一.构造函数模式概念 构造函数用于创建特定类型的对象--不仅声明了使用过的对象,构造函数还可以接受参数以便第一次创建对象的时候设置对象的成员值.你可以自定义自己的构造函数,然后在里面声明自定义类型对象的属性或方法. 在JavaScript里,构造函数通常是认为用来实现实例的,JavaScript没有类的概念,但是有特殊的构造函数.通过new关键字来调用自定义的构造函数,在构造函数内部,this关键字引用的

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

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

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

  • JavaScript设计模式之代理模式实例分析

    JavaScript设计模式之代理模式实例分析

    本文实例讲述了JavaScript设计模式之代理模式.分享给大家供大家参考,具体如下: 代理模式的定义,代理是一个对象(proxy)用它来控制目标对象的访问.为此他要是先与目标对象相同的接口,但是他不同于装饰者模式,它对目标对象不进行任何修改,它的目的在于延缓"复杂"对象的初始化时间.这样可以在用到这个目标对象的时候再初始化他(对于单例来讲更是重要). 代理模式有两种分类: (1)普通代理 (2)惰性代理 具体看下面的例子 第一,普通代理模式 步骤一,接口检验文件的引用 //定义一个静

随机推荐