详解JavaScript实现设计模式中的适配器模式的方法

有的时候在开发过程中，我们会发现，客户端需要的接口和提供的接口发生不兼容的问题。由于特殊的原因我们无法修改客户端接口。在这种情况下，我们需要适配现有接口和不兼容的类，这就要提到适配器模式。通过适配器，我们可以在不用修改旧代码的情况下也能使用它们，这就是适配器的能力。
适配模式可用来在现有接口和不兼容的类之间进行适配，使用这种模式的对象又叫包装器（wrapper），因为它们是在用一个新的接口包装另一个对象。
从表面上看，适配器模式很像外观模式。它们都要对别的对象进行包装并改变其呈现的接口。二者的差别在于它们如何改变接口。外观元素展现的是一个简化的接口，它并不提供额外的选择，而且有时为了方便完成常见任务它还会做出一些假定。而适配器则要把一个接口转换为另一个接口，它并不会滤除某些能力，也不会简化接口。如果客户系统API不可用，就需要用到适配器。

基本理论

适配器模式：将一个接口转换成客户端需要的接口而不需要去修改客户端代码，使得不兼容的代码可以一起工作。

适配器主要有3个角色组成：
（1）客户端：调用接口的类
（2）适配器：用来连接客户端接口和提供服务的接口的类
（3）适配者：提供服务，但是却与客户端接口需求不兼容服务类。

适配器模式的实现

1.最简单的适配器

适配器模式没有想象中的那么复杂，举个最简单的例子。
客户端调用一个方法进行加法计算：

var result = add(1,2);

但是我们没有提供add这个方法，提供了同样类似功能的sum方法：

function sum(v1,v2){
  return v1 + v2;
}

为了避免修改客户端和服务端，我们增加一个包装函数：

function add (v1,v2){
  reutrn sum(v1,v2);
}

这就是一个最简单的适配器模式，我们在两个不兼容的接口之间添加一个包装方法，用这个方法来连接二者使其共同工作。

2.实际应用

随着前端框架的发展，越来越多的开发者开始使用MVVM框架进行开发，只需要操作数据而不需要操作DOM元素，jQuery的作用越来越少。而很多项目中还是引用着jQuery库作用工具类，因为我们要利用jQuery提供的ajax去服务器请求数据。如果jQuery在项目中的作用仅仅是作为ajax工具库的话，有点杀鸡焉用牛刀的感觉，造成资源浪费。这个时候我们完全可以封装一个自己的ajax库。
假设我们封装的ajax就通过一个函数进行使用：

ajax({
  url:'/getData',
  type:'Post',
  dataType:'json',
  data:{
    id:"123"
  }
})
.done(function(){})

除了调用接口ajax与jQuery的$.ajax的不同，其他完全一样。
项目中请求ajax的地方必然很多，我们替换jQuery的时候不可能一个一个去修改$.ajax，那怎么办呢，这个时候，我们就可以增加一个适配器：

var $ = {
  ajax:function (options){
    return ajax(options);
  }
}

这样就能兼容旧代码和新接口，避免对已有的代码的修改。

总结

适配器模式的原理很简单，就是新增一个包装类，对新的接口进行包装以适应旧代码的调用，避免修改接口和调用代码。
适用场景：存在较多代码调用旧接口，为了避免修改旧代码和更换新接口，不影响现有实现方式的应用场景。

1.适配器模式的适用场合：
适配器适用于客户系统期待的接口与现有API提供的接口不兼容这种场合。适配器所适配的两个方法执行的应该是类似的任务，否则的话就解决不了问题。就像桥接元素和外观元素一样，通过创建适配器，可以把抽象与其实现隔离开来，以便二者独立变化。

2.适配器模式之利：
用一个新的接口对现有类的接口进行包装，这样客户程序就能使用这个并非为其量身打造的类而又无需为此大动手术。

3.设配器模式之弊：
有人认为适配器是一种不必要的开销，完全可以通过重写现有代码避免。此外适配器模式也会引入一批需要支持的新工具。如果现有API还未定形，或者新接口还未定形，那么适配器可能不会一直管用。
在涉及大型系统和遗留框架的情况下，它的优点往往比缺点更突出。

