JS的适配模式

在使用第三方库或修改别人代码时, 一个类上的静态方法不能满足你使用时, 一般不建议修改源码. 这时候就可以使用适配模式解决.
接口适配
例:

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

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

const baiduMapAdapter = {
  show: function(){
    ...             //做相应的处理
    return baiduMap.display();
  }
};

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

参数适配
在很多NPM包,和jq插件中也使用这种方式

class SDK {
  systemInf(config) {

    let defaultConfig = {
      brand: null,  //手机品牌
      os: null, //系统类型： Andoird或 iOS
      carrier: 'china-mobile', //运营商，默认中国移动
      language: 'zh', //语言类型，默认中文
      network: 'wifi', //网络类型，默认wifi
    }

    //参数适配
    for( let i in config) {
      defaultConfig[i] = config[i] || defaultConfig[i];
    }

    //dosomething.....
  }
}

数据适配
在前端使用UI库时, 所需的数据结构早由UI开发团队设定, 有时候后端返回的数据结构是无法使用的,这时候就得重构数据结构.

[
  {
    "day": "周一",
    "uv": 6300
  },
  {
    "day": "周二",
    "uv": 7100
  },  {
    "day": "周三",
    "uv": 4300
  },  {
    "day": "周四",
    "uv": 3300
  },  {
    "day": "周五",
    "uv": 8300
  },  {
    "day": "周六",
    "uv": 9300
  }, {
    "day": "周日",
    "uv": 11300
  }
] //后端数据
//但是Echarts需要的x轴的数据格式和坐标点的数据是长下面这样的:
["周二", "周二", "周三"， "周四"， "周五"， "周六"， "周日"] //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);
}

总结
该模式属 "亡羊补牢", 在前期开发尽量避免

JS的适配模式

评论 (0)