首頁 > web前端 > js教程 > 主體

JavaScript設計模式之適配器模式介紹_javascript技巧

WBOY
發布: 2016-05-16 16:24:00
原創
1238 人瀏覽過

適配器模式說明

說明: 適配器模式,一般是為要使用的接口,不符本應用或本系統使用,而需引入的中間適配層類或對象的情況;

場景: 就好比我們買了台手機,買回來後發現,充電線插頭是三插頭,但家裡,只有兩插頭的口的插座,怎麼辦?為了方便,也有為能在任何地方都能充上電,就得去買個通用充電適配器; 這樣手機才能在自己家裡充上電;不然只能放著,或跑到有這個插頭的地方充電;

實際開發環境下,由於舊的系統,或第三方應用提供的接口,與我們定義的接口不匹配,在以面向接口編程的環境下,就無法使用這樣舊的,或第三方的接口,這時我們就使用適配類繼承待適匹配的類,並讓適配類實現接口的方式來引入舊的系統或第三方應用的接口;

這樣使用介面程式設計時,就可以使用這個適匹配類,來間接呼叫舊的系統或第三方應用的介面。

在Javascript 要實作類似動態物件導向語言的適配器模式的程式碼,可以使用到prototype 的繼承實例來實作;因為是基於介面約束的,但是Javascript沒有介面這號東西,我們去掉介面這一層,直接實作介面實作類別Target ,模擬類似的源碼出來;

源碼實例

1. 待適配的類別及介面方法:


複製程式碼 程式碼如下:

function Adaptee() {
    this.name = 'Adaptee';
}
Adaptee.prototype.getName = function() {
    return this.name;
}

2. 普通實作類別 [由於 Javascript 中沒有接口,所以就直接提供實作類別]

複製程式碼 程式碼如下:

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(); //呼叫普通實作類別

var adapte = new Adapte();
adapte.queryName(); //呼叫舊的系統或第三方應用介面;

其他說明

上面第四步,var local 以及 var adapte 類似像 Java,C# 這樣的物件導向語言中介面引用指定,如:


複製程式碼 程式碼如下:

interface Target {
    public String queryName();
}
//介面引用指向
Target local = new RealTarget(); //即上面 Javascript 的 Target 實作類別
local.queryName();

//轉接器
Target adapte = new Adapte();
adapte.queryName();

可見適配器類別是連接介面與目標類別介面的中間層;就是用來解決,需要的目標已經存在了,但我們無法直接使用,不能跟我們的程式碼定義協同使用,就得使用適配器模式,適配器模式也叫轉換模式,包裝模式;

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!