赞 (0)

相关推荐

  • NodeJS设计模式总结【单例模式,适配器模式,装饰模式,观察者模式】

    本文实例讲述了NodeJS设计模式.分享给大家供大家参考,具体如下: 1 . 单例模式 顾名思义,单例就是保证一个类只有一个实例,实现的方法是,先判断实例是否存在,如果存在则直接返回,若不存在,则创建实例对象,并将实例对象保存在静态变量中,当下次请求时,则可以直接返回这个对象实例,这就确保了一个类只有一个实例对象.举个例子吧~一间学校刚刚起建还没有图书馆,有的同学就向领导提意见:"hey! 哥们,能不能帮我们建一个图书馆? "(想要一个图书馆实例),然后领导说:"no pro

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

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

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

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

  • JavaScript适配器模式详解

    JavaScript适配器模式详解

    适配模式可用来在现有接口和不兼容的类之间进行适配,使用这种模式的对象又叫包装器(wrapper),因为它们是在用一个新的接口包装另一个对象. 基本理论 适配器模式:将一个接口转换成客户端需要的接口而不需要去修改客户端代码,使得不兼容的代码可以一起工作. 适配器主要有3个角色组成: (1)客户端:调用接口的类 (2)适配器:用来连接客户端接口和提供服务的接口的类 (3)适配者:提供服务,但是却与客户端接口需求不兼容服务类. 此处 有一个实例是关于两个数的加法的. 一.先有一个能够实现,两个数加法的

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

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

  • 深入理解JavaScript系列（39）：设计模式之适配器模式详解

    介绍 适配器模式(Adapter)是将一个类(对象)的接口(方法或属性)转化成客户希望的另外一个接口(方法或属性),适配器模式使得原本由于接口不兼容而不能一起工作的那些类(对象)可以一些工作.速成包装器(wrapper). 正文 我们来举一个例子,鸭子(Dock)有飞(fly)和嘎嘎叫(quack)的行为,而火鸡虽然也有飞(fly)的行为,但是其叫声是咯咯的(gobble).如果你非要火鸡也要实现嘎嘎叫(quack)这个动作,那我们可以复用鸭子的quack方法,但是具体的叫还应该是咯咯的,此时,

  • 详解JavaScript实现设计模式中的适配器模式的方法

    有的时候在开发过程中,我们会发现,客户端需要的接口和提供的接口发生不兼容的问题.由于特殊的原因我们无法修改客户端接口.在这种情况下,我们需要适配现有接口和不兼容的类,这就要提到适配器模式.通过适配器,我们可以在不用修改旧代码的情况下也能使用它们,这就是适配器的能力. 适配模式可用来在现有接口和不兼容的类之间进行适配,使用这种模式的对象又叫包装器(wrapper),因为它们是在用一个新的接口包装另一个对象. 从表面上看,适配器模式很像外观模式.它们都要对别的对象进行包装并改变其呈现的接口.二者的差

  • 详解JavaScript for循环中发送AJAX请求问题

    详解JavaScript for循环中发送AJAX请求问题

    首先说,出现这个问题的场景是很少见的,因为有太多更好解决方法.今天搞ajax的时候,一个有趣的地方,,每个迭代中都要发送一个get请求,因为迭代的速度太快,一个请求还没有完成就进行下一个迭代,在chrome和ff上,除最后一个请求外,其它请求都被取消了.所以该怎么办呢?设置延时(不太好)还是其他办法?  办法有很多,比如设置休眠,迭代等等, 我采用的是另外两种解决办法.  一.同步的ajax请求,而ajax请求默认是异步的,所以要设置为false. function creatXMLHttpRe

  • 详解JavaScript异步编程中jQuery的promise对象的作用

    Promise, 中文可以理解为愿望,代表单个操作完成的最终结果.一个Promise拥有三种状态:分别是unfulfilled(未满足的).fulfilled(满足的).failed(失败的),fulfilled状态和failed状态都可以被监听.一个愿望可以从未满足状态变为满足或者失败状态,一旦一个愿望处于满足或者失败状态,其状态将不可再变化.这种"不可改变"的特性对于一个Promise来说非常的重要,它可以避免Promise的状态监听器修改一个Promise的状态导致别的监听器的行

  • 详解java8在Collection中新增加的方法removeIf

    记得我在以前找工作的经历中,遇到过一个面试官问过我一个很基础的问题.问题是:有一个List中有10个元素,我现在想从中删除3个元素,请问怎么做?我当时也没想,就直接说,List的有自带的remove方法,可以直接使用,他说请详细的说明一下,我说写一个for循环,循环的次数是List的长度,然后在循环里面直接删除掉想要删除的元素就可以了. 当时还想,这么简单的问题也问,面试官说,你回去自己试试就知道了,你看按照你说的那样写会不会报错.然后我就懵了,虽然这是个简单的问题但是日常的编码中,我还真没有注

  • 详解JavaScript节流函数中的Throttle

    详解JavaScript节流函数中的Throttle

    首先我们来了解下什么是Throttle 1. 定义 如果将水龙头拧紧直到水是以水滴的形式流出,那你会发现每隔一段时间,就会有一滴水流出. 也就是会说预先设定一个执行周期,当调用动作的时刻大于等于执行周期则执行该动作,然后进入下一个新周期. 接口定义: * 频率控制 返回函数连续调用时,action 执行频率限定为 次 / delay * @param delay {number} 延迟时间,单位毫秒 * @param action {function} 请求关联函数,实际应用需要调用的函数 *

  • 详解iOS App开发中Cookie的管理方法

    一.何为Cookie Cookie是网站为了便是终端身份,保存在终端本地的用户凭证信息.Cookie中的字段与意义由服务端进行定义.例如,当用户在某个网站进行了登录操作后,服务端会将Cookie信息返回给终端,终端会将这些信息进行保存,在下一次再次访问这个网站时,终端会将保存的Cookie信息一并发送到服务端,服务端根据Cookie信息是否有效来判断此用户是否可以自动登录. 二.iOS中进行Cookie管理的两个类 iOS中进行HTTP网络请求Cookie管理主要由两个类负责,一个类是NSHTT

  • 详解在SpringBoot应用中获取应用上下文方法

    1.定义上下文工具类: package com.alimama.config; import org.springframework.context.ApplicationContext; /** * 上下文获取工具类 * @author mengfeiyang * */ public class SpringContextUtil { private static ApplicationContext applicationContext; public static void setAppl

  • 详解Android Material设计中阴影效果的实现方法

    详解Android Material设计中阴影效果的实现方法

    View可以投下的阴影,一个View的elevation值决定了它的阴影的大小和绘制的顺序.可以设置一个视图的elevation,在布局中使用属性:android:elevation <TextView android:id="@+id/my_textview" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text=&quo

  • 详解iOS App开发中UIViewController的loadView方法使用

    当你访问一个ViewController的view属性时,如果此时view的值是nil,那么,ViewController就会自动调用loadView这个方法.这个方法就会加载或者创建一个view对象,赋值给view属性. loadView默认做的事情是:如果此ViewController存在一个对应的nib文件,那么就加载这个nib.否则,就创建一个UIView对象. 如果你用Interface Builder来创建界面,那么不应该重载这个方法. 控制器的loadView方法以及view属性

  • 详解JavaScript中的链式调用

    链模式 链模式是一种链式调用的方式,准确来说不属于通常定义的设计模式范畴,但链式调用是一种非常有用的代码构建技巧. 描述 链式调用在JavaScript语言中很常见,如jQuery.Promise等,都是使用的链式调用,当我们在调用同一对象多次其属性或方法的时候,我们需要多次书写对象进行.或()操作,链式调用是一种简化此过程的一种编码方式,使代码简洁.易读. 链式调用通常有以下几种实现方式,但是本质上相似,都是通过返回对象供之后进行调用. this的作用域链,jQuery的实现方式,通常链式调用

随机推荐