让你遇见第三方接口变了不会慌——适配器模式

这是我参与更文挑战的第13天，活动详情查看：更文挑战

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

一般都是在原有接口和新接口不适配的情况下才会用到适配器模式，需要同时兼容这两种接口。我们会编写一个新的适配器来兼容新接口的输出内容。

例如我们需要用到地图数据，但是第三方的显示地图的方式不一样，我们需要进行适配。

const googleMap = {
    show: () => {
        console.log('render googleMap')
    }
}

const baiduMap = {
    show: () => {
        console.log('render baidu')
    }
}

const gaodeMap = {
    display: () => {
        console.log('render gaode')
    }
}

// 这边三个地图只有gaode用了display方法来渲染地图.
// 但是我们最好用相同的方式来渲染这三种地图。

const renderMap = (map) => {
    if(map.show instanceof Function) {
        map.show();
    }
};

// 这时候需要添加一个用来适配gaodeMap的适配器

const gaodeMapAdapter = {
    show: () => {
        return gaodeMap.display();
    }
}

// 这样我们可以用统一的renderMap()来渲染三种地图

renderMap(googleMap);
renderMap(baiduMap);
renderMap(gaodeMapAdapter);

以上这种方式是为了适配第三方的接口而实现的适配器，这种情况是我们不能控制的。

但是，有时候我们也会因为性能或者需求的改变，而需要在原有的接口上新增一些新的功能，但是因为历史遗留的问题，更改原有的代码会变得越发复杂，只能新增代码来适配原有的方法。

例如我们之前编写了一个需要传递城市信息的接口，原来的接口的数据结构如下。

const guangdongCity = [
    {
        name: 'shenzhen',
        id: 11
    },
    {
        name: 'guangzhou'
        id: 12
    }
];

const postCities = (cities) => {
    console.log(cities);
}

postCities(guangdongCity);

但是现在接口需要的数据格式改变了，变成如下模式：

const guangdongCityNew = {
    zhuhai: 13,
    foshan: 14
}

此时需要新增一个适配器，去兼容老代码中的城市信息。一个一个去改显得太傻了。

const citiesAdapter = (oldCities) => {
    let cities = {};

    for(let i of oldCities) {
        cities[i.name] = i.id;
    }

    return cities.concat(guangdongCityNew);
}

postCities(citiesAdapter(guangdongCity))

以上就是适配器模式常用的几个场景，希望对你有所帮助。