适配器设计模式在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. 日志记录器适配:在浏览器中,不同的日志记录库可能有不同的接口。适配器模式可以用于将这些不同的日志记录库统一为相同的接口,以方便代码中的日志记录。
相关推荐
发现一只大呆瓜21 分钟前
AI流式交互:SSE与WebSocket技术选型
前端·javascript·面试
m0_719084111 小时前
React笔记张天禹
前端·笔记·react.js
Ziky学习记录1 小时前
从零到实战:React Router 学习与总结
前端·学习·react.js
wuhen_n2 小时前
JavaScript链表与双向链表实现:理解数组与链表的差异
前端·javascript
wuhen_n2 小时前
JavaScript数据结构深度解析:栈、队列与树的实现与应用
前端·javascript
我是一只puppy2 小时前
使用AI进行代码审查
javascript·人工智能·git·安全·源代码管理
颜酱2 小时前
从二叉树到衍生结构:5种高频树结构原理+解析
javascript·后端·算法
狗哥哥2 小时前
微前端路由设计方案 & 子应用管理保活
前端·架构
前端大卫3 小时前
Vue3 + Element-Plus 自定义虚拟表格滚动实现方案【附源码】
前端
却尘3 小时前
Next.js 请求最佳实践 - vercel 2026一月发布指南
前端·react.js·next.js