JavaScript设计模式：适配器模式

模式概念

适配器模式（Adapter Pattern） 是一种结构设计模式，用于解决在软件系统中不同模块之间的接口不兼容问题。通过创建一个中间层（适配器），使得原本由于接口不兼容而不能一起工作的类可以协同工作。

这种模式涉及到一个单一的角色，称为适配器，它与期望的类一起工作，同时与另一个具有不兼容接口的类一起工作。这里的接口是一个广义的接口，可以表示一个方法或者方法的集合。

模式结构

• Target（目标接口） ：客户所期待的接口。
• Adaptee（被适配者） ：一个已经存在的类，需要适配。
• Adapter（适配器） ：通过在内部包装一个Adaptee对象，把源接口转换成目标接口。

代码实现

// 目标接口
class Target {
  request() {
    throw new Error("request method must be implemented");
  }
}
​
// 被适配者
class Adaptee {
  specificRequest() {
    console.log("Adaptee specific request");
  }
}
​
// 适配器
class Adapter extends Target {
  constructor(adaptee) {
    super();
    this.adaptee = adaptee;
  }
​
  request() {
    this.adaptee.specificRequest();
  }
}
​
// 使用示例
const adaptee = new Adaptee();
const adapter = new Adapter(adaptee);
adapter.request(); // 输出: Adaptee specific request
​

• 通过适配器模式，Adaptee 类（具有不兼容接口的类）能够通过 Adapter 类与 Target 接口进行适配。

模式效果

模式优点：

• 兼容性：适配器模式使得不兼容的接口能够一起工作。
• 灵活性：在系统中加入新的适配器比修改已有代码更加容易，实现了目标类和适配者类的解耦。
• 复用性：提高了适配者的复用性，同一个适配者类可以在多个不同的系统中复用。

模式缺点：

• 增加系统的复杂性：使用适配器模式可能会使系统更加复杂，因为需要额外的适配器类。

应用场景

• 如果系统需要使用一些现有的类，而这些类的接口不符合系统的需要，甚至没有这些类的源码。
• 创建一个可以重复使用的类，用于和一些彼此之间没有太大关联的类。

模式应用

axios

Axios 是一个非常流行的基于 promise 的 HTTP 客户端，最初是为浏览器环境设计的，因此它从一开始只是在 web 端使用。随着时间的推移，Axios 也被扩展和适配到 Node.js 环境中，使其能够在服务器端同样发挥作用。

Axios在不同环境中使用不同的请求发送机制，体现了适配器模式的思想。

• 浏览器端：Axios 使用 XMLHttpRequest 接口发送 HTTP 请求。这是一种在浏览器中广泛支持的 API，用于在浏览器中进行异步 HTTP 请求。

• 在 Node.js 端：Axios 使用 Node.js 的 http 或 https 模块来发送请求。这是 Node.js 环境中用于进行 HTTP 请求的标准库。

示例代码

axios.get('http://aaaa.com')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

Axios 提供了一个统一的 API 接口，无论在浏览器还是 Node.js 环境中，用户都可以用相同的方式发起请求。内部实现会根据运行环境选择使用 XMLHttpRequest 或 Node.js 的 http 模块，这种内部适配对用户是透明的，用户不需要关心在不同环境下如何适配 HTTP 请求，简化了用户的使用。

今天的分享就到这里，希望可以帮助到你！假如你对文章感兴趣，可以来我的公众号：小新学研社。