DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> JavaScript設計模式之適配器模式介紹
JavaScript設計模式之適配器模式介紹
編輯:關於JavaScript     

適配器模式說明

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

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

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

這樣使用接口編程時,就可以使用這個適匹配類,來間接調用舊的系統或第三方應用的接口。

在 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();

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

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved