My Little World

适配器模式

发表于

定义
解决俩个软件实体间接口不兼容的问题，使用适配器模式之后，原本由于接口不兼容而不能工作的两个软件实体，可以一起工作

用途/场景
1.调用第三方（地图/支付）接口时，不同平台提供的相同功能的接口函数名不同，或者调用时需要进行的操作过程不同，
将这些过程封装/分类，通过适配器决定如何使用

2.处理数据,将不符合使用要求的数据结构转换成预期的样子

主要思想
将处理过程封装在适配器函数中,直接在适配器函数中进行处理，或者让适配器返回处理后的可适用结果
调用适配器传入需要处理的数据/条件，适配器进行处理或返回处理结果

注意事项
那些繁琐的处理代码始终是存在的，只不过在写业务的时候看不到它罢了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
1.转换数据结构
//将如下数据结构
var guangdongCity = [{             
        name: 'shenzhen',             
        id: 11,         
    }, {             
        name: 'guangzhou',             
        id: 12,         
    }];
//转换成如下数据结构
var guangdongCity = {     shenzhen: 11,      guangzhou: 12};

var adapter = (data)=>{
	let temp = {};
	for(let i=0;i<data.length;i++){
		temp[data[i].name] = data[i].id
	}
	return temp
}
console.log(adapter(guangdongCity))

2.SDK适配例子1
var googleMap = {      
    show: function(){          
        console.log( '开始渲染谷歌地图' );      
        }  
    }; 
var baiduMap = {       
        display: function(){          
            console.log( '开始渲染百度地图' );      
        }  
    }; 
var baiduMapAdapter = {      
        show: function(){          
            return baiduMap.display();    
        }  
    };
var renderMap = function( map ){     
    if ( map.show instanceof Function ){         
        map.show();     
    } 
}; 
renderMap( googleMap );        // 输出：开始渲染谷歌地图 
renderMap( baiduMapAdapter );    // 输出：开始渲染百度地图 
3.SDK适配例子2
function pay ({
  price,
  goodsId
}) {
  return new Promise((resolve, reject) => {
    const config = {}
 
    switch (platform) {
      case 'wechat':
        // 微信的处理逻辑
        config.price = price
        config.goodsId = goodsId
        config.appId = 'XXX'
        config.secretKey = 'XXX'
        wx.pay(config).then((err, data) => {
          if (err) return reject(err)
 
          resolve(data)
        })
      break
      case 'QQ':
        // QQ的处理逻辑
        config.price = price * 100
        config.gid = goodsId
        config.appId = 'XXX'
        config.secretKey = 'XXX'
        config.success = resolve
        config.error = reject
        qq.pay(config)
      break
      case 'alipay':
        // 支付宝的处理逻辑
        config.payment = price
        config.id = goodsId
        config.token = 'XXX'
        alipay.pay(config, resolve, reject)
      break
    }
  })
}
// run anywhere
await pay({
  price: 10,
  goodsId: 1
})

对于SDK提供方，仅仅需要知道自己所需要的一些参数，然后按照自己的方式进行数据返回。

对于SDK调用方，仅仅需要我们约定好的通用的参数，以及按照约定的方式进行监听回调处理。

整合多个第三方SDK的任务交由适配器来做，然后将适配器的代码压缩，混淆，放在一个看不见的角落里去，这样的代码逻辑就会变得很清晰了
参考资料:适配器在JavaScript中的体现