适配器模式是一种简单设计模式，主要是用来解决老接口不兼容的问题，对于不兼容的老接口，我们没必要重写，只需创建一个适配器即可。
获取城市接口例子
现在我们有一个接口用来获取广东省所有的城市，如下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
// 模拟接口，返回广东城市数据
let getGuanDongCity = function() {
let guanDongCity = [
{
name: 'shenzhen',
id: 11
},
{
name: 'guangzhou',
id: 12
}
]
return guanDongCity
}
// 定义渲染函数
let render = function(fn) {
document.write(JSON.stringify(fn()))
}
// 渲染
render(getGuanDongCity)
|
然后我们发现这个接口显示的城市并不齐全，我们又找到了另外一个齐全的接口作为补充，这个接口返回的数据格式和原来返回的数据格式不一样，这时候我们要改写原来的接口吗，nono,我们只要为原来的接口包装一个适配函数即可。
1
2
3
4
5
6
|
// 新的补充接口的数据格式
let guanDongCity = {
shenzhen: 11,
guangzhou: 12,
zhuhai: 13
}
|
为原来接口编写适配函数
1
2
3
4
5
6
7
8
9
10
11
12
|
let addressAdapter = function( oldAddressfn ) {
let address = {}
let oldAddress = oldAddressfn()
oldAddress.map((ele) => {
address[ele.name] = ele.id
})
return function(){
return address
}
}
// 这样渲染的数据格式就一样了
render(addressAdapter(getGuanDongCity))
|
那些似曾相识的场景
- jquery的封装
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
// 一个项目之前封装了一个ajax方法如下
ajax({
url: '/getData',
type: 'post',
data: {
id: 1
}
})
// 现在我们需要这么调用ajax
$.ajax({
url: '/getData',
type: 'post',
data: {
id: 1
}
})
|
我们不可能修改每一处调用ajax的地方,我们可以在封装ajax的地方做一层适配器如下
1
2
3
4
5
|
var $ = {
ajax:function(options) {
return ajax(options)
}
}
|
仔细想想，其实这种模式我们每天都在用，当后台返回的数据结构不满足前端页面所需要的结构时，而后台接口又很难改时，我们只要需要编写一个适配函数即可。（这不就是我每天经常干的嘛）