设计模式8—适配器模式【结构型】

参考：https://www.kancloud.cn/cyyspring/vuejs/1152338  或  https://blog.csdn.net/i10630226/article/details/81432636

概念：适配器模式 主要是用来解决两个已有接口之间不匹配的问题。

• 接口适配（即对象下的方法）

  const googleMap = {
    show: function () {
      console.log('开始渲染谷歌地图');
    }
  };
  
  const baiduMap = {
    display: function () {
      console.log('开始渲染百度地图');
    }
  };
  
  const baiduMapAdapter = {  //  把结构不同的对象，适配成需要结构的对象。后面操作都对这个新的适配对象操作
    show: function(){
      return baiduMap.display();
    }
  };
  
  renderMap(googleMap);       // 输出：开始渲染谷歌地图
  renderMap(baiduMapAdapter); // 输出：开始渲染百度地图

 

• 针对数据适配

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

  对数据进行适配

  // 清洗后的目标状态 ["周二", "周二", "周三"， "周四"， "周五"， "周六"， "周日"] //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);
  }

   

总结：适配器模式，主要是对象结构出现不同或不符合，需要适配成符合的结构。 后面就对适配后的对象进行操作了。在数据处理上，经常使用到适配模式。