适配器模式是一种结构型设计模式，它允许接口不兼容的对象能够协同工作。这个模式通常用于实现现有类的接口与其它类的接口之间的转换，以便它们可以一起工作，而不必修改它们的源代码。

在程序开发中有许多这样的场景：当我们试图调用模块或者对象某个接口实现时，却发现这个接口的格式并不符合目前的需求，这时候有两种解决办法，第一种是修改原来的接口实现，但如果原来的模块很复杂，或者我们拿到的模块是一段别人编写的经过压缩的代码，修改原接口就显得不太现实了。第二种办法是创建一个适配器，将接口转换为客户希望的另一个接口，客户只需要和适配器打交道。

适配器模式涉及到三个角色：

目标（Target）：定义客户期望使用的特定领域的接口。
被适配者（Adaptee）：一个已经存在的接口，这个接口需要适配。
适配器（Adapter）：对 Adaptee 的接口与 Target 接口进行适配的类。

适配器模式在生活中的例子

适配器模式在日常生活中的一个常见例子是电源插头适配器。不同国家有不同的电源插座标准，当你旅行到一个新的国家时，你可能会发现你的电子设备插头与当地的插座不兼容。在这种情况下，你需要一个电源适配器，它在一端与你的设备插头相匹配，而另一端则适应当地的插座，从而允许你的设备在不同的电源系统中工作，而无需更改设备本身。

另一个例子是音频转换器，比如说你有一对老式的耳机，它使用的是标准的 3.5 毫米音频插头，但是你的智能手机可能只有一个 USB-C 端口。在这种情况下，你会使用一个音频适配器，它将 3.5 毫米插头转换为 USB-C 连接器，这样你就可以使用你的耳机听音乐了。

这些例子展示了适配器模式如何解决现实世界中的接口不兼容问题，通过一个中间件来桥接差异，从而使得原本不兼容的设备或组件能够一起工作。

适配器模式在 Js 中的应用

假设我们有一个老旧的 API，它返回用户数据，但返回的是 XML 格式。现在我们有一个新的 API，它提供相同的数据，但是返回的是 JSON 格式。我们的代码库大量使用了老 API，因此重构所有代码以适配新 API 将是一项巨大的工作。相反，我们可以创建一个适配器来适配老 API 的调用到新 API。

js 复制代码

// 老的XML API
function getXMLData() {
  // 模拟从老API获取XML数据
  const xmlData =
    "<user><name>John Doe</name><email>johndoe@example.com</email></user>";
  return xmlData;
}

// 新的JSON API
function getJSONData() {
  // 模拟从新API获取JSON数据
  const jsonData = {
    user: {
      name: "John Doe",
      email: "johndoe@example.com",
    },
  };
  return JSON.stringify(jsonData);
}

// XML到JSON的转换器
function xmlToJson(xml) {
  const parser = new DOMParser();
  const xmlDoc = parser.parseFromString(xml, "text/xml");
  const user = xmlDoc.getElementsByTagName("user")[0];
  const name = user.getElementsByTagName("name")[0].textContent;
  const email = user.getElementsByTagName("email")[0].textContent;

  return JSON.stringify({ user: { name, email } });
}

// 适配器
function UserDataAdapter() {
  // 假设我们决定改用新的JSON API
  // 但我们的适配器依然提供了老API的接口
  const jsonData = getJSONData();

  // 在真实的场景中，你可能需要执行更多的逻辑来确保新旧API接口的兼容性
  return jsonData; // 直接返回新API的数据
}

// 系统中其他地方的代码仍然调用 getXMLData()，
// 但实际上它现在是一个适配器，调用的是新API。
const userData = UserDataAdapter();
console.log(userData); // 输出: {"user":{"name":"John Doe","email":"johndoe@example.com"}}

在这个示例中，UserDataAdapter 函数充当适配器。虽然我们决定使用返回 JSON 的新 API，但我们通过适配器提供了与旧 API 相同的接口。如果新旧 API 之间有显著的数据格式差异，适配器将负责转换数据格式，以确保与旧接口的兼容性。这个适配器模式允许我们逐步迁移代码以使用新 API，而无需立即重构整个应用程序。

适配器模式在 React 中的应用

在 React 中，适配器模式通常被用来整合不兼容的接口，特别是在集成第三方库或旧系统代码到 React 应用程序时。举个例子，假设你正在使用一个第三方库，这个库提供了一套 API 来处理日期，但这套 API 并不是基于 Promise 的，而是使用回调函数。React 的组件和 Hooks 通常更适合处理返回 Promise 的异步操作，因此你可以创建一个适配器来将这些 API 转换成返回 Promise 的版本，从而使其更容易在 React 中使用。

情况下面的例子，演示如何将一个旧的回调风格的 API 适配成 Promise 风格，以便它可以在 React 组件中更方便地使用：

jsx 复制代码

// 假设这是一个第三方库提供的旧式API，使用回调而不是Promise
function getDateStringOldStyle(callback) {
  setTimeout(() => {
    const dateStr = new Date().toString();
    callback(dateStr);
  }, 1000);
}

// 适配器，将旧的回调风格API转换为返回Promise的函数
function getDateString() {
  return new Promise((resolve, reject) => {
    getDateStringOldStyle((dateStr) => {
      resolve(dateStr);
    });
  });
}

// React组件中使用适配后的函数
function DateComponent() {
  const [dateString, setDateString] = React.useState("Loading date...");

  React.useEffect(() => {
    getDateString().then((dateStr) => {
      setDateString(dateStr);
    });
  }, []);

  return <div>Current Date and Time: {dateString}</div>;
}

在这个例子中：

getDateStringOldStyle 是一个第三方库提供的旧式 API，它使用回调函数来返回数据。
getDateString 是一个适配器函数，它包装了旧式 API 并提供了一个返回 Promise 的新接口。
DateComponent 是一个 React 组件，它使用适配后的函数来获取日期字符串，并在状态更新时重新渲染。

适配器模式在这里使得 React 组件可以更加自然地集成异步数据获取逻辑，同时保持了组件内部状态处理的一致性和简洁性。这样的适配器使得老旧的 API 能够在现代的 React 应用中被复用，而不需要对现有的第三方库进行大规模的重构。

总结

适配器模式是一种设计模式，它允许不兼容的接口通过一个中介类相互协作。这种模式通过将一个类的接口转换为另一个接口，解决了接口不匹配问题，从而使原本无法一起工作的类可以一起工作。它的主要优势在于提升了现有类的复用性，允许它们在不修改源代码的情况下与其他接口一起使用。适配器模式还增加了代码的灵活性和透明度，因为客户端代码不需要关心实现细节。

尽管如此，适配器模式也可能增加系统的整体复杂性，尤其是当需要多个适配器时。过度依赖适配器可能会导致系统结构松散和非统一。

在 JavaScript 和 React 的环境中，适配器模式常用于使旧代码适用于新的环境，如处理浏览器差异、整合第三方库或将旧式的回调 API 转换为 Promise。这样做不仅提高了现有代码的复用率，也使得新旧系统能够平滑过渡，提高了开发效率。

适配器模式在React中的应用

适配器模式在生活中的例子

适配器模式在 Js 中的应用

适配器模式在 React 中的应用

总结