适配器模式的定义
适配器模式(Adapter)：将一个类的接口转换成客户希望的另外一个接口，使得原本由于接口不兼容而不能一起工作的那些类可以一起工作。
用途：将无法使用的接口转换成可以使用的接口
使用场景：库的适配、参数的适配、数据的适配
注意事项：适配器模式本质上是一个亡羊补牢的模式，它解决的是现存的两个接口之间不兼容的问题，不应该在软件的初期开发阶段就使用该模式；如果在设计之初就能够统筹的规划好接口的一致性，那么适配器就应该尽量减少使用。
适配器模式——库的适配
百度统计提供的埋点接口格式如下
_hmt.push(['_trackEvent', category, action, opt_label,opt_value]);
神策数据提供的埋点接口格式如下：
sa.track(eventName, { attrName: value })
现需将百度统计的_htm.push接口更改成为神策提供的sa.track接口，可以写一个适配器完成所有埋点事件的迁移：
//app.js let _hmt = { push: (arr) { const [eventName, attrName, value] = [...arr.splice(2)]; let attrObj = { [attrName]: value }; sa.track(eventName, attrObj); } }
分析比较百度统计的接口和神策的接口，可知在神策中只需要传入三个参数，eventName对应的是百度统计接口中的action, attrName对应的是百度统计接口中的opt_label， value对应的是百度统计接口中的opt_value; 删除了百度统计的SDK后，SDK所提供的_htm这个全局变量也就不存在了，可以利用该变量名做适配器，在push方法获取sa.track所需要的三个参数并调用sa.track即可。
适配器模式——参数的适配
例如在SDK这个类中有一个phoneStatus，需要传入五个参数用于接收手机的相关信息：
class SDK { phoneStatus(brand, os, carrier, language, network) { //dosomething..... } }
在传入的参数大于3的时候，可以考虑将参数合并为一个对象的形式，下面我们将phoneStatus的参数接口定义如下（String代表参数类型，?: 代表可选项）
{ brand: String os: String carrier:? String language:? String network:? String }
carrier、language，network这三个属性不是必须传入的，在方法内部可能被设置一些默认值。所以这时可以在方法内部采用适配器来适配这个参数对象。
class SDK { phoneStatus(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..... } }
适配器模式——数据的适配
通常服务器端传递的数据和前端需要使用的数据格式不一致，这时需要对后端的数据格式进行适配。
例如后端返回的数据格式为：
[ { "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设计模式【详解】总目录
https://blog.csdn.net/weixin_41192489/article/details/116154815
