当前位置：首页 > news >正文

【前端设计模式】之适配器模式

news 2025/7/22 12:24:36

适配器模式是一种常见的设计模式，用于将一个类的接口转换成客户端所期望的另一个接口。在前端开发中，适配器模式可以帮助我们解决不同框架或库之间的兼容性问题，提高代码的复用性和可维护性。

适配器模式特性

适配器类：适配器类是实现目标接口并包含对被适配对象的引用。它将客户端请求转发给被适配对象，并进行必要的转换。
目标接口：目标接口是客户端所期望使用的接口。适配器类通过实现目标接口来与客户端进行交互。
被适配对象：被适配对象是需要被转换成目标接口的类或对象。它可能是一个已有的类、第三方库或其他框架。

应用示例

1. 数据格式转换

// 目标接口
class Target {request() {throw new Error('This method should be overridden!');}
}// 被适配对象
class Adaptee {specificRequest() {return 'Specific request';}
}// 适配器类
class Adapter extends Target {constructor(adaptee) {super();this.adaptee = adaptee;}request() {const specificRequest = this.adaptee.specificRequest();// 对数据进行格式转换return specificRequest.toUpperCase();}
}// 使用适配器
const adaptee = new Adaptee();
const adapter = new Adapter(adaptee);
console.log(adapter.request()); // 输出：SPECIFIC REQUEST

目标接口（Target） ：定义了一个名为request的方法，但这个方法没有具体实现，只是一个抛出错误的抽象方法。
被适配对象（Adaptee） ：这个类有一个名为specificRequest的特定方法，这个方法实现了具体的功能。
适配器类（Adapter） ：这个类继承了目标接口，因此它实现了和目标接口一致的request方法。然后在request方法中，适配器调用了被适配对象的specificRequest方法，并对其返回的数据进行了格式转换（转换为大写）。在适配器模式中，适配器是一个新的类，它将被适配对象和目标接口连接起来，使得目标接口可以像调用被适配对象的specificRequest方法一样调用request方法。
使用适配器：创建了一个被适配对象和一个适配器，然后将被适配对象传递给适配器。当调用适配器的request方法时，适配器内部调用了被适配对象的specificRequest方法并进行了格式转换，最后输出结果为"SPECIFIC REQUEST"。

2. 浏览器兼容性处理

// 请求接口
class Request {send() {throw new Error("This method should be overridden!");}
}// 现代浏览器请求类
class FetchRequest extends Request {send() {return fetch("/api/data").then((response) => response.json());}
}// 旧版浏览器请求类
class XHRRequest extends Request {send() {return new Promise((resolve, reject) => {const xhr = new XMLHttpRequest();xhr.open("GET", "/api/data");xhr.onload = () => resolve(JSON.parse(xhr.responseText));xhr.onerror = () => reject(xhr.statusText);xhr.send();});}
}// 适配器类
class Adapter extends Request {constructor() {super();this.request = null;if (typeof window.fetch === "function") {this.request = new FetchRequest();} else {this.request = new XHRRequest();}}send() {return this.request.send();}
}// 使用适配器发送请求
const adapter = new Adapter();
adapter.send().then((data) => console.log(data));