ES6 實現之介面卡模式 Adapter

小小小發表於2018-04-13

概述

介面卡模式的作用是解決兩個物件間的介面不相容的問題。使用介面卡模式之後,原本由於介面不相容而不能工作的兩個物件可以一起工作。

舉個生活中的例子:港式插頭轉換器,港式的電器插頭比大陸的電器插頭體積要大一些。如果從香港買了一個 Mac book,我們會發現充電器無法插在家裡的插座上,為此而改造家裡的插座顯然不方便,所以我們需要一個轉換插頭。

運用

通過上述例子,我們可以知道介面卡模式有三個角色:

  • 目標角色(Target):大陸的電器插頭
  • 源角色(Adaptee): 港式的電器插頭
  • 介面卡角色(Adapter): 把港式的電器插頭轉成更小大陸的電器插頭,來適配大陸插座
目標角色實現
class Target {
    small(){
        throw new Error('This method must be overwritten!');
    }
}
複製程式碼

由Target介面實現目標角色,使用者期待更小的電器插頭。

源角色實現
class Adaptee {
    big(){
        console.log("港式的電器插頭可用咯~~");
    }
}
複製程式碼

Adaptee 屬於更大的港式的電器插頭,這和使用者所期望的不同。所以這裡需要引入介面卡,去轉換成使用者所期待的目標介面。

介面卡實現
class Adapter extends Target {
    constructor(adaptee) {
        super();
        this.adaptee = adaptee;
    }
    small() {
        this.adaptee.big();
    }
}
複製程式碼

Adapter 類繼承了 Target,重寫 small 函式,最後通過介面卡,把港式big轉成了大陸的small了。

測試一下
let adaptee=new Adaptee();
let adapter=new Adapter(adaptee);
adapter.small();
# 港式的電器插頭可用咯~~
複製程式碼

【第一次打廣告:所有設計模式,請看 ES6 實現最實用的 22 種設計模式

相關文章