适配器设计模式可以用生活中常用的笔记本电脑来做例子,笔记本使用电压在20v左右,但是我们家用电压在220v左右,所以我们希望用家用电适配对应的笔记本电压,这个时候就需要使用电源适配器
我们可以用我们刚刚说的笔记本电脑来举例子
这是家用电,家用电电压为220V,所以我们返回一下电压数
// 家用电 class Power{ charge(){ return '220V'; } }
笔记本电源适配器,我们创建一个家用电实例,在通过方法对电压进行转换为笔记本可充电的电压
class Adaptor{ constructor(){ this.power= new Power(); } charge(){ // 先拿到家用电电压 let voltage=this.power.charge; // 返回一个转换值 return `${voltage}=>20V` } }
电脑,我们创建一个电脑适配器实例,然后电脑适配器实例的电压转换方法对电压进行转换充电
class Computer{ constructor(){ this.adaptor=new Adaptor() } // 电脑充电 use(){ console.log(this.adaptor.charge()); } }
使用
const cop=new Computer(); //充电 cop.use();
在工作中我们需要使用到多个功能,比如我们项目中使用到了百度地图数据接口和高德地图数据接口,这个时候我们就可以去使用适配器模式
//对百度地图的数据接口操作 const BaiduMap={ show(){ //获取百度地图数据 } } //对高德地图的数据接口操作 const GaodeiMap={ show(){ //获取高德地图数据 } } //对腾讯地图的数据接口操作 const TxMap={ init(){ //获取腾讯地图数据 } }
由于他们都有共同点,所以请求数据都为show方法,如果有一天使用到其他的地图请求数据为init的API接口,我们去修改获取数据的方法的话成本太高,这个时候就需要使用到了适配器设计模式,通过switch语句进行匹配方法名,进行调用
//接收俩个参数,第一个是地图模块名,第二个是调用方法 function Adapter(V, fnName) { switch (fnName) { case 'show': V.show() break; case 'init': V.init() break; } }
适配器设计模式可以让彼此不兼容的功能在一块工作,有助于避免大规模的修改代码,并且易于扩展和兼容,但是如果过多的使用适配器,就会使得代码复杂程度增加,看起来十分混乱,维护起来有一定的困难
坚持努力,无惧未来!