精讀《設計模式 - Facade 外觀模式》

時間 2020-12-07

標籤前端 git github typescript 設計模式微信 this 設計 code cdn 欄目 Git 简体版

原文原文鏈接

Facade（外觀模式）

Facade（外觀模式）屬於結構型模式，是一種平常開發中常常被使用到的設計模式。前端

意圖：爲子系統中的一組接口提供一個一致的界面，Facade 模式定義了一個高層接口，這個接口使得這一子系統更加容易使用。git

舉例子

若是看不懂上面的意圖介紹，沒有關係，設計模式須要在平常工做裏用起來，結合例子能夠加深你的理解，下面我準備了三個例子，讓你體會什麼場景下會用到這種設計模式。github

意圖解釋

圖書管理員

圖書館是一個很是複雜的系統，雖然圖書按照必定規則擺放，但也只有內部人員比較清楚，做爲一位初次來的訪客，想要快速找到一本書，最好的辦法是直接問圖書管理員，而不是先了解這個圖書館的設計，由於你可能要來回在各個樓宇間奔走，借書的流程可能也比較長。typescript

圖書管理員就起到了簡化圖書館子系統複雜度的做用，咱們只要凡事詢問圖書管理員便可，而不須要關心他是如何與圖書館內部系統打交道的。設計模式

最多跑一次便民服務

浙江省推出的最多跑一次服務很是方便，不少辦事流程都簡化了，不管是證件辦理仍是業務受理，幾乎只要跑一次，而必需要持續幾天的流程也會經過手機短信或者 App 操做完成後續流程。微信

這就至關於外觀模式，由於政府系統內部的辦事流程可能沒有太大變化，但經過抽象出 Facade（外觀），讓普通市民能夠直接與便民辦事處鏈接，而不須要在車管所與駕校之間來回奔波，背後的事情沒有少，只是便民辦事處幫你作了。this

Iphone 快捷指令功能

手機的 App 很是多，而咱們須要瞭解每一個功能在哪一個 App 上才能運用自如，而快捷指令功能能夠將 App 的某些功能單獨提取出來，造成一套新的功能組，咱們能夠只接觸到「拍照」「付款」「計算」，而不用管背後是調用了支付寶仍是微信、系統內置攝像機仍是其餘攝像 App，也不用關心這個 App 內部功能的入口在哪裏，這些對接都在快接指令中自動完成。設計

快捷指令也是一種外觀模式。code

意圖解釋

意圖：爲子系統中的一組接口提供一個一致的界面，Facade 模式定義了一個高層接口，這個接口使得這一子系統更加容易使用。cdn

爲下降一個擁有多個接口的子系統內部複雜性，咱們須要一個外觀來屏蔽內部的複雜性，所以外觀模式就是定義一個高層接口，這個接口直連子系統的內部實現，但調用這個高層接口的人不須要關心子系統內部的實現，這樣，對於不想了解子系統內部實現的人來講，提升了易用度。

固然若是想要深度定製，就能夠繞過外觀模式，直接使用子系統提供的類，因此說並非有了外觀模式就必須經過外觀調用，而是根據實際須要判斷使用哪一種調用方式。

結構圖

能夠看到，Facade 直接指向子系統中的類，而子系統的類不會反向指向 Facade。

代碼例子

下面例子使用 typescript 編寫。

// 假設一個子系統是三個類結合使用的，爲了抽象而解耦開了
class A {
  constructor(b: B) {
    this.b = b
  }
}

class B {
  constructor(c: C) {
    this.c = c
  }
}

class C {
  
}

// 它們組合成了一種經常使用功能，咱們可使用外觀模式屏蔽子類的細節直接使用
class Compile {
  public run() {
    const parser = new A(new B(new C))
    parser.run()
  }
}

const compile = new Compile()
compile.run()

這樣咱們只要知道 Compile 類就能夠了，而不須要了解背後的 A B C 以及其組合關係。