外觀模式

隱藏系統的復雜性,并向客戶端提供了一個客戶端可以訪問系統的接口,這種類型的設計模式屬于結構型模式,它向現有的系統添加一個接口，來隱藏系統的復雜性.

• 圖例

  
  
  image.png

• 代碼實現

class Chips{
    create(){
        return console.log('薯條')
    }
}
class Hamburg{
    create(){
        return console.log('漢堡包')
    }
}
class Coke{
    create(){
        return console.log('可樂')
    }
}

class Somecounter{
   constructor(){
       this.chips=new Chips()
       this.hamburg=new Hamburg()
       this.coke=new Coke()
   }
   make(){
      this.chips.create()
      this.hamburg.create()
      this.coke.create()
   }
}

class Client{
   constructor(){
     this.somecounter=new Somecounter();
   }
   order(){
      return this.somecounter.make()
   }
}

let client=new Client()
client.order() //薯條  漢堡包 可樂 

• 應用場景

function ajax(type, url, callback, data) {
    // 根據當前瀏覽器獲取對ajax連接對象的引用
    var xhr = (function () {
            try {
                // 所有現代瀏覽器所使用的標準方法
                return new XMLHttpRequest();
            } catch (e) {}
            // 較老版本的internet Explorer兼容
            try {
                return new ActiveXObject("Msxml2.XMLHTTP.6.0");
            } catch (e) {}
            try {
                return new ActiveXObject("Msxml2.XMLHTTP.3.0");
            } catch (e) {}
            try {
                return new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {}
            // 如果沒能找到相關的ajax連接對象，則跑出一個錯誤。
            throw new Error("Ajax not support in this browser.")
        }())
        STATE_LOADED = 4,
        STATUS_OK = 200;
       // 一但從服務器收到表示成功的相應消息，則執行所給定的回調方法
    xhr.onreadystatechange = function (){
        if (xhr.readyState !== STATE_LOADED) {
            return;
        }
        if (xhr.state == STATUS_OK) {
            callback(xhr.responseText);
        }
    }

    // 使用瀏覽器的ajax連接對象來向所給定的URL發出相關的調用
    xhr.open(type.toUpperCase(), url);
    xhr.send(data);
}
// 使用方法
ajax("get", "/user/12345", function (rs) {
    alert('收到的數據為：' + rs);
})