JavaScript 适配器模式

前言

适配器模式是一种结构型设计模式，它允许对象在不改变对象接口的前提下，在不兼容的系统之间进行交互。适配器模式通常用于将已有的类的接口转换为另一个接口，以便系统中的其他组件可以与之交互。

在适配器模式中，通常涉及三个角色：

1. 目标(Target)接口：当前系统期望使用的接口，它定义了客户端所需的特定域的操作。
2. 需要适配的类(Adaptee)：已存在的类，其接口不符合目标接口的要求。
3. 适配器(Adapter)：实现目标接口，并在内部封装有一个需要适配的对象实例。适配器负责接收调用并将其转换为对适配对象的接口调用。

适配器模式往往不是一开始就会去使用的，因为没有人能知道未来会发生了什么，使用它往往是因为已有和新增的内容存在冲突，但是又需要配合使用，于是使用适配器来实现兼容。

常见的比如对象之间的兼容，你有一套前端的客户端代码，但是这个客户端需要在安卓包里面使用，刚开始你可能是只有一个安卓包，那你在代码中只需要调用这一个包提供的sdk方法即可，但是随着客户端的扩展，你需要适配多个安卓包，但是每个安卓包的sdk不一定是相同的，这个时候你就需要写一个中间层去解决客户端和安卓包的适配问题，这个中间层就是适配器。

还有就是我们的数据转化，可能刚开始我们定义好了一个数据结构，所有的业务逻辑都是基于这个数据结构实现的，但是有一天我们需要新增一批新的数据，这个数据可能是后端返的，也有可能是第三方提供的，它返回数据格式不一定是之前的相同，那么我也要解决这个问题，常见的做法就是写一个格式转化的函数，这个其实也是适配器。

生活中常见的是适配器

1. 港式插头转换器
2. 电源适配器
3. usb转接口

适配器模式的应用

当我们向 googleMap 和 baiduMap 都发出“显示”请求时，googleMap 和 baiduMap 分别以各自的方式在页面中展现了地图：

var googleMap = {
    show: function() {
        console.log('开始渲染谷歌地图');
    }
};

var baiduMap = {
    show: function() {
        console.log('开始渲染百度地图');
    }
};

var renderMap = function(map) {
    if (map.show instanceof Function) {
        map.show();
    }
};

renderMap(googleMap); // 输出：开始渲染谷歌地图 
renderMap(baiduMap); // 输出：开始渲染百度地图

这段程序得以顺利运行的关键是 googleMap 和 baiduMap 提供了一致的 show 方法，但第三方的 接口方法并不在我们自己的控制范围之内，假如 baiduMap 提供的显示地图的方法不叫 show 而叫 display 呢？

baiduMap 这个对象来源于第三方，正常情况下我们都不应该去改动它。此时我们可以通过增 加 baiduMapAdapter 来解决问题：

var googleMap = {
    show: function() {
        console.log('开始渲染谷歌地图');
    }
};

var baiduMap = {
    display: function() {
        console.log('开始渲染百度地图');
    }
};

var baiduMapAdapter = {
    show: function() {
        return baiduMap.display();
    }
};

renderMap(googleMap); // 输出：开始渲染谷歌地图
renderMap(baiduMapAdapter); // 输出：开始渲染百度地图

适配器模式是一种相对简单的模式，我们常常在无形之间就应用到了这种方式，只是说没有那么死板，必须要用类去实现，毕竟在JavaScript中类本来就是弱化的。