JavaScript内核与高级编程之：`JavaScript`的`Adapter`模式：其在 `API` 兼容性中的应用。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位观众老爷，大家好！我是今天的讲师，咱们今天聊聊JavaScript里一个挺有意思的设计模式：适配器模式(Adapter Pattern)。这玩意儿听着高大上，其实贼实用，尤其是在处理那些“你瞅我不顺眼，我瞅你别扭”的API兼容性问题的时候，简直是神器。

一、啥是适配器模式？（别说你懂，再复习一遍！）

想象一下，你家里有个美标插座，但是你买了个国标的电器。直接插肯定不行，咋办？找个转换插头呗！这个转换插头，就是我们今天要说的“适配器”。

在编程世界里，适配器模式允许将一个类的接口转换成客户希望的另外一个接口。适配器模式使得原本由于接口不兼容而不能一起工作的那些类可以一起工作。简单来说，就是把一个东西“翻译”成另一个东西，让它们能互相理解。

适配器模式主要包含以下角色：

目标接口 (Target Interface): 这是客户期望看到的接口。客户端通过这个接口来使用服务。就像你家墙上的插座，你希望插头能直接插上去。
适配器 (Adapter): 这是一个类，它实现了目标接口，并且持有对被适配者对象的引用。它负责将客户的请求“翻译”成被适配者可以理解的请求。就像转换插头，它既能插入美标插座，又能让国标电器插头插进去。
被适配者 (Adaptee): 这是需要适配的现有类。它的接口不符合客户的期望，所以需要适配器来进行转换。就像你的国标电器插头，它没法直接插到美标插座上。
客户端 (Client): 这是使用目标接口的代码。就像你，想用国标电器。

二、为什么要用适配器模式？(不解决问题，要你何用？)

兼容性问题： 最常见的原因。当你想使用一个库或者服务，但是它的接口和你的代码不兼容的时候，适配器可以帮你解决这个问题。
代码复用： 可以复用现有的类，而不需要修改它们的代码。这遵循了“开闭原则”，即对扩展开放，对修改关闭。
解耦： 降低了客户端和被适配者之间的耦合度。客户端只需要知道目标接口，而不需要知道被适配者的具体实现。

三、适配器模式的几种实现方式

适配器模式主要有两种实现方式：

类适配器 (Class Adapter): 通过继承被适配者类来实现适配。（不推荐，JS不擅长）
- 优点： 实现简单。
- 缺点： 只能适配一个类。在某些语言中（比如Java）存在单继承的限制，会导致适配器无法继承其他类。在JavaScript中，虽然没有严格的单继承限制，但通过extends实现继承的方式，在灵活性上不如对象适配器。
对象适配器 (Object Adapter): 通过组合被适配者对象来实现适配。（推荐，JS更灵活）
- 优点： 可以适配多个类。更加灵活，可以动态地改变被适配者对象。
- 缺点： 实现相对复杂一些。

由于JavaScript的灵活性，以及原型链的特性，对象适配器更适合在JavaScript中使用。咱们重点讲对象适配器。

四、JavaScript中的对象适配器：实战演练

咱们来模拟一个场景：

假设我们有一个旧的API，它返回的数据格式是这样的：

// 旧的API
const oldAPI = {
  getUserInfo: function(id) {
    if (id === 1) {
      return {
        userName: "张三",
        age: 30,
        address: "北京市"
      };
    } else {
      return null;
    }
  }
};

现在，我们需要将这个API集成到我们的新系统里。但是，我们新系统期望的数据格式是这样的：

// 新系统期望的数据格式
{
  name: "张三",
  age: 30,
  location: "北京市"
}

这俩玩意儿格式不一样啊，咋办？适配器登场！

// 适配器
class UserInfoAdapter {
  constructor(oldAPI) {
    this.oldAPI = oldAPI; // 持有旧API的引用
  }

  getUser(id) {
    const userInfo = this.oldAPI.getUserInfo(id);
    if (userInfo) {
      return {
        name: userInfo.userName,
        age: userInfo.age,
        location: userInfo.address
      };
    } else {
      return null;
    }
  }
}

// 客户端代码
const adapter = new UserInfoAdapter(oldAPI);
const user = adapter.getUser(1);
console.log(user); // 输出: { name: "张三", age: 30, location: "北京市" }

