JavaScript适配器模式

适配器模式:

是为了解决2个软件中由于接口不兼容的问题。

比如在现实生活中最常见的就是去国外,需要带转换插头,转换电压。在代码中,最常见的是当调用某个接口,返回的数据并不是我们想要的格式,一般我们不太可能去修改原有的接口,一是风险太大,不知道有没有别的地方使用,二是增加了工作量,修改原有的代码需将原先的代码逻辑理清并且保证不会产生regression的错误。

例如:

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
var getStudentNames = function() {
var names = [
{
id: 1,
name: 'mike'
},
{
id: 2,
name: 'tony'
},
{
id: 3,
name: 'tina'
}
];
return names;
};

var generate = function(fn) {
var names = fn();
for(var i = 0; i<names.length; i++) {
console.log('id'+i.id +'是' + i.name + '同学');
};
}

generate(getStudentNames);

一开始我们获取的是比如某兴趣班仅有4位同学,前端写死的,但是后来发现该兴趣班人员变化很快,改为后端返回接口数据来渲染,而后端返回的接口数据比如是

1
2
3
4
5
6
{
1: 'mike',
2: 'tony',
3: 'tina',
4: 'jane'
}

如果我们直接在generate函数上修改的话会出现之前提到的几种错误可能,所以这时会采用适配器模式,将返回的数据接口转换成generate函数所需要的数据结构。代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
var adapter = function(data) {
return function() {
return Object.keys(data).map((val, index)=> {
var obj = {};
obj.id= val;
obj.name = data[val];
return obj;
});
}
};

generate(adapter(data));

本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!