适配器设计模式在Js中的使用

适配器设计模式

定义

一种结构型设计模式 ,用于将一个类的接口转换成 另一个客户端所期望的接口。 它允许不兼容的接口协同工作,使得原本由于接口不匹配而无法合作的类可以一起工作。

参与者

  1. 目标(Target):定义了客户端所期望的接口,适配器将目标接口转换为适配者的接口来满足客户端需求。
  2. 适配者(Adaptee):被适配的类或接口,其接口与目标接口不匹配。
  3. 适配器(Adapter):通过实现目标接口并持有适配者的实例来完成接口转换。适配器将客户端发出的请求转发给适配者,并将适配者的响应转换为符合目标接口的形式返回给客户端。

原理

适配器设计模式的核心思想是通过一个中间层(适配器) 来连接客户端和适配者,实现接口之间的转换。 这样,客户端就可以使用适配器提供的统一接口与适配者进行交互,而不需要关心适配者的具体实现细节。

示例

typescript 复制代码
// 目标接口 
interface Target { 
  request(): void; 
} 

// 适配者类 
class Adaptee { 
  specificRequest(): void { 
    console.log("Adaptee's specific request"); 
  } 
} 

// 适配器类 
class Adapter implements Target { 
  private adaptee: Adaptee; 
  constructor(adaptee: Adaptee) { 
    this.adaptee = adaptee; 
  } 
  
  request(): void { 
    console.log("Adapter's request"); 
    this.adaptee.specificRequest(); 
  } 
} 

// 客户端代码 
const adaptee = new Adaptee(); 
const adapter = new Adapter(adaptee); 
adapter.request(); 
  1. 在上述示例中,我们有一个目标接口 Target,其中定义了客户端所期望的方法 request()
  2. 然后,创建一个适配者类 Adaptee,它具有一个不兼容的方法 specificRequest()
  3. 接下来,创建一个适配器类 Adapter,它实现了目标接口 Target
  4. 在适配器类内部,将适配者类的实例作为私有属性进行持有,并通过适配器的 request() 方法将请求转发给适配者的 specificRequest() 方法。
  5. 最后,在客户端代码中创建适配者对象和适配器对象,并调用适配器的 request() 方法来触发适配过程。
  6. 当客户端调用适配器的 request() 方法时,适配器会将请求转发给适配者的 specificRequest() 方法,并在适配过程中进行必要的转换,以满足客户端所期望的接口。

对比桥接模式

实际上如果将适配者类中的方法specificRequest改名为request(即和适配者方法同名)就变成了桥接模式。

应用场景

在软件开发中,适配器可以用于将旧的接口适配为新的接口,以便与现代化的框架或库进行兼容。

  1. 浏览器兼容性:适配器模式常被用于处理不同浏览器之间的兼容性问题。通过创建适配器来封装对特定浏览器的特殊处理,使得代码可以在不同浏览器上正常运行。
  2. AJAX 请求:在使用 AJAX 进行数据请求时,可以使用适配器模式来统一不同后端接口的调用方式。适配器可以将不同的后端 API 转换为统一的 AJAX 请求接口,以便客户端代码可以使用相同的方式进行调用。
  3. 数据转换和格式化:适配器模式可以用于对数据进行转换和格式化。例如,将一个对象的属性映射到另一个对象的属性,或者将不同数据源返回的数据进行统一的格式化处理。
  4. 第三方库集成:当需要集成第三方库时,如果其接口与现有代码不匹配,可以使用适配器模式来进行对接。适配器可将第三方库的接口转换为现有代码所期望的接口。
  5. 日志记录器适配:在浏览器中,不同的日志记录库可能有不同的接口。适配器模式可以用于将这些不同的日志记录库统一为相同的接口,以方便代码中的日志记录。
相关推荐
轻口味18 分钟前
【每日学点鸿蒙知识】AVCodec、SmartPerf工具、web组件加载、监听键盘的显示隐藏、Asset Store Kit
前端·华为·harmonyos
alikami21 分钟前
【若依】用 post 请求传 json 格式的数据下载文件
前端·javascript·json
wakangda1 小时前
React Native 集成原生Android功能
javascript·react native·react.js
吃杠碰小鸡1 小时前
lodash常用函数
前端·javascript
emoji1111111 小时前
前端对页面数据进行缓存
开发语言·前端·javascript
泰伦闲鱼1 小时前
nestjs:GET REQUEST 缓存问题
服务器·前端·缓存·node.js·nestjs
m0_748250031 小时前
Web 第一次作业 初探html 使用VSCode工具开发
前端·html
一个处女座的程序猿O(∩_∩)O1 小时前
vue3 如何使用 mounted
前端·javascript·vue.js
m0_748235951 小时前
web复习(三)
前端
User_undefined1 小时前
uniapp Native.js原生arr插件服务发送广播到uniapp页面中
android·javascript·uni-app