JS設計模式——外觀模式

什麼是外觀模式

外觀（Facade）模式是屬於結構型模式，通過提供外觀的包裝隱藏系統的複雜性。

火箭發射系統很複雜，但真正使用它的人，可能就需要一個按鈕，讓它發射就好。那麼發射按鈕就隱藏了啓動程序及發射系統的複雜性。

我們用的各種第三方庫，大多也是通過給用戶提供 API 來簡化和隱藏內部的複雜實現。

實例

現在好多商店都在用微信或者支付寶掃碼收款，如果放兩個二維碼經常會有顧客掃錯，那麼就可以應用外觀模式，將不同的二維碼整合成一個，通過系統內部區分。除此之外，我們還可以做額外的擴展。

class PayCode {
    constructor() {
        this.record = []
    }

    pay(args) {
       if(args.wechat) {
           this.record.push({
               type: 'wechat',
               amount: args.amount
           })
           console.log(`微信到賬${args.amount}元`)
       }
       if(args.alipay) {
           this.record.push({
               type: 'alipay',
               amount: args.amount
           })
           console.log(`支付寶到賬${args.amount}元`)
       }
    }

    getRecord() {
        console.log(this.record)
    }

    getSum() {
        const sum = this.record.reduce((total, item) => total + item.amount, 0)
        console.log(`賬戶總收入${sum}元`)
    }
    
}

// 使用
const paycode = new PayCode()

// 掃碼記賬
paycode.pay({wechat: true, amount: 10.5})

paycode.pay({alipay: true, amount: 8.5})

paycode.pay({alipay: true, amount: 2.2})

paycode.pay({wechat: true, amount: 1.5})

// 賬本輸出
paycode.getRecord()

// 計算總收入
paycode.getSum()

輸出結果

優缺點

優點：隱藏了系統內部複雜的實現細節，提高了可用性和安全性。

缺點：對細節的抽象是以性能爲代價的，畢竟直接掃碼更快。大規模使用要考慮隱性成本。

在使用時，我們需要考慮利弊，把握抽象程度。