设计模式(六)-外观模式(门面模式)

外观模式

隐藏系统的复杂性,并向客户端提供了一个客户端可以访问系统的接口,这种类型的设计模式属于结构型模式,它向现有的系统添加一个接口，来隐藏系统的复杂性.

• 图例

  
  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);
})