JavaScript适配器模式详解：解决接口不匹配与数据格式转换

概述

适配器模式属于行为型设计模式的一种。

定义：

该模式旨在解决两个现有接口之间的不兼容问题。它无需关注接口的具体实现方式，也不涉及未来的修改计划；其核心优势在于无需修改原有接口即可实现协同工作。

白话解释：

假设你购买了一款电器，带回家后发现它仅支持两孔插座，而家中电源均为三孔插座。此时若去退货显然不划算，于是你利用家中的多功能电源插座（具备三孔与两孔）进行转接：将电器插头插入多功能插座的两孔，再将多功能插座插入墙壁三孔插座，从而正常使用。这里的“多功能电源插座”即充当了适配器的角色。

代码实现


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 ); // 开始渲染百度地图

上述代码能够正常运行，原因在于两个对象中的参数名称一致，因此可以正常执行并显示结果。


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

然而，如果未来baiduMap的方法名发生更改，继续按上述方式运行将会报错，因为baiduMap对象中已不再包含show()方法。

使用适配器模式来修改：


var googleMap = {
    show: function(){
        console.log( '开始渲染谷歌地图' );
    }
};
var baiduMap = {
    display: function(){
        console.log( '开始渲染百度地图' );
    }
};
var baiduMapAdapter = {
    show: function(){
        return baiduMap.display();

    }
};

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

在这段代码中，适配器的作用相对简单：它创建了一个新对象，添加了一个同名的show()方法，并在该方法内部调用baiduMap.display()。这样，我们只需在调用baiduMap时通过适配器即可达到预期效果。

作为前端开发人员，我们对页面上期望获取的数据及其格式通常比较了解。但在前后端分离的开发模式中，有时会遇到如下尴尬情况：

许多UI组件或工具库按照指定的数据格式进行渲染，而后端开发人员可能并不知晓这一要求。因此，接口返回的数据可能无法直接在页面上正常渲染。若此时老板催促上线，而后端坚持认为数据格式无误且拒绝修改，我们可以通过前端使用适配器模式来格式化数据。

后端返回的json数据格式：


[
  {
    "day": "周一",
    "uv": 6300
  },
  {
    "day": "周二",
    "uv": 7100
  },  {
    "day": "周三",
    "uv": 4300
  },  {
    "day": "周四",
    "uv": 3300
  },  {
    "day": "周五",
    "uv": 8300
  },  {
    "day": "周六",
    "uv": 9300
  }, {
    "day": "周日",
    "uv": 11300
  }
]

Echarts图表图形需要的数据格式：


["周二", "周二", "周三"， "周四"， "周五"， "周六"， "周日"] //x轴的数据

[6300. 7100, 4300, 3300, 8300, 9300, 11300] //坐标点的数据

尽管情况棘手，但仍需解决问题。使用适配器来解决：


//x轴适配器
function echartXAxisAdapter(res) {
  return res.map(item => item.day);
}

//坐标点适配器
function echartDataAdapter(res) {
  return res.map(item => item.uv);
}

创建两个函数，分别按照Echarts所需的数据格式对数据进行格式化，即可解决问题。这两个方法本质上就是适配器，将指定数据输入后，即可按特定规则输出我们期望的数据格式。

总结

个人认为，适配器模式更像是一种“亡羊补牢”式的设计模式。如果在项目开发初期我们就清楚期望的数据格式或方法名，可能永远用不到适配器模式。然而，项目迭代往往不可预测，当数据格式或方法名在迭代后发生变化时，我们通常可以使用适配器模式进行适配解决。当然，最佳解决方案是在项目开发过程中，前后端充分协商并确定数据格式、文件名等代码规范，这将显著提升项目开发效率。

以上就是JavaScript设计模式学习之适配器模式的详细内容，更多关于JavaScript设计模式的资料请关注本站其它相关文章！

JavaScript适配器模式：接口兼容与数据格式转换实战

概述

代码实现

总结

实用工具推荐