适配器模式

适配器模式

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

适配接口

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

例子：

// 百度地图提供的接口
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