持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第3天，点击查看活动详情
关键词：结构型 适配器模式 adapter 事后设计
解决什么问题？
适配器模式是一种结构型设计模式。
使用目的是解决两个组件间的接口不兼容的问题。通常在已有程序中使用， 让相互不兼容的类能很好地合作。 其实是用来弥补系统设计缺陷的一种设计。(亡羊补牢
典型的应用场景是：后端返回的数据结构和表单组件需要的数据结构不一致。
遇到这种情况，我们有两种处理方法：
- 找后端修改返回字段和结构
- 获取数据之后前端做一层适配，自行处理。
如果结论是后者，这时候我们就可以使用双向适配器来兼容两者。
如何实现
/** * 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);
与其他设计模式的区别
| 代理模式 | 桥接模式 | 装饰器模式 | 适配器模式 |
| 事后设计 | 事前设计 | 事后设计 | 事后设计 |
| 不改变原始类接口，提供跟原始类相同的接口 | 写代码之前就要把接口部分和实现部分分离，从而让它们可以较为容易、也相对独立地加以改变。 | 不改变原始类接口，提供跟原始类相同的接口， | 提供跟原始类不同的接口。 |
| 为原始类定义一个代理类，主要目的是控制访问，而非加强功能。 | 加强原始类功能，支持多个装饰器的嵌套使用。 |
