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

JavaScript设计模式 -- 适配器模式

article 2025/2/13 19:18:20

在软件开发中，经常会遇到这样的情况：现有的类或第三方库提供的接口与系统中期望的接口不匹配。如果直接修改已有代码风险较大或者不可行，这时适配器模式（Adapter Pattern）就能派上用场。适配器模式通过创建一个包装类，将原有接口转换为客户所期望的接口，从而使原本不兼容的类能够协同工作。

本文将从基本概念入手，详细介绍适配器模式的实现方式及其在多个场景下的应用示例，并探讨其优缺点和使用建议。

适配器模式简介

适配器模式是一种结构型设计模式，它的核心思想是通过一个中间层（适配器）将一个类的接口转换成客户期望的另一个接口，从而让原本接口不匹配的类能够一起工作。常见的应用场景包括：

集成遗留系统：对接老系统时，接口可能与新系统不兼容；
第三方库封装：使用外部库，但接口与项目需求不匹配；
数据转换：不同数据格式之间的转换处理。

适配器模式既可以通过对象适配器（基于组合）实现，也可以通过类适配器（基于继承，多用于支持多重继承的语言）实现。由于 JavaScript 不支持多重继承，所以一般采用对象适配器的方式。

适配器模式的分类

对象适配器
通过在适配器中组合（引用）需要适配的对象，并在适配器内部调用其方法来完成转换。
类适配器
利用继承实现适配器，将目标接口与适配者接口组合在一起。
（在 JavaScript 中，由于语言特性，通常采用对象适配器模式。）

适配器模式的实现示例

下面我们通过三个示例展示如何在不同场景下使用适配器模式解决接口不兼容问题。

示例 1：电源适配器

假设我们有一个旧设备只提供 connect() 方法，而新的电器要求使用 plugIn() 接口。我们可以使用适配器将旧设备的方法转换为新设备所期望的接口。

// 旧设备，只有 connect 方法
class OldDevice {
  connect() {
    console.log('旧设备已连接电源');
  }
}

// 新设备接口期望 plugIn 方法
class NewDevice {
  plugIn() {
    console.log('新设备已插入电源');
  }
}

// 适配器：将旧设备适配为新设备
class PowerAdapter {
  constructor(oldDevice) {
    this.oldDevice = oldDevice;
  }
  
  // 新设备所需的 plugIn 方法内部调用旧设备的 connect 方法
  plugIn() {
    this.oldDevice.connect();
  }
}

// 客户端调用
const legacyDevice = new OldDevice();
const adapter = new PowerAdapter(legacyDevice);

// 通过适配器使用旧设备
adapter.plugIn(); // 输出：旧设备已连接电源

在这个示例中，PowerAdapter 对象封装了旧设备的实例，并提供了客户期望的 plugIn() 方法，从而使不兼容的接口协同工作。

示例 2：数据格式适配器

在实际项目中，我们可能需要处理来自不同数据源的格式。例如，一个接口返回的用户数据格式与系统所需的格式不一致。我们可以使用适配器将旧数据格式转换成目标格式。

// 旧接口返回的数据格式
class OldUserAPI {
  getUser() {
    return {
      firstName: 'Jane',
      lastName: 'Doe'
    };
  }
}

// 适配器：将旧数据格式转换为目标格式
class UserAdapter {
  constructor(oldApi) {
    this.oldApi = oldApi;
  }
  
  // 目标接口返回全名字符串
  getUserFullName() {
    const user = this.oldApi.getUser();
    return `${user.lastName}, ${user.firstName}`;
  }
}

// 客户端调用
const oldUserApi = new OldUserAPI();
const userAdapter = new UserAdapter(oldUserApi);
console.log(userAdapter.getUserFullName()); // 输出：Doe, Jane

这里的 UserAdapter 将旧接口返回的对象转换为一个包含全名字符串的新格式，满足了系统的需求。

示例 3：第三方库接口适配

有时我们需要使用第三方库，但其回调式接口与我们项目中使用的 Promise 风格不匹配。可以通过适配器将回调式接口转换为 Promise 接口。

// 第三方库，采用回调方式获取数据
class ThirdPartyService {
  fetchData(callback) {
    setTimeout(() => {
      callback('数据来自第三方服务');
    }, 1000);
  }
}

// 适配器：将回调式接口转换为 Promise 接口
class ServiceAdapter {
  constructor(service) {
    this.service = service;
  }
  
  fetchData() {
    return new Promise((resolve) => {
      this.service.fetchData((data) => {
        resolve(data);
      });
    });
  }
}

// 客户端调用
const thirdPartyService = new ThirdPartyService();
const adapterService = new ServiceAdapter(thirdPartyService);

adapterService.fetchData().then(data => {
  console.log(data); // 输出：数据来自第三方服务
});

在这个例子中，ServiceAdapter 封装了第三方服务，并将其回调式的 fetchData 方法转换为返回 Promise 的方法，从而方便与现代异步处理方式（如 async/await）配合使用。