JavaScript设计模式-适配器模式
概念
-
适配器模式的作用是解决两个软件实体间的接口不兼容的问题。使用适配器模式之后,原本 由于接口不兼容而不能工作的两个软件实体可以一起工作。
-
适配器的别名是包装器(wrapper),这是一个相对简单的模式。在程序开发中有许多这样的 场景:当我们试图调用模块或者对象的某个接口时,却发现这个接口的格式并不符合目前的需求。 这时候有两种解决办法,第一种是修改原来的接口实现,但如果原来的模块很复杂,或者我们拿 到的模块是一段别人编写的经过压缩的代码,修改原接口就显得不太现实了。第二种办法是创建 一个适配器,将原接口转换为客户希望的另一个接口,客户只需要和适配器打交道。
-
现实中的适配器:转接头
-
适配器模式是一种“亡羊补牢”的模式,没有人会在程序的设计之初就使用它。
// 定义两个第三方的api,他们都是用show方法调用
const googleMap = {
show: function () {
console.log('开始渲染谷歌地图')
}
}
const baiduMap = {
show: function () {
console.log('开始渲染百度地图')
}
}
// 这是我们自己的调用方法
const renderMap = function (map) {
if (map.show instanceof Function) {
map.show()
}
}
renderMap(googleMap) // 输出:开始渲染谷歌地图
renderMap(baiduMap) // 输出:开始渲染百度地图
// 这段程序得以顺利运行的关键是 googleMap 和 baiduMap 提供了一致的 show 方法,
// 但第三方的接口方法并不在我们自己的控制范围之内,假如 baiduMap 提供的显示地图的方法不叫 show 而叫display 呢?
// 添加一个适配器
const baiduMapAdapter = {
show: function(){
return baiduMap.display()
}
}
// // 通过适配器可以正常调用baiduMap了
renderMap( googleMap ); // 输出:开始渲染谷歌地图
renderMap( baiduMapAdapter ); // 输出:开始渲染百度地图
// 再来看看另外一个例子。假设我们正在编写一个渲染广东省地图的页面。目前从第三方资源
//里获得了广东省的所有城市以及它们所对应的 ID,并且成功地渲染到页面中:
const getGuangdongCity = function () {
const guangdongCity = [
{
name: 'shenzhen',
id: 11,
}, {
name: 'guangzhou',
id: 12,
}
]
return guangdongCity
}
const render = function (fn) {
console.log('开始渲染广东省地图数据', fn())
}
// render(getGuangdongCity)
// 利用这些数据,我们编写完成了整个页面,并且在线上稳定地运行了一段时间。但后来发现
// 这些数据不太可靠,里面还缺少很多城市。于是我们又在网上找到了另外一些数据资源,这次的
// 数据更加全面,但遗憾的是,数据结构和正运行在项目中的并不一致。新的数据结构如下:
// 就是我们想要用新的数据结构,新结构如下,但是不用改变原先的getGuangdongCity,只需要新增一个addressAdapter,去把旧数据转换成我们想要的格式
const guangdongCity = {
shenzhen: 11,
guangzhou: 12,
zhuhai: 13
}
console.log('新结构是这样的', guangdongCity)
// 除了大动干戈地改写渲染页面的前端代码之外,另外一种更轻便的解决方式就是新增一个数
// 据格式转换的适配器:
const addressAdapter = function (oldAddressfn) {
const address = {}
const oldAddress = oldAddressfn()
for (let i = 0; i < oldAddress.length; i++) {
const c = oldAddress[i]
address[c.name] = c.id
}
return function () {
return address
}
}
// 把旧数据转成我们想要的
render(addressAdapter(getGuangdongCity))
总结
- 适配器模式主要用来解决两个已有接口之间不匹配的问题,它不考虑这些接口是怎样实现的,也不考虑它们将来可能会如何演化。适配器模式不需要改变已有的接口,就能够使它们协同作用。
- 当后端接口改了,但你又不想改原先代码,这个时候可以用这个