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