JavaScript設計模式適配器模式實例

Posted on by

前言：

適配器設計模式可以用生活中常用的筆記本電腦來做例子，筆記本使用電壓在20v左右，但是我們傢用電壓在220v左右，所以我們希望用傢用電適配對應的筆記本電壓，這個時候就需要使用電源適配器

我們可以用我們剛剛說的筆記本電腦來舉例子，這是傢用電，傢用電電壓為220V，所以我們返回一下電壓數

// 傢用電
        class Power{
            charge(){
                return '220V';
            }
        }

筆記本電源適配器，我們創建一個傢用電實例，在通過方法對電壓進行轉換為筆記本可充電的電壓

class Adaptor{
            constructor(){
                this.power= new Power();
            }
            charge(){
                // 先拿到傢用電電壓
                let voltage=this.power.charge;
                // 返回一個轉換值
                return `${voltage}=>20V`
            }
        }

電腦，我們創建一個電腦適配器實例，然後電腦適配器實例的電壓轉換方法對電壓進行轉換充電

class Computer{
        constructor(){
            this.adaptor=new Adaptor()
        }
        // 電腦充電
        use(){
            console.log(this.adaptor.charge());
        }
    }

使用：

const cop=new Computer();
//充電
cop.use();

在工作中我們需要使用到多個功能，比如我們項目中使用到瞭百度地圖數據接口和高德地圖數據接口,這個時候我們就可以去使用適配器模式

//對百度地圖的數據接口操作
const BaiduMap={
           show(){
              //獲取百度地圖數據
           }
       }
       //對高德地圖的數據接口操作
       const GaodeiMap={
           show(){
           //獲取高德地圖數據
           }
       }
            //對騰訊地圖的數據接口操作
       const TxMap={
           init(){
           //獲取騰訊地圖數據
           }
       }

由於他們都有共同點，所以請求數據都為show方法,如果有一天使用到其他的地圖請求數據為init的API接口，我們去修改獲取數據的方法的話成本太高，這個時候就需要使用到瞭適配器設計模式，通過switch語句進行匹配方法名，進行調用

//接收倆個參數，第一個是地圖模塊名，第二個是調用方法
function Adapter(V, fnName) {
            switch (fnName) {
                case 'show':
                    V.show()
                    break;
                case 'init':
                    V.init()
                    break;
            }
        }

適配器設計模式可以讓彼此不兼容的功能在一塊工作，有助於避免大規模的修改代碼，並且易於擴展和兼容,但是如果過多的使用適配器，就會使得代碼復雜程度增加，看起來十分混亂，維護起來有一定的困難

到此這篇關於JavaScript設計模式適配器模式實例的文章就介紹到這瞭,更多相關JavaScript 適配器模式內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：