一看就懂的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)文章
8個(gè)JS的reduce使用實(shí)例和reduce操作方式
reduce方法是JavaScript中一個(gè)比較強(qiáng)大的方法,可能在平時(shí)開發(fā)中,有人根本沒用過,通過下面的8個(gè)例子,學(xué)會(huì)reduce的用法以及它的常用場景,需要的朋友可以參考一下2021-09-09codemirror6實(shí)現(xiàn)在線代碼編輯器使用詳解
這篇文章主要為大家介紹了codemirror6實(shí)現(xiàn)在線代碼編輯器使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-01-01微信小程序 獲取當(dāng)前地理位置和經(jīng)緯度實(shí)例代碼
這篇文章主要介紹了微信小程序 獲取當(dāng)前地理位置和經(jīng)緯度實(shí)例代碼的相關(guān)資料,這里附有實(shí)例代碼,及實(shí)現(xiàn)效果圖,需要的朋友可以參考下2016-12-12sessionStorage多Tab標(biāo)簽頁數(shù)據(jù)共享問題分析
這篇文章主要為大家介紹了sessionStorage多Tab標(biāo)簽頁數(shù)據(jù)共享問題分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-07-07微信小程序 新建登錄頁并實(shí)現(xiàn)tabBar隱藏
這篇文章主要介紹了微信小程序 新建登錄頁并實(shí)現(xiàn)tabBar隱藏的相關(guān)資料,需要的朋友可以參考下2017-06-06js實(shí)現(xiàn)保存文本框內(nèi)容為本地文件兼容IE,chrome,火狐瀏覽器
本文實(shí)現(xiàn)了利用JS保存頁面中文本框內(nèi)容到本地,并另存為指定文件擴(kuò)展名與編碼類型,兼容IE,chrome,火狐等瀏覽器2018-02-02