一看就懂的JavaScript適配器模式圖解及使用示例
引言
適配器模式是用來解決兩個(gè)軟件實(shí)體之間不兼容的問題的設(shè)計(jì)模式。
舉個(gè)兩實(shí)體不匹配例子：
假如這兩塊要契合在一起，怎么辦？
對嘍，咱們先給A實(shí)體造個(gè)適配器，如下：
再把A實(shí)體往右推一下：
通過適配器，咱們就把A實(shí)體和B實(shí)體結(jié)合到了一起了。
完美，再看適配器在代碼中的例子。
場景為：有個(gè)實(shí)體A，需要將實(shí)體A傳入實(shí)體B中，實(shí)體B返回其name對應(yīng)的數(shù)據(jù)，包含名稱、地址和年齡。
// 實(shí)體A
var instanceA = [{
name: '張三',
address: '北京',
age: 20,
},
{
name: '李四',
address: '天津',
age: 25,
},
{
name: '王五',
address: '河北',
age: 30,
}
]
// 實(shí)體B
var instanceB = function (data, name) {
return data[name]
}
// 實(shí)體A在實(shí)體B中進(jìn)行調(diào)用
console.log(instanceB(instanceA, '張三')) // undefined
這里先定義實(shí)體A作為數(shù)據(jù)，定義實(shí)體B作為調(diào)用函數(shù)，將實(shí)體A放入實(shí)體B中，我們執(zhí)行可以發(fā)現(xiàn)返回的是undefined。
此時(shí)，我們定義一個(gè)適配器。
var dataAdapter = function (arr) {
return arr.reduce((accumulator, currentValue) => {
accumulator[currentValue['name']] = currentValue
return accumulator
}, {})
}
通過適配器，將數(shù)組對象轉(zhuǎn)換成name作為key，{name:xxx, address:xxx, age:xxx}作為value的對象。
然后，將實(shí)體A進(jìn)行適配器的處理，再塞入到實(shí)體B中。
console.log(instanceB(dataAdapter(instanceA), '張三')) // {"name": "張三", "address": "北京", "age": 20}
這樣，通過適配器dataAdapter，就可以將實(shí)體A在實(shí)體B進(jìn)行使用，實(shí)現(xiàn)了兩個(gè)不同實(shí)體之間不兼容的問題。
總結(jié)
適配器模式是用來解決兩個(gè)軟件實(shí)體之間不兼容的問題的設(shè)計(jì)模式，可以在不改變實(shí)體內(nèi)部結(jié)構(gòu)的情況下，在其中一個(gè)實(shí)體外層包裝一個(gè)適配器，再去將兩個(gè)實(shí)體進(jìn)行配合使用。
以上就是一看就懂的JavaScript適配器模式圖解及使用示例的詳細(xì)內(nèi)容，更多關(guān)于JavaScript適配器模式的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了微信小程序 Page（）函數(shù)詳解的相關(guān)資料,在開發(fā)過程中肯定會遇到Page（）函數(shù)，希望能幫助到大家，需要的朋友可以參考下2016-10-10
JavaScript監(jiān)測數(shù)據(jù)類型方法全面總結(jié)
這篇文章主要為大家介紹了JavaScript監(jiān)測數(shù)據(jù)類型方法示例全面總結(jié),有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
這篇文章主要介紹了JS?ES新特性變量的解耦賦值，ECMAScript?2015中允許按照一定模式，從數(shù)組和對象中提取值，對變量進(jìn)行賦值，這被稱為?解耦賦值?，下面一起進(jìn)入文章學(xué)習(xí)該內(nèi)容,需要的朋友也可以參考一下2021-12-12
這篇文章主要介紹了詳解微信小程序 template添加綁定事件的相關(guān)資料,需要的朋友可以參考下2017-06-06
微信小程序?qū)崿F(xiàn)給循環(huán)列表添加點(diǎn)擊樣式實(shí)例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)給循環(huán)列表添加點(diǎn)擊樣式實(shí)例的相關(guān)資料,需要的朋友可以參考下2017-04-04
這篇文章主要為大家介紹了JS前端使用canvas搞一個(gè)手勢識別的實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
JavaScript代碼不能被阻斷的穩(wěn)定性建設(shè)
這篇文章主要為大家介紹了JavaScript代碼不能被阻斷的穩(wěn)定性建設(shè)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
lodash內(nèi)部方法getData和setData實(shí)例解析
本篇章我們將了解lodash里內(nèi)部關(guān)于Data的操作方法，重點(diǎn)關(guān)注getData、setData兩個(gè)內(nèi)部方法，同時(shí)由實(shí)現(xiàn)上引申其他內(nèi)部封裝的方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
這篇文章主要為大家介紹了Fabric.js 保存自定義屬性方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
這篇文章主要介紹了微信小程序 生命周期函數(shù)的相關(guān)資料,需要的朋友可以參考下2017-05-05