介绍:
- 旧接口格式和使用者不兼容
- 中间加一个适配转换接口
- 将旧接口与使用者进行分离
示例:
香港的插头和大陆的插头是不一样的,你在香港拿着大陆的充电器是充不了电的,所以你需要用一个转换器来做适配。
UML类图描述适配器模式
- Adaptee是老的接口
- Target是适配器
- Client是客户端
代码实现:
// 适配器模式
class Adaptee {
specificRequest () {
console.log('德国标准插头')
}
}
class Target {
constructor () {
this.adaptee = new Adaptee()
}
request () {
let info = this.adaptee.specificRequest()
return `${info}->适配器->中国标准插头`
}
}
// 测试
let target = new Target()
console.log(target.request())
应用场景
- 封装旧接口
假如我们在我们之前的项目中大量用到了jQuery的$.ajax()方法,现在项目需要迁移到Vue中,所以我们需要自己封装ajax方法,但是之前的$.ajax()最好不要一一替换修改,因为会带来很多bug,所以我们需要通过适配器的模式来解决这种问题,即自己封装一个$接口,使用这个新的接口即可。
也就是我之前的接口是$.ajax,现在我的ajax请求自己封装了一下,不用jQuery了,但是还得用$.ajax()这种接口形式,所以我在中间加了一层适配器来解决。
- Vue computed
Vue里的computed其实也用到了适配器的思想,我原始的接口是message,但是我现在想将里面的字符串反转,所以用了另一个接口。