适配器设计模式在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. 日志记录器适配:在浏览器中,不同的日志记录库可能有不同的接口。适配器模式可以用于将这些不同的日志记录库统一为相同的接口,以方便代码中的日志记录。
相关推荐
万物得其道者成3 分钟前
React Zustand状态管理库的使用
开发语言·javascript·ecmascript
小白小白从不日白4 分钟前
react hooks--useReducer
前端·javascript·react.js
下雪天的夏风16 分钟前
TS - tsconfig.json 和 tsconfig.node.json 的关系,如何在TS 中使用 JS 不报错
前端·javascript·typescript
丶白泽19 分钟前
重修设计模式-设计原则
设计模式·接口隔离原则·依赖倒置原则·开闭原则
【D'accumulation】22 分钟前
典型的MVC设计模式:使用JSP和JavaBean相结合的方式来动态生成网页内容典型的MVC设计模式
java·设计模式·mvc
diygwcom28 分钟前
electron-updater实现electron全量版本更新
前端·javascript·electron
volodyan31 分钟前
electron react离线使用monaco-editor
javascript·react.js·electron
^^为欢几何^^40 分钟前
lodash中_.difference如何过滤数组
javascript·数据结构·算法
Hello-Mr.Wang1 小时前
vue3中开发引导页的方法
开发语言·前端·javascript
程序员凡尘1 小时前
完美解决 Array 方法 (map/filter/reduce) 不按预期工作 的正确解决方法,亲测有效!!!
前端·javascript·vue.js