设计模式-适配器模式

适配器模式定义

适配器模式的作用是解决现有接口之间不兼容的问题，通过将一个对象或者类的方法属性转化成另外一个对象或者类的方法属性，以满足客户的使用需求。
例如，当我们有GDMap和BJMap两个对象

var GDMap = {
  show:function(){console.log('渲染广州地图;');}
}
var BJMap = {
  show:function(){console.log('渲染北京地图;');}
}
var renderMap = function(map) {
  if(map.show instanceof Function) {map.show();}
}

renderMap(GDMap);
renderMap(BJMap);

GDMap和BJMap两个对象中都有show方法，因此我们可以通过renderMap来封装一个渲染地图的方法，如果此时BJMap对象改动，提供的渲染方法不叫show方法而是render方法，那就不能继续通过renderMap方法来渲染地图，此时我们可以通过增加一个适配器来解决这个问题。

var GDMap = {
  show:function(){console.log('渲染广州地图;');}
}
var BJMap = {
  render:function(){console.log('渲染北京地图;');}
}
var renderMap = function(map) {
  if(map.show instanceof Function) {map.show();}
}
renderMap(GDMap);  //渲染广州地图;
renderMap(BJMap);  //undefined
var BJMapAdapter = {
    show:function(){return BJMap.render();}
}
renderMap(BJMapAdapter);  //渲染北京地图;

适配器模式的应用

1.异类库适配

例如，我们在代码里通过jQuery.ajax去发送请求，现在在快应用里面接口请求需要采用fetch方法，我们就可以通过适配器模式来适配fetch请求，这样我们就可以不用修改发送请求的代码，依然使用$.ajax来请求接口。

let $=require('jquery');
$.ajax({
    url,
    type: 'POST',
    dataType: 'json',
    data:{id:1}
});

let $={
    ajax(options) {
        fetch(options.url,{
            method: options.type,
            body:JSON.stringify(options.data)
        })
    }
}

2.数据适配

2.1 参数适配

有时我们定义的方法包含了多个传参，要记住这些参数的顺序是很困难的，我们采用参数对象的方式传入，但我们需要知道传递的参数是否完整，可以通过用适配器来适配传入的参数。

//function fn(name,tracedId,time,appid){...}
function fn(obj){
	var _adapter= {  //对于没有传入的参数给予默认值
		name:'Yimi',
		tracedId:getTraceId(),
		time:getTime(),
		appid:'001'
	}
	for (var i in obj) {
		_adapter[i] = obj[i] || _adapter[i];
	}
	....
}

2.2 适配后端接口数据

适配器模式可以解决前后端数据的依赖，如果后端因为架构改变导致传递的数据结构改变，前端通过适配器处理接受的数据将其转化为前端需要的数据格式就可以放心使用了。

3.computed

vue中computed计算属性也是适配模式的体现。

小结

1.适配器vs外观模式

适配器和外观模式都是对别的对象进行包装并改变其呈现的接口，二者的差别在于外观模式展现的是一个简化的接口，它并不提供额外的选择，而且有时为了方便完成常见任务它还会做出一些假定。而适配器则要把一个接口转换为另一个接口，它不会过滤某些能力，也不会简化接口。适配器用于客户系统期待的接口与现有api提供的接口不兼容场合，有助于避免客户代码大规模改写。