您现在的位置是：首页 >技术交流 >前端常用设计模式学习之适配器模式-1分钟快速理解-适配器模式是一种结构性设计模式，它允许将不兼容的对象包装成一个兼容的接口，从而使它们能够在一起工作。网站首页技术交流

前端常用设计模式学习之适配器模式

适配器模式是一种结构性设计模式，它允许将不兼容的对象包装成一个兼容的接口，从而使它们能够在一起工作。

在前端开发中，适配器模式常常用于将旧版代码与新版代码兼容。例如，我们在使用新版 API 时，需要兼容旧版 API
的情况下，就可以使用适配器模式。

以下是一个典型的适配器模式结构：

适配器模式由三部分组成：

1.目标接口（Target）：定义客户端所需的规范。

2.源（Adaptee）：具有不兼容接口的对象。

3.适配器（Adapter）：将 Adaptee 的接口转换成 Target 的接口。

下面是一个示例代码，假设我们有一个旧版的 api，它的接口是不兼容的。

// old API
class LegacyApi {
  getData() {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve({ data: 'Hello, legacy API!' })
      }, 1000)
    })
  }
}

我们可以编写一个适配器来实现一个兼容新版 API 的接口，如下所示：

// adapter for LegacyApi
class NewApiAdapter {
  constructor() {
    this.legacyApi = new LegacyApi()
  }

  async fetchData() {
    const { data } = await this.legacyApi.getData()
    return { result: data }
  }
}

// new API
class NewApi {
  constructor() {
    this.adapter = new NewApiAdapter()
  }

  async fetchData() {
    return this.adapter.fetchData()
  }
}

总结：

现在，我们就可以通过新版 API 访问旧版 API 的接口了，而不需要直接使用旧版 API。这就是适配器模式的威力所在 —— 它允许我们在新代码与旧代码之间建立一个桥梁，从而使应用程序更加灵活和可维护。