腳本之家服務器常用軟件

快捷導航

一看就懂的JavaScript適配器模式圖解及使用示例

更新時間：2022年12月22日 10:18:07 作者：qb

這篇文章主要為大家介紹了JavaScript適配器模式圖解及使用示例分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

引言

適配器模式是用來解決兩個軟件實體之間不兼容的問題的設計模式。

舉個兩實體不匹配例子：

假如這兩塊要契合在一起，怎么辦？

對嘍，咱們先給A實體造個適配器，如下：

再把A實體往右推一下：

通過適配器，咱們就把A實體和B實體結(jié)合到了一起了。

完美，再看適配器在代碼中的例子。

場景為：有個實體A，需要將實體A傳入實體B中，實體B返回其name對應的數(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é)

適配器模式是用來解決兩個軟件實體之間不兼容的問題的設計模式，可以在不改變實體內(nèi)部結(jié)構(gòu)的情況下，在其中一個實體外層包裝一個適配器，再去將兩個實體進行配合使用。

以上就是一看就懂的JavaScript適配器模式圖解及使用示例的詳細內(nèi)容，更多關于JavaScript適配器模式的資料請關注腳本之家其它相關文章！

您可能感興趣的文章:

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

一看就懂的JavaScript適配器模式圖解及使用示例

目錄

引言

總結(jié)

相關文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具