JavaScript设计模式之适配器模式

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/yexudengzhidao/article/details/89880797

介绍：

• 旧接口格式和使用者不兼容
• 中间加一个适配转换接口
• 将旧接口与使用者进行分离

示例：

香港的插头和大陆的插头是不一样的，你在香港拿着大陆的充电器是充不了电的，所以你需要用一个转换器来做适配。

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，但是我现在想将里面的字符串反转，所以用了另一个接口。