在这个例子中，UserInfoAdapter 就是我们的适配器。它接收 oldAPI 作为参数，并将其 getUserInfo 方法返回的数据转换成新系统期望的格式。客户端只需要调用 adapter.getUser(id) 就可以获取到符合新系统要求的数据了。

代码解释：

UserInfoAdapter 类接收 oldAPI 对象作为构造函数的参数，并将其保存在 this.oldAPI 属性中。
getUser 方法是适配器的核心。它调用 this.oldAPI.getUserInfo(id) 获取旧API返回的数据。
如果旧API返回了有效的数据，getUser 方法将其转换成新系统期望的格式，并返回。
如果旧API返回了 null，getUser 方法也返回 null。

五、更复杂的例子：适配多个API

有时候，我们需要适配多个API，才能满足需求。比如，我们现在有两个旧的API：

// 旧API 1
const oldAPI1 = {
  getUserName: function(id) {
    if (id === 1) {
      return "张三";
    } else {
      return null;
    }
  }
};

// 旧API 2
const oldAPI2 = {
  getUserAddress: function(id) {
    if (id === 1) {
      return "北京市";
    } else {
      return null;
    }
  }
};

新系统仍然期望的数据格式是：

// 新系统期望的数据格式
{
  name: "张三",
  age: 30, // 假设我们没有年龄信息，可以提供默认值
  location: "北京市"
}

这时候，适配器需要同时调用这两个API，并将它们的数据组合成新系统期望的格式：

// 适配器
class UserInfoAdapter {
  constructor(oldAPI1, oldAPI2) {
    this.oldAPI1 = oldAPI1;
    this.oldAPI2 = oldAPI2;
  }

  getUser(id) {
    const name = this.oldAPI1.getUserName(id);
    const location = this.oldAPI2.getUserAddress(id);

    if (name && location) {
      return {
        name: name,
        age: 30, // 提供默认值
        location: location
      };
    } else {
      return null;
    }
  }
}

// 客户端代码
const adapter = new UserInfoAdapter(oldAPI1, oldAPI2);
const user = adapter.getUser(1);
console.log(user); // 输出: { name: "张三", age: 30, location: "北京市" }

六、适配器模式的优点和缺点

优点：

提高代码复用性： 可以复用现有的类，而不需要修改它们的代码。
提高灵活性： 可以适配不同的接口，满足不同的需求。
降低耦合度： 客户端只需要知道目标接口，而不需要知道被适配者的具体实现。
遵循开闭原则： 对扩展开放，对修改关闭。

缺点：

增加代码复杂性： 需要编写额外的适配器类。
可能导致性能下降： 适配器需要进行额外的转换工作，可能会导致性能下降（通常可以忽略不计）。

七、适配器模式的适用场景

当你想使用一个已经存在的类，但是它的接口不符合你的需求时。
当你需要创建一个可复用的类，它可以与其他不相关的类协同工作时。
当你需要使用多个现有的类，但是它们的接口不一致时。
当你需要将旧的系统集成到新的系统中，而旧系统的接口需要进行转换时。

八、JavaScript中适配器模式的替代方案：策略模式

在某些情况下，策略模式也可以用来解决类似的问题。策略模式允许你定义一组算法，并将每个算法封装在一个类中。客户端可以选择使用哪个算法。

策略模式和适配器模式的区别在于：

适配器模式： 主要用于解决接口不兼容的问题。
策略模式： 主要用于选择不同的算法。

虽然策略模式也可以用来解决接口不兼容的问题，但它通常更适合于需要动态选择算法的场景。

九、总结：适配器模式是你的好帮手！

适配器模式是一个非常有用的设计模式，可以帮助我们解决各种各样的接口兼容性问题。在JavaScript开发中，我们可以使用对象适配器来实现适配器模式。对象适配器更加灵活，可以适配多个类，也更符合JavaScript的编程风格。

记住，设计模式不是银弹。不要为了使用设计模式而使用设计模式。只有在真正需要解决问题的时候，才应该考虑使用设计模式。

十、彩蛋：适配器模式在开源库中的应用

许多开源库都使用了适配器模式，来提供对不同环境的支持。比如，一些UI库会使用适配器模式来兼容不同的浏览器。

十一、最后：留下思考题

假设你正在开发一个支付系统，需要支持支付宝和微信支付。但是，支付宝和微信支付的API接口不一样。请你使用适配器模式来解决这个问题。

今天的讲座就到这里，希望大家有所收获！有问题可以提问，只要我能回答，绝不藏私。散会！

发表回复 取消回复

发表回复取消回复