适配器模式

适配器模式主要是用来解决两个已有接口不匹配的问题，使其能够一起工作。

适配接口

比如，公司网站使用的地图一直都是百度地图：

例子：

// 百度地图提供的接口

var BaiduMap = {

    render: 

function
() {

        console.
log(
"百度地图");

    }

}



// 调用地图的公用方法



function 
mapShow
(map) {

    map.render();

}



// 使用地图

mapShow(BaiduMap); // 输出 百度地图

应项目需要，必须引入高德地图：

// 高德地图提供的接口

var Amap = {

    draw: 

function
() {

        console.
log(
"高德地图");

    }

}

对比两种地图的接口，可以发现：两者渲染地图的方法名不同，并且两者都属于第三方提供的接口，不在我们可以修改的范围之内；此时，可以使用适配器将不符合现有系统的接口进行转换：

例子：

// 高德地图提供的接口

var Amap = {

    draw: 

function
() {

        console.
log(
"高德地图");

    }

}



// 适配器

// 转换高德地图的接口，使其与现有方法名匹配

var changeAmap = {

    render: 

function
() {

        
return Amap.draw();

    }

}



// 调用地图的公用方法



function 
mapShow
(map) {

    map.render();

}



// 无需修改调用地图的公用方法，就可以使用高德地图

mapShow(changeAmap); // 输出 高德地图

适配数据

假设，公司网站前后端数据传输格式一直是下面这样：

例子：

// 后端传过来的数据格式

var nameList = [{

    name: 
"Tom",

    age: 
20

}, {

    name: 
"Amy",

    age: 
18

}];



// 显示数据的公用方法



function 
dataShow
(data) {

    data.forEach(

function
(v) {

        console.
log(v.name);

    });

}



// 显示数据

dataShow(nameList);

// 输出 Tom Amy

但运行了一段时间之后，后端需要更改数据格式：

var 
nameList 
= 
{

    
Tom: 
20
,

    
Amy: 
18


}

如果此时需要前端来处理这种数据不匹配的问题，就可以使用适配器来转换数据格式。

例子：

// 后端传过来的数据格式

var nameList = {

    Tom: 
20,

    Amy: 
18

}



// 适配器

// 转换数据格式，使其能够匹配现有的数据使用方法



function 
changeNameList
(nameList) {

    var list = [];

    
for (var item 
in nameList) {

        var obj = {};

        obj.name = item;

        obj.age = nameList[item];

        list.push(obj);

    }

    
return list;

}



// 显示数据的公用方法



function 
dataShow
(data) {

    data.forEach(

function
(v) {

        console.
log(v.name);

    });

}



// 无需修改显示数据的公用方法，依然可以正常运行

dataShow(changeNameList(nameList));

// 输出 Tom Amy