一看就懂的JavaScript適配器模式圖解及使用示例
引言
適配器模式是用來解決兩個軟件實體之間不兼容的問題的設(shè)計模式。
舉個兩實體不匹配例子:

假如這兩塊要契合在一起,怎么辦?
對嘍,咱們先給A實體造個適配器,如下:

再把A實體往右推一下:

通過適配器,咱們就把A實體和B實體結(jié)合到了一起了。
完美,再看適配器在代碼中的例子。
場景為:有個實體A,需要將實體A傳入實體B中,實體B返回其name對應(yīng)的數(shù)據(jù),包含名稱、地址和年齡。
// 實體A
var instanceA = [{
name: '張三',
address: '北京',
age: 20,
},
{
name: '李四',
address: '天津',
age: 25,
},
{
name: '王五',
address: '河北',
age: 30,
}
]
// 實體B
var instanceB = function (data, name) {
return data[name]
}
// 實體A在實體B中進行調(diào)用
console.log(instanceB(instanceA, '張三')) // undefined
這里先定義實體A作為數(shù)據(jù),定義實體B作為調(diào)用函數(shù),將實體A放入實體B中,我們執(zhí)行可以發(fā)現(xiàn)返回的是undefined。
此時,我們定義一個適配器。
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的對象。
然后,將實體A進行適配器的處理,再塞入到實體B中。
console.log(instanceB(dataAdapter(instanceA), '張三')) // {"name": "張三", "address": "北京", "age": 20}
這樣,通過適配器dataAdapter,就可以將實體A在實體B進行使用,實現(xiàn)了兩個不同實體之間不兼容的問題。
總結(jié)
適配器模式是用來解決兩個軟件實體之間不兼容的問題的設(shè)計模式,可以在不改變實體內(nèi)部結(jié)構(gòu)的情況下,在其中一個實體外層包裝一個適配器,再去將兩個實體進行配合使用。
以上就是一看就懂的JavaScript適配器模式圖解及使用示例的詳細內(nèi)容,更多關(guān)于JavaScript適配器模式的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
codemirror6實現(xiàn)在線代碼編輯器使用詳解
這篇文章主要為大家介紹了codemirror6實現(xiàn)在線代碼編輯器使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-01-01
sessionStorage多Tab標簽頁數(shù)據(jù)共享問題分析
這篇文章主要為大家介紹了sessionStorage多Tab標簽頁數(shù)據(jù)共享問題分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-07-07
js實現(xiàn)保存文本框內(nèi)容為本地文件兼容IE,chrome,火狐瀏覽器
本文實現(xiàn)了利用JS保存頁面中文本框內(nèi)容到本地,并另存為指定文件擴展名與編碼類型,兼容IE,chrome,火狐等瀏覽器2018-02-02

