关于适配器模式我所知道的

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第3天，点击查看活动详情

关键词：结构型 适配器模式 adapter 事后设计

解决什么问题？

适配器模式是一种结构型设计模式。

使用目的是解决两个组件间的接口不兼容的问题。通常在已有程序中使用， 让相互不兼容的类能很好地合作。 其实是用来弥补系统设计缺陷的一种设计。(亡羊补牢

典型的应用场景是：后端返回的数据结构和表单组件需要的数据结构不一致。

遇到这种情况，我们有两种处理方法：

1. 找后端修改返回字段和结构
2. 获取数据之后前端做一层适配，自行处理。

如果结论是后者，这时候我们就可以使用双向适配器来兼容两者。

如何实现

/**
 * Adaptee => Target 报错
 * Adaptee => Adapter => Target 成功
 */
class Target {
  public request(): string {
    return '目标行为';
  }
}

class Adaptee {
  public specificRequest(): string {
    return '为行殊特eetpadA';
  }
}

class Adapter extends Target {
  private adaptee: Adaptee;

  constructor(adaptee: Adaptee) {
    super();
    this.adaptee = adaptee;
  }

  public request(): string {
    const result = this.adaptee.specificRequest().split('').reverse().join('');
    return `适配器转换${result}`;
  }
}

测试代码

function clientCode(target: Target) {
  console.log(target.request());
}

// 直接执行 target
const target = new Target();
clientCode(target);

// 直接执行 adaptee
const adaptee = new Adaptee();
console.log(`Adaptee: ${adaptee.specificRequest()}`);

//通过是配置执行 adaptee
const adapter = new Adapter(adaptee);
clientCode(adapter);

与其他设计模式的区别

代理模式	桥接模式	装饰器模式	适配器模式
事后设计	事前设计	事后设计	事后设计
不改变原始类接口，提供跟原始类相同的接口	写代码之前就要把接口部分和实现部分分离，从而让它们可以较为容易、也相对独立地加以改变。	不改变原始类接口，提供跟原始类相同的接口，	提供跟原始类不同的接口。
为原始类定义一个代理类，主要目的是控制访问，而非加强功能。		加强原始类功能，支持多个装饰器的嵌套使用。