設計者模式之適配器模式

適配器模式

前言

適配器模式是設計模式中相對簡單的一種，它是將本來不一樣的內層接口經過改裝實現統一對外能夠實現適配。生活中不少這樣的實例，好比usb轉接頭、萬能插座等。

案例

假設咱們有使用百度地圖系統，但這部分的api不歸咱們控制，也不容許咱們改動，但咱們須要進行一次封裝來實現對應的功能。

const BaiduMap ={
 	show:function(){
  	console.log('百度地圖')
  }
}
const BaiduMapAdapter = function(){
	show:function(){
  	return BaiduMap.show();
  }
}

複製代碼

除了這樣的例子以外，咱們還有案例是基於一些參數的改造的，在裝飾者模式中咱們講過能夠對參數進行一些改造再返回給對象或者類，而適配器模式自己就是能夠作參數的改造，這樣一個過程。

好比，很是常見的，後端返回前端的數據，原來的列表格式是{name:'張三',id:1}，可是ui控件的要求是但願咱們傳遞的數據對象的字段是{label:'張三',value:1}.不少同窗可能不會以爲這個參數改造有多麻煩，但實際上咱們缺少的是設計思想，是把這個參數改造的代碼段變成一個可重用的具備設計思想的方法。說的更直白的話，就是這段更改賦值的方法根本不能複用，下次換其餘具體的字段，還要寫不少相似的方法。

let userList = [{name:'張三',id:1}];

//old codes

//vue methods 
changeUserList(userList){
	this.userList = userList.reduce((arr,item)=> {
    arr.push({
    	label:item.name,
      value:item.id
    })
  },[])
}



// new codes ,基於須要改造爲label/value的組件，提供一個參數改造的工具方法
/** @param arr 須要改造的數組 @param itemOldKey :[label,value] ,須要改造爲label、value的對應的原值 */
const compParamAdapter = (arr,itemOldKey) => {
  if(!Array.isArray(arr) ||!arr.length || !Array.isArray(itemOldKey)) return ;
	return arr.reduce((arr,item)=>{
  	arr.push({
    	key:itemOldKey[0] ? item[itemOldKey[0]] :item.label,
      value:itemOldKey[1] ? item[itemOldKey[1]] :item.value,
    })
  })
}

// 任何須要相似的改造的使用場景的時候，直接使用適配器適配的結果
//vue methods 
changeUserList(userList){
	this.userList = compParamAdapter(userList,['name','id'])
}

複製代碼

對比

由於到這裏，其實已經分享過了較多的設計模式了，相信你們對外觀模式、裝飾者模式和適配器模式有必定疑惑，由於看代碼沒什麼差異，都是進行一次封裝。這裏說幾點重要的區別。

• 適配器模式主要是用來解決兩個接口不匹配的問題，或者也能夠擴大爲數據不匹配或者不完整的問題，適配器不須要修改原來的接口或者數據，只是依照原來的接口或者數據進行改造，讓其符合要求。
• 裝飾者模式是爲了給對象增長屬性或者功能或者改造參數，可能會造成一個長的裝飾鏈，而且須要提供被裝飾的對象，而適配器模式不須要知道最終的使用者，再順便說下代理模式，是爲了解決不暴露原對象的其餘屬性而出發的。
• 外觀模式，外觀模式是和適配器模式看似差異最小的，二者的最主要的差異是，是不是新寫一個接口，仍是改造一下仍是用原來的第三方數據或者接口。

無論怎麼說，其實用哪一種設計模式，不用過於計較概念，但願你們工做中更重要的是基於這些設計模式的思想解決實際的問題，以能解決問題爲準，具體你解決後的這段代碼屬於什麼設計模式的範疇可能不是那麼重要。

原文連接

• 語雀設計者模式--適配器模式