欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2022年12月22日 10:18:07   作者：qb  
這篇文章主要為大家介紹了JavaScript適配器模式圖解及使用示例分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

引言

適配器模式是用來(lái)解決兩個(gè)軟件實(shí)體之間不兼容的問(wèn)題的設(shè)計(jì)模式。

舉個(gè)兩實(shí)體不匹配例子：

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

對(duì)嘍，咱們先給A實(shí)體造個(gè)適配器，如下：

再把A實(shí)體往右推一下：

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

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

場(chǎng)景為：有個(gè)實(shí)體A，需要將實(shí)體A傳入實(shí)體B中，實(shí)體B返回其name對(duì)應(yīng)的數(shù)據(jù)，包含名稱(chēng)、地址和年齡。

// 實(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
    }, {})
}

通過(guò)適配器，將數(shù)組對(duì)象轉(zhuǎn)換成name作為key，{name:xxx, address:xxx, age:xxx}作為value的對(duì)象。

然后，將實(shí)體A進(jìn)行適配器的處理，再塞入到實(shí)體B中。

console.log(instanceB(dataAdapter(instanceA), '張三')) // {"name": "張三", "address": "北京", "age": 20}

這樣，通過(guò)適配器dataAdapter，就可以將實(shí)體A在實(shí)體B進(jìn)行使用，實(shí)現(xiàn)了兩個(gè)不同實(shí)體之間不兼容的問(wèn)題。

總結(jié)

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

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

相關(guān)文章

最新評(píng)論