建站
咨詢
售后
建站咨詢
新聞中心
本篇內(nèi)容介紹了“JavaScript的show方法怎么調(diào)用”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！
成都創(chuàng)新互聯(lián)公司主營(yíng)長(zhǎng)春網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,成都App定制開發(fā),長(zhǎng)春h5重慶小程序開發(fā)搭建,長(zhǎng)春網(wǎng)站營(yíng)銷推廣歡迎長(zhǎng)春等地區(qū)企業(yè)咨詢
模式動(dòng)機(jī)
適配器模式的作用就是解決兩個(gè)軟件實(shí)體間接口不兼容情況.
通常情況下，使用者可以通過(guò)目標(biāo)類的接口訪問(wèn)它所提供的服務(wù)。開始時(shí)候沒(méi)有什么問(wèn)題, 但是一但后續(xù)別的接口(如第三方接口)有變動(dòng)或者后續(xù)擴(kuò)展需求, 此時(shí)使用原有接口已經(jīng)不可以提供服務(wù), 那么我們就需要把現(xiàn)有接口轉(zhuǎn)化為使用者需要的接口.適配器模式就是用來(lái)完成這樣的轉(zhuǎn)化.
在適配器模式中可以定義一個(gè)包裝類，包裝不兼容接口的對(duì)象，這個(gè)包裝類指的就是適配器(Adapter)，它所包裝的對(duì)象就是適配者(Adaptee)，即被適配的類。
模式定義
適配器模式(Adapter Pattern) ：將一個(gè)接口轉(zhuǎn)換成使用者希望的另一個(gè)接口，適配器模式使接口不兼容的那些類可以一起工作，其別名為包裝器(Wrapper)。適配器模式既可以作為類結(jié)構(gòu)型模式，也可以作為對(duì)象結(jié)構(gòu)型模式。
模式結(jié)構(gòu)
適配器模式包含如下角色：
Target：目標(biāo)抽象類
Adapter：適配器類
Adaptee：適配者類
Client：客戶類
現(xiàn)實(shí)世界舉例論證
現(xiàn)在世界中的適配器模式使用如: 港式插頭轉(zhuǎn)換器, 電源適配器, USB轉(zhuǎn)接口。
需求舉例代碼實(shí)現(xiàn)
我們需要完成一個(gè)集成多個(gè)第三方地圖sdk進(jìn)行地圖渲染功能:
// 谷歌地圖,百度地圖sdk都有show方法進(jìn)行調(diào)用。
const googleMap = {
show () {
// 具體谷歌sdk的實(shí)現(xiàn)
console.log('開始使用谷歌地圖渲染')
}
};
const baiduMap = {
show () {
// 具體百度sdk的實(shí)現(xiàn)
console.log('開始使用百度地圖渲染')
}
}
// renderMap方法是提供給使用者來(lái)調(diào)用
const renderMap = (map) => {
if (map.show instanceof Function) {
map.show();
}
};
renderMap(googleMap);
renderMap(baiduMap);
這個(gè)時(shí)候產(chǎn)品需要我們集成高德地圖sdk,但是高德地圖渲染方法不是show方法,而是render方法.
這個(gè)時(shí)候我們不應(yīng)該去改動(dòng)之前的源代碼違反開閉原則. 而應(yīng)該想到適配器模式.
// 谷歌地圖,百度地圖sdk都有show方法進(jìn)行調(diào)用。
const googleMap = {
show () {
// 具體谷歌sdk的實(shí)現(xiàn)
console.log('開始使用谷歌地圖渲染')
}
};
const baiduMap = {
show () {
// 具體百度sdk的實(shí)現(xiàn)
console.log('開始使用百度地圖渲染')
}
}
const gaodeMap = {
render () {
// 具體高德sdk的實(shí)現(xiàn)
console.log('開始使用高德地圖渲染')
}
}
// 適配器
const gaodeMapAdapater = {
show () {
return gaodeMap.render();
}
}
// renderMap方法是提供給使用者來(lái)調(diào)用
const renderMap = (map) => {
if (map.show instanceof Function) {
map.show();
}
};
renderMap(googleMap);
renderMap(baiduMap);
renderMap(gaodeMapAdapater);
另外一個(gè)例子也是我們常見的場(chǎng)景---數(shù)據(jù)格式變更, 這個(gè)我在開發(fā)中經(jīng)常遇到:
// 這是我們之前上傳資源, 后臺(tái)返回給我們的文件信息.
const responseUploadFile = {
startTime: '',
file: {
size: '100kb',
type: 'text',
url: '',
name: '',
...
},
id: ''
}
// 如果某天后臺(tái)突然說(shuō)因?yàn)槟承┰蚝罄m(xù)上傳文件返回格式有變動(dòng)了。如下
const changeResUploadFile = {
size: '100kb',
type: 'text',
url: '',
name: '',
startTime: '',
id: ''
}
// 由于我們之前使用舊格式數(shù)據(jù)做了很多業(yè)務(wù)邏輯,這個(gè)時(shí)候不能其改動(dòng),容易導(dǎo)致bug而且需求進(jìn)行回歸測(cè)試.
// 采用適配器模式
const responseUploadFileAdapter = (uploadFile) => {
// 在這里對(duì)新的數(shù)據(jù)進(jìn)行拼接轉(zhuǎn)化
}
模式分析
優(yōu)點(diǎn):
將目標(biāo)類和適配者類解耦，通過(guò)引入一個(gè)適配器類來(lái)重用現(xiàn)有的適配者類，而無(wú)須修改原有代碼。
增加了類的透明性和復(fù)用性，將具體的實(shí)現(xiàn)封裝在適配者類中，對(duì)于客戶端類來(lái)說(shuō)是透明的
靈活性和擴(kuò)展性都非常好，通過(guò)使用配置文件，可以很方便地更換適配器，也可以在不修改原有代碼的基礎(chǔ)上增加新的適配器類，完全符合“開閉原則”。
適用環(huán)境
系統(tǒng)需要使用現(xiàn)有的類，而這些類的接口不符合系統(tǒng)的需要。
想要建立一個(gè)可以重復(fù)使用的類，用于與一些彼此之間沒(méi)有太大關(guān)聯(lián)的一些類，包括一些可能在將來(lái)引進(jìn)的類一起工作。
“JavaScript的show方法怎么調(diào)用”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！
分享文章：JavaScript的show方法怎么調(diào)用
鏈接URL：http://www.dlmjj.cn/article/iigcps.html
