JavaScript設(shè)計(jì)模式之適配器模式介紹
適配器模式說明
說明: 適配器模式，一般是為要使用的接口，不符本應(yīng)用或本系統(tǒng)使用，而需引入的中間適配層類或?qū)ο蟮那闆r；
場景: 就好比我們買了臺(tái)手機(jī)，買回來后發(fā)現(xiàn)，充電線插頭是三插頭，但家里，只有兩插頭的口的插座，怎么辦？為了方便，也有為能在任何地方都能充上電，就得去買個(gè)通用充電適配器; 這樣手機(jī)才能在自己家里充上電；不然只能放著，或跑到有這個(gè)插頭的地方充電；
實(shí)際開發(fā)環(huán)境下，由于舊的系統(tǒng)，或第三方應(yīng)用提供的接口，與我們定義的接口不匹配，在以面向接口編程的環(huán)境下，就無法使用這樣舊的，或第三方的接口，這時(shí)我們就使用適配類繼承待適匹配的類，并讓適配類實(shí)現(xiàn)接口的方式來引入舊的系統(tǒng)或第三方應(yīng)用的接口；
這樣使用接口編程時(shí)，就可以使用這個(gè)適匹配類，來間接調(diào)用舊的系統(tǒng)或第三方應(yīng)用的接口。
在 Javascript 要實(shí)現(xiàn)類似動(dòng)態(tài)面向?qū)ο笳Z言的適配器模式的代碼，可以使用到 prototype 的繼承實(shí)例來實(shí)現(xiàn)；因?yàn)槭腔诮涌诩s束的，但是Javascript沒有接口這號(hào)東西，我們?nèi)サ艚涌谶@一層，直接實(shí)現(xiàn)接口實(shí)現(xiàn)類 Target ，模擬類似的源碼出來；
源碼實(shí)例
1. 待適配的類及接口方法:
function Adaptee() {
this.name = 'Adaptee';
}
Adaptee.prototype.getName = function() {
return this.name;
}
2. 普通實(shí)現(xiàn)類 [由于 Javascript 中沒有接口，所以就直接提供實(shí)現(xiàn)類]
function Target() {
this.name = 'Target';
}
Target.prototype.queryName= function() {
return this.name;
}
3. 適配類:
function Adapte() {
this.name = '';
}
Adapte.prototype = new Adaptee();
Adapte.prototype.queryName = function() {
this.getName();
}
4.使用方法:
var local = new Target();
local.queryName(); //調(diào)用普通實(shí)現(xiàn)類
var adapte = new Adapte();
adapte.queryName(); //調(diào)用舊的系統(tǒng)或第三方應(yīng)用接口;
其他說明
上面第四步，var local 以及 var adapte 類似像 Java,C# 這樣的面向?qū)ο笳Z言中接口引用指定，如:
interface Target {
public String queryName();
}
//接口引用指向
Target local = new RealTarget(); //即上面 Javascript 的 Target 實(shí)現(xiàn)類
local.queryName();
//適配器
Target adapte = new Adapte();
adapte.queryName();
可見適配器類是連接接口與目標(biāo)類接口的中間層；就是用來解決，需要的目標(biāo)已經(jīng)存在了，但我們無法直接使用，不能跟我們的代碼定義協(xié)同使用，就得使用適器模式，適配器模式也叫轉(zhuǎn)換模式，包裝模式；
- JavaScript適配器模式詳解
- javascript設(shè)計(jì)模式之Adapter模式【適配器模式】實(shí)現(xiàn)方法示例
- 深入理解JavaScript系列（39）：設(shè)計(jì)模式之適配器模式詳解
- 詳解JavaScript實(shí)現(xiàn)設(shè)計(jì)模式中的適配器模式的方法
- javascript設(shè)計(jì)模式 – 適配器模式原理與應(yīng)用實(shí)例分析
- JavaScript設(shè)計(jì)模式學(xué)習(xí)之適配器模式
- JavaScript 設(shè)計(jì)模式之組合模式解析
- JavaScript組合模式學(xué)習(xí)要點(diǎn)
- 設(shè)計(jì)模式中的組合模式在JavaScript程序構(gòu)建中的使用
- javascript設(shè)計(jì)模式 – 組合模式原理與應(yīng)用實(shí)例分析
- JavaScript設(shè)計(jì)模式開發(fā)中組合模式的使用教程
- javascript適配器模式和組合模式原理與實(shí)現(xiàn)方法詳解
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)時(shí)間選擇，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要為大家詳細(xì)介紹了Bootstrap模仿起筷首頁效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-05-05
layui將table轉(zhuǎn)化表單顯示的方法(即table.render轉(zhuǎn)為表單展示)
今天小編就為大家分享一篇layui將table轉(zhuǎn)化表單顯示的方法(即table.render轉(zhuǎn)為表單展示)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09
JavaScript實(shí)現(xiàn)星星等級(jí)評(píng)價(jià)功能
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)星星等級(jí)評(píng)價(jià)功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
原生JS實(shí)現(xiàn)匯率轉(zhuǎn)換功能代碼實(shí)例
這篇文章主要介紹了原生JS實(shí)現(xiàn)匯率轉(zhuǎn)換功能代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-05-05
這篇文章主要為大家介紹了JavaScript 事件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
springMVC + easyui + $.ajaxFileUpload實(shí)現(xiàn)文件上傳注意事項(xiàng)
在使用easyUI做前端樣式展示時(shí)，遇到了文件上傳的問題，而且是在彈出層中提交表單，想做到不刷新頁面，所以選擇了使用ajaxFileUpload插件。下面通過本文給大家分享springMVC + easyui + $.ajaxFileUpload實(shí)現(xiàn)文件上傳注意事項(xiàng)，需要的朋友參考下吧2017-04-04
使用window.print()前端實(shí)現(xiàn)網(wǎng)頁打印超詳細(xì)教程(含代碼示例)
前端實(shí)現(xiàn)打印功能的方法有很多,大家在網(wǎng)上隨便一搜就是一大堆,下面這篇文章主要給大家介紹了關(guān)于使用window.print()前端實(shí)現(xiàn)網(wǎng)頁打印的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-06-06
JavaScript頁面倒計(jì)時(shí)功能完整示例
這篇文章主要介紹了JavaScript頁面倒計(jì)時(shí)功能,結(jié)合完整實(shí)例形式分析了javascript計(jì)時(shí)器、時(shí)間運(yùn)算相關(guān)操作技巧,需要的朋友可以參考下2019-05-05
JavaScript編程的10個(gè)實(shí)用小技巧
盡管我使用Javascript來做開發(fā)有很多年了，但它常有一些讓我很驚訝的小特性。對(duì)于我來說，Javascript是需要持續(xù)不斷的學(xué)習(xí)的。2014-04